/* ==========================================================================
   FFB Alimentos — camada de marca
   Identidade do portfólio (19/06/2026) aplicada sobre o tema Avanam/Tooldic.
   Só cor, tipografia, borda e espaçamento. Nenhuma mudança de estrutura.
   Apagar este arquivo e o ffb-marca.php reverte tudo.
   ========================================================================== */

/* Paleta combinada, aprovada em 14/08/2026:
   fundo, marrom e dourado vêm da leitura web da Ketilly (autora da marca);
   o dourado de LINK é escurecido porque o dela dá 2.81:1 como texto.
   Contrastes validados: título 13.65:1 · corpo 9.68:1 · link 4.54:1 ·
   texto no botão 4.85:1 · header 13.65:1. */
:root:root{
  --ffb-marrom:#2F241F;    /* Ketilly */
  --ffb-marrom-2:#4A3B33;
  --ffb-dourado:#B38B59;   /* Ketilly — fundo de botão, texto escuro por cima */
  --ffb-link:#96643D;      /* escurecido: 4.54:1 sobre o bege (o dela dá 2.81) */
  --ffb-trigo:#CDC2AF;     /* portfólio */
  --ffb-creme:#F7F3EE;     /* Ketilly — fundo da página */
  --ffb-areia:#EFE9E1;
  --ffb-linha:#E3DBD1;
  --ffb-carta:#FFFFFF;     /* cartão branco: deixa a foto do produto carregar a cor */

  /* Playfair Display é a escolha da autora da marca. O override do texto
     do botão saiu: com o dourado dela, o marrom por cima dá 4.85:1 sozinho. */
  --global-heading-font-family:"Playfair Display","Iowan Old Style",
    "Palatino Linotype",Palatino,Georgia,serif;
}

/* --------------------------------------------------------------- fundo --- */
/* ATENÇÃO: `.site-container` NÃO entra aqui. Ele aparece 6x dentro do
   <header> e 2x no <footer>; pintá-lo de creme cobria o marrom das faixas
   e deixava o cabeçalho com miolo claro e as bordas escuras. */
body,
body.wp-site-blocks,
.site,
.content-area,
.site-main{ background-color:var(--ffb-creme); }

/* e, por garantia, o container nunca pinta dentro da chrome */
#masthead .site-container,
#colophon .site-container{ background-color:transparent; }

/* superfícies que o tema marca como "conteúdo" viram papel, não branco */
.content-bg,
.entry.loop-entry,
.product-details,
.woocommerce-tabs,
.single-product .entry-content-wrap{
  background-color:var(--ffb-carta);
}

/* ------------------------------------------------------------ cabeçalho --- */
/* O tema pinta os containers INTERNOS de cada faixa, não os externos:
     #masthead                                      -> palette9
     .site-top-header-wrap    .row-container-inner  -> palette8
     .site-bottom-header-wrap .row-container-inner  -> palette1
   Pintar só os externos deixava marrom apenas nas laterais. */
#masthead,
#main-header,
#masthead .site-header-wrap,
#masthead .site-header-inner-wrap,
#masthead .site-header-upper-inner-wrap,
#masthead .site-header-row-container-inner,
.site-top-header-wrap .site-header-row-container-inner,
.site-main-header-wrap .site-header-row-container-inner,
.site-bottom-header-wrap .site-header-row-container-inner{
  background-color:var(--ffb-marrom);
  border-bottom:0;
}
#masthead,
#masthead a,
#masthead p,
#masthead .site-title,
#masthead .header-navigation a,
#masthead .header-contact-item,
#masthead .header-cart-total,
#masthead button{
  color:var(--ffb-creme);
}
/* campos de busca continuam claros: texto escuro sobre papel */
#masthead input[type="text"],
#masthead input[type="search"],
#masthead select{
  background-color:var(--ffb-carta);
  color:var(--ffb-marrom);
  border:1px solid var(--ffb-linha);
}
#masthead input::placeholder{ color:var(--ffb-marrom-2); opacity:.75; }
#masthead .search-submit,
#masthead button[type="submit"]{
  background-color:var(--ffb-dourado);
  color:var(--ffb-creme);
  border:0;
}
/* submenu suspenso: o tema o pinta com palette9 (claro) sobre header escuro */
#masthead .header-navigation .header-menu-container ul ul.sub-menu,
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a{
  background-color:var(--ffb-marrom);
  color:var(--ffb-creme);
}
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:hover{
  background-color:var(--ffb-marrom-2);
  color:var(--ffb-creme);
}
#masthead .header-navigation a:hover,
#masthead a:hover,
#masthead a:focus-visible{ color:var(--ffb-trigo); }

/* navegação com o versalete espaçado da marca */
#masthead .header-navigation .menu-item > a{
  font-family:var(--global-heading-font-family);
  font-variant-caps:small-caps;
  letter-spacing:.09em;
  font-size:1.06rem;
}
#masthead .custom-logo{ max-height:56px; width:auto; }

/* ------------------------------------------------------------ tipografia --- */
h1,h2,h3,h4,.entry-title,.woocommerce-loop-product__title,.product_title{
  font-family:var(--global-heading-font-family);
  color:var(--ffb-marrom);
  font-weight:600;
  letter-spacing:.01em;
}
h1,h2,.entry-title{ text-wrap:balance; }

/* --------------------------------------------------------------- botões --- */
.button,
button.button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.single_add_to_cart_button{
  font-family:var(--global-heading-font-family);
  font-variant-caps:small-caps;
  letter-spacing:.1em;
  font-size:1.02rem;
  border-radius:2px;
}

/* ------------------------------------------------------- cartão da loja --- */
ul.products li.product,
.woocommerce ul.products li.product{
  border:1px solid var(--ffb-linha);
  border-radius:2px;
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
ul.products li.product:hover{
  border-color:var(--ffb-dourado);
  box-shadow:0 2px 14px rgba(65,40,34,.10);
}
ul.products li.product .product-details{
  padding:1rem 1.05rem 1.15rem;
  border-top:1px solid var(--ffb-linha);
}
.woocommerce-loop-product__title,
.woocommerce-loop-product__title a{
  font-variant-caps:small-caps;
  letter-spacing:.05em;
  line-height:1.25;
  color:var(--ffb-marrom);
}
ul.products li.product .price{
  color:var(--ffb-marrom);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------- trava de preço (B2B) --- */
/* Para o visitante deslogado esta é a CTA principal da loja — todos os 16
   produtos estão travados. Sólida, não contornada: uma grade inteira de
   botões vazados faz a página parecer inacabada.
   O prefixo `body` sobe a especificidade acima de `.woocommerce a.button.alt`
   do tema, sem recorrer a !important. */
body ul.products li.product .price a.button,
body .price a.button.alt{
  display:block;
  width:100%;
  text-align:center;
  background-color:var(--ffb-dourado);
  color:var(--ffb-marrom);
  border:1px solid var(--ffb-dourado);
  font-size:.88rem;
  letter-spacing:.08em;
  padding:.6rem .8rem;
  line-height:1.3;
}
body ul.products li.product .price a.button:hover,
body .price a.button.alt:hover{
  background-color:var(--ffb-marrom);
  border-color:var(--ffb-marrom);
  color:var(--ffb-creme);
}

/* --------------------------------------------------------------- rodapé --- */
/* Mesma armadilha do cabeçalho: o tema pinta os `-inner`, não os externos.
   Lista levantada varrendo todas as regras do tema que usam palette como
   fundo dentro de footer/colophon — não é palpite. */
#colophon,
.site-footer,
.site-footer-row-container,
.site-footer-row-container-inner,
.site-middle-footer-wrap,
.site-bottom-footer-wrap,
.site-middle-footer-wrap .site-footer-row-container-inner,
.site-bottom-footer-wrap .site-footer-row-container-inner,
.site-footer .site-footer-wrap .site-footer-section .footer-social-wrap{
  background-color:var(--ffb-marrom);
  color:var(--ffb-creme);
}
#colophon,
#colophon a,
#colophon p,
#colophon li,
.site-footer a,
#colophon .widget-title,
#colophon h2,#colophon h3,
.site-middle-footer-inner-wrap .widget-area .widget-title,
#colophon .site-footer-row-container .site-footer-row .footer-html{
  color:var(--ffb-creme);
}
#colophon a:hover{ color:var(--ffb-trigo); }
#colophon .widget-title{ font-variant-caps:small-caps; letter-spacing:.08em; }

/* ------------------------------------------------------------- detalhes --- */
a{ color:var(--ffb-link); }
a:hover{ color:var(--ffb-marrom); }
hr,.wp-block-separator{ border-color:var(--ffb-linha); }
:focus-visible{ outline:2px solid var(--ffb-dourado); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ================================================= blocos nativos da Home ===
   Substituem o Elementor. Editáveis pela equipe no editor de blocos.
   ========================================================================== */
.ffb-hero{ margin-block:0; }
.ffb-hero h1{
  color:var(--ffb-creme);
  font-family:var(--global-heading-font-family);
  max-width:22ch;
  margin-bottom:.6rem;
}
.ffb-hero p{ color:var(--ffb-creme); max-width:46ch; opacity:.95; }
.ffb-hero .wp-block-cover__inner-container{ padding-inline:clamp(1.5rem,6vw,5rem); }

.ffb-cta .wp-block-button__link{
  background-color:var(--ffb-dourado);
  color:var(--ffb-marrom);
  border:0;
  border-radius:2px;
  font-family:var(--global-heading-font-family);
  font-variant-caps:small-caps;
  letter-spacing:.1em;
  font-size:1.05rem;
  padding:.7rem 1.6rem;
}
.ffb-cta .wp-block-button__link:hover{ background-color:var(--ffb-marrom-2); color:var(--ffb-creme); }

.ffb-segmentos{
  background-color:var(--ffb-areia);
  padding-block:2.4rem;
  border-block:1px solid var(--ffb-linha);
}
.ffb-segmentos h2{ font-size:1.35rem; margin-bottom:.5rem; }
.ffb-lista-segmentos{
  font-family:var(--global-heading-font-family);
  font-variant-caps:small-caps;
  letter-spacing:.08em;
  font-size:1.12rem;
  color:var(--ffb-marrom-2);
  max-width:60ch;
  margin-inline:auto;
}
.ffb-subtitulo{ color:var(--ffb-marrom-2); margin-top:-.4rem; }

/* grade de categorias: o tema deixa os cartões sem respiro */
.woocommerce ul.product-categories li,
ul.products li.product-category a{ color:var(--ffb-marrom); }
ul.products li.product-category h2,
ul.products li.product-category .woocommerce-loop-category__title{
  font-variant-caps:small-caps;
  letter-spacing:.05em;
  color:var(--ffb-marrom);
}

/* ================================================== largura de conteúdo ====
   O Elementor era quem constrangia a largura (.elementor-container{max-width}).
   Sem ele, a grade passou a ocupar a viewport inteira e os cartões incharam.
   Devolve o limite do próprio tema (--global-content-width: 1448px).
   ========================================================================== */
.entry-content.single-content > *:not(.alignfull):not(.alignwide),
.entry-content.single-content > .woocommerce{
  max-width:var(--global-content-width,1448px);
  margin-inline:auto;
}
.entry-content.single-content > .woocommerce{
  padding-inline:var(--global-content-edge-padding,1.5rem);
}

/* --------------------------------------------- densidade da grade da loja --- */
/* imagem quadrada uniforme: as fontes têm proporções diferentes e sem trava
   a grade fica com cartões de alturas distintas */
ul.products li.product .product-thumbnail img,
ul.products li.product .archive-image-wrap img{
  aspect-ratio:1/1;
  object-fit:cover;
  width:100%;
  height:auto;
  display:block;
}

/* --------------------------------------------- cartões de categoria ------- */
/* São ícones de linha, não fotos: exibi-los a 450px é desproporcional. */
ul.products li.product-category a > img{
  aspect-ratio:3/2;
  object-fit:contain;
  max-height:132px;
  width:auto;
  margin-inline:auto;
  padding:1.25rem 1rem .5rem;
}
ul.products li.product-category{ text-align:center; }
ul.products li.product-category .woocommerce-loop-category__title,
ul.products li.product-category h2{
  padding:.65rem 1rem 1rem;
  font-size:1.05rem;
  border-top:1px solid var(--ffb-linha);
  margin:0;
}
ul.products li.product-category mark.count{
  background:transparent;
  color:var(--ffb-marrom-2);
  font-family:var(--sans,inherit);
}

/* ================================================== carrinho do cabeçalho ===
   O tema já monta o botão e a gaveta (#cart-drawer, cart-style-slide) e
   registra o fragmento AJAX do subtotal. Aqui só damos forma de marca:
   ícone + "Carrinho" + subtotal, e a gaveta com a identidade.
   ========================================================================== */
#masthead .header-cart-button{
  display:flex;
  align-items:center;
  gap:.6rem;
  background:transparent;
  border:0;
  padding:.35rem .5rem;
  cursor:pointer;
  color:var(--ffb-creme);
}
#masthead .header-cart-button .base-svg-iconset{ line-height:0; flex:0 0 auto; }
#masthead .header-cart-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.15;
  text-align:left;
}
#masthead .header-cart-title{
  font-family:var(--global-heading-font-family);
  font-variant-caps:small-caps;
  letter-spacing:.09em;
  font-size:.9rem;
  opacity:.8;
}
#masthead .header-cart-label.subtotal{
  font-family:var(--sans,ui-sans-serif,system-ui,sans-serif);
  font-size:.95rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
/* o badge de quantidade sobe para junto do ícone */
#masthead .header-cart-total{
  background:var(--ffb-dourado);
  color:var(--ffb-marrom);
  font-family:var(--sans,ui-sans-serif,system-ui,sans-serif);
  font-size:.72rem;
  font-weight:700;
  min-width:1.25rem;
  height:1.25rem;
  line-height:1.25rem;
  border-radius:999px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
#masthead .header-cart-button:hover{ color:var(--ffb-trigo); }
#masthead .header-cart-button:focus-visible{ outline:2px solid var(--ffb-dourado); outline-offset:2px; }

/* --------------------------------------------------- gaveta do pedido ----- */
#cart-drawer .drawer-inner{ background-color:var(--ffb-carta); }
#cart-drawer .drawer-overlay{ background-color:rgba(47,36,31,.55); }
#cart-drawer .drawer-header{
  background-color:var(--ffb-marrom);
  padding:1.1rem 1.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#cart-drawer .side-cart-header{
  color:var(--ffb-creme);
  font-family:var(--global-heading-font-family);
  font-variant-caps:small-caps;
  letter-spacing:.08em;
  margin:0;
  font-size:1.3rem;
}
#cart-drawer .cart-toggle-close{
  background:transparent; border:0; color:var(--ffb-creme); cursor:pointer;
}
#cart-drawer .cart-toggle-close:hover{ color:var(--ffb-trigo); }
#cart-drawer .drawer-content{ padding:1.3rem 1.4rem; }
#cart-drawer .woocommerce-mini-cart__empty-message{
  color:var(--ffb-marrom-2);
  font-style:italic;
  text-align:center;
  padding:2rem 0;
}
#cart-drawer .woocommerce-mini-cart__total{
  border-top:1px solid var(--ffb-linha);
  border-bottom:1px solid var(--ffb-linha);
  padding:.9rem 0;
  display:flex;
  justify-content:space-between;
  font-variant-numeric:tabular-nums;
}
#cart-drawer .woocommerce-mini-cart__buttons{
  display:flex; flex-direction:column; gap:.6rem; margin-top:1rem;
}
#cart-drawer .woocommerce-mini-cart__buttons a.button{
  display:block; text-align:center; width:100%;
  background-color:var(--ffb-areia); color:var(--ffb-marrom);
  border:1px solid var(--ffb-linha);
}
#cart-drawer .woocommerce-mini-cart__buttons a.button.checkout{
  background-color:var(--ffb-dourado);
  border-color:var(--ffb-dourado);
  color:var(--ffb-marrom);
}
#cart-drawer .woocommerce-mini-cart__buttons a.button:hover{
  background-color:var(--ffb-marrom); border-color:var(--ffb-marrom); color:var(--ffb-creme);
}

/* --- correções do carrinho contra os padrões fixos do tema ---------------- */
/* O child theme esconde o SVG (font-size:0) e desenha o ícone como máscara CSS
   pintada com `background-color: var(--global-palette3)` — que agora é a
   própria cor do cabeçalho. Não adianta mexer em `color`. */
#masthead .header-cart-button .base-svg-iconset{
  padding:0;
  position:relative;
  width:28px;
  height:28px;
  display:inline-block;
  flex:0 0 28px;
}
#masthead .header-cart-button .base-svg-iconset::after{
  background-color:var(--ffb-creme);
}
#masthead .header-cart-button:hover .base-svg-iconset::after{
  background-color:var(--ffb-trigo);
}
/* o subtotal vem com palette3 fixado pelo woocommerce.min.css do tema */
#masthead .header-cart-button .header-cart-content .woocommerce-Price-amount,
#masthead .header-cart-button .header-cart-content .woocommerce-Price-amount *{
  color:var(--ffb-creme);
}

/* ============================================== carrinho flutuante ==========
   Abre a MESMA gaveta do cabeçalho (#cart-drawer) — o JS é o do tema.
   Embaixo à esquerda: a direita é do widget de atendimento.
   ========================================================================== */
.ffb-carrinho-flutuante{
  position:fixed;
  left:1.25rem;
  bottom:1.25rem;
  z-index:9999;
  width:3.5rem;
  height:3.5rem;
  border-radius:999px;
  border:0;
  background-color:var(--ffb-marrom);
  color:var(--ffb-creme);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(47,36,31,.32);
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.ffb-carrinho-flutuante:hover{
  background-color:var(--ffb-dourado);
  color:var(--ffb-marrom);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(47,36,31,.38);
}
.ffb-carrinho-flutuante:focus-visible{
  outline:2px solid var(--ffb-dourado);
  outline-offset:3px;
}
/* badge de quantidade — atualizado pelo fragmento AJAX do tema */
.ffb-carrinho-flutuante .header-cart-total{
  position:absolute;
  top:-.2rem;
  right:-.2rem;
  min-width:1.4rem;
  height:1.4rem;
  line-height:1.4rem;
  padding:0 .3rem;
  border-radius:999px;
  background-color:var(--ffb-dourado);
  color:var(--ffb-marrom);
  border:2px solid var(--ffb-creme);
  font-family:var(--sans,ui-sans-serif,system-ui,sans-serif);
  font-size:.72rem;
  font-weight:700;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
/* com o carrinho vazio o badge fica discreto, mas o botão continua visível */
.ffb-carrinho-flutuante .header-cart-total.header-cart-is-empty-true{
  background-color:var(--ffb-linha);
  color:var(--ffb-marrom-2);
}
/* enquanto a gaveta está aberta o botão sai da frente */
.showing-popup-drawer-from-right .ffb-carrinho-flutuante{ opacity:0; pointer-events:none; }
@media (max-width:640px){
  .ffb-carrinho-flutuante{ width:3.1rem; height:3.1rem; left:1rem; bottom:1rem; }
}
@media (prefers-reduced-motion:reduce){
  .ffb-carrinho-flutuante{ transition:none; }
  .ffb-carrinho-flutuante:hover{ transform:none; }
}

/* --- correções apontadas pelas capturas de 14/08 ------------------------- */

/* 1. O tema esconde a descrição na grade (só exibe em products-list-view).
      Num catálogo B2B a descrição é argumento de compra — devolver.
      Prefixo `body` para superar (0,4,2) do tema com (0,4,3). */
body .woocommerce ul.products li.product .product-excerpt,
body ul.products li.product .product-excerpt{
  display:block;
  font-family:var(--sans,ui-sans-serif,system-ui,sans-serif);
  font-size:.8rem;
  line-height:1.5;
  color:var(--ffb-marrom-2);
  margin:.35rem 0 .6rem;
}

/* 2. Cabeçalho da gaveta: o child theme usa #cart-drawer.popup-drawer
      .drawer-header (1,2,0). Igualar a especificidade e vencer por ordem. */
#cart-drawer.popup-drawer .drawer-header{
  background-color:var(--ffb-marrom);
}
#cart-drawer.popup-drawer .drawer-header .side-cart-header{ color:var(--ffb-creme); }
body #cart-drawer.popup-drawer .drawer-header .drawer-toggle{
  color:var(--ffb-creme);
  background:transparent;
  border:0;
}
body #cart-drawer.popup-drawer .drawer-header .drawer-toggle:hover{ color:var(--ffb-trigo); }

/* 3. Depois de adicionar, o WooCommerce troca o botão por a.added_to_cart,
      que tem estilo próprio e destoava do "Adicionar ao carrinho". */
body .woocommerce ul.products li.product a.added_to_cart,
body ul.products li.product a.added_to_cart{
  display:block;
  width:100%;
  text-align:center;
  margin-top:.4rem;
  padding:.55rem .8rem;
  border-radius:2px;
  background-color:transparent;
  color:var(--ffb-link);
  border:1px solid var(--ffb-linha);
  font-family:var(--global-heading-font-family);
  font-variant-caps:small-caps;
  letter-spacing:.08em;
  font-size:.9rem;
  text-decoration:none;
}
body .woocommerce ul.products li.product a.added_to_cart:hover,
body ul.products li.product a.added_to_cart:hover{
  background-color:var(--ffb-marrom);
  border-color:var(--ffb-marrom);
  color:var(--ffb-creme);
}

/* --- ícone do carrinho flutuante ----------------------------------------
   O tema define `button{color:var(--global-palette-btn)}`, e esse token
   resolve para #2F241F — o mesmo fundo do botão. Depender de
   `fill="currentColor"` deixava o ícone marrom sobre marrom.
   Fixamos `fill` e as dimensões explicitamente: não depende mais de herança
   de cor nem de font-size (o child theme zera svg por `width:1em` em outro
   ponto, e não queremos ficar expostos ao mesmo truque). */
.ffb-carrinho-flutuante svg{
  fill:var(--ffb-creme);
  width:26px;
  height:26px;
  display:block;
  flex:0 0 auto;
  font-size:26px;
}
.ffb-carrinho-flutuante:hover svg,
button.ffb-carrinho-flutuante:hover svg{ fill:var(--ffb-marrom); }
/* o :hover do tema (button:hover, 0-1-1) supera .classe:hover (0-1-0) */
button.ffb-carrinho-flutuante{ color:var(--ffb-creme); }
button.ffb-carrinho-flutuante:hover{ color:var(--ffb-marrom); }

/* --- ícone social do rodapé ---------------------------------------------
   O tema pinta `a.social-button` com palette clara, o que sobre o rodapé
   marrom vira um disco lavado. Dourado com o glifo em marrom dá 4.85:1. */
#colophon a.social-button,
.site-footer-wrap a.social-button{
  background-color:var(--ffb-dourado);
  color:var(--ffb-marrom);
  width:2.3em;
  height:2.3em;
  border-radius:999px;
}
#colophon a.social-button:hover,
.site-footer-wrap a.social-button:hover{
  background-color:var(--ffb-creme);
  color:var(--ffb-marrom);
}
#colophon a.social-button svg,
.site-footer-wrap a.social-button svg{ fill:currentColor; }