/* Fontes substitutas gratuitas (licença SIL OFL), hospedadas no próprio plugin. O guia da marca usa Belgiano Serif,
   Belleza e Articulat; como a Acodima não tem licença de web de duas delas, usamos parecidas: Playfair Display (títulos),
   Belleza (subtítulos, a mesma do guia) e Figtree (texto). Se um dia houver licença, basta trocar os arquivos e as variáveis. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/playfair-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Belleza";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/belleza-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --acodima-fundo: #F6F7EC;
  --acodima-texto: #242526;
  --acodima-terracota: #9C4329; /* cor da logo (medida no arquivo): terracota mais escuro, escolhido pela Bruna em 05/10/2026 */
  --acodima-botao: #9C4329;
  --acodima-botao-hover: #7F3520;
  --acodima-mostarda: #D1943A;
  --acodima-amarelo: #EFE1B4;
  --acodima-fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --acodima-fonte-subtitulo: "Belleza", "Segoe UI", sans-serif;
  --acodima-fonte-corpo: "Figtree", "Segoe UI", Roboto, Arial, sans-serif;
}

/* Seletores com "html body" para vencer o tema e os extras do Elementor sem depender de ordem de carga. */
html body { background-color: var(--acodima-fundo); color: var(--acodima-texto); font-family: var(--acodima-fonte-corpo); }
html body h1, html body h2, html body h3 { font-family: var(--acodima-fonte-titulo); color: var(--acodima-texto); }
html body h4, html body h5, html body h6, html body .subtitulo { font-family: var(--acodima-fonte-subtitulo); font-weight: 400; }
html body a { color: var(--acodima-botao); }

/* Botões: !important só aqui, porque vários plugins pintam o botão de comprar (hoje, de verde).
   Os seletores ".woocommerce ..." cobrem o tema; os sem ".woocommerce" cobrem o ShopEngine (plugin
   de extras que usa em várias páginas — loja, busca, produto — e não embrulha em ".woocommerce"). */
html body .woocommerce a.button, html body .woocommerce button.button, html body .woocommerce .single_add_to_cart_button,
html body a.button.add_to_cart_button, html body button.add_to_cart_button, html body button.single_add_to_cart_button,
html body .wp-element-button, html body .elementor-button, html body input.wpcf7-submit {
  background-color: var(--acodima-botao) !important; color: #fff !important; border: 0 !important; border-radius: 6px;
}
html body .woocommerce a.button:hover, html body .woocommerce button.button:hover, html body a.button.add_to_cart_button:hover,
html body button.add_to_cart_button:hover, html body button.single_add_to_cart_button:hover,
html body .elementor-button:hover, html body input.wpcf7-submit:hover {
  background-color: var(--acodima-botao-hover) !important; color: #fff !important;
}
/* Página de busca de produtos: usa o ShopEngine (plugin de extras, ainda não trocado pelo nativo —
   ver Tarefa 9 passo 6). O ShopEngine gera, por widget, uma regra !important do tipo
   ".elementor-<id-da-página> .elementor-element.elementor-element-<id-do-widget>
   .shopengine-archive-products .product a.button:not(.shopengine-quickview-trigger)" (7 classes),
   que pinta o botão de verde e vence a regra de cima. Como o id muda a cada página/produto,
   não dá pra mirar o seletor exato — a saída é aumentar a especificidade da minha regra com
   ":not(#_)" repetido (um truque de CSS válido: cada ":not()" conta como 1 classe pra
   especificidade, mesmo sem casar nada de verdade), até ficar acima de qualquer variante do
   ShopEngine. */
html body a.add_to_cart_button:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
html body button.add_to_cart_button:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
  background-color: var(--acodima-botao) !important; color: #fff !important; border: 0 !important;
}
html body .faixa-confianca { background: var(--acodima-amarelo); color: var(--acodima-texto); }
html body .rodape-marca { background: var(--acodima-texto); color: var(--acodima-fundo); }
html body .detalhe-selo { background: var(--acodima-mostarda); color: var(--acodima-texto); }

/* Fotos de produto esticadas na loja: o Premium Addons força object-fit: fill numa caixa
   baixa e larga (331x156px, proporção 2,1:1) na grade. Isso achatava a foto; só trocar
   para "cover" cortava demais (a caixa é larga demais pra maioria das fotos, quadradas ou
   verticais). Corrige as duas coisas: caixa quase quadrada (proporção 1:1) e cover, que
   recorta mantendo a proporção da foto em vez de esticar ou cortar excessivamente. */
html body .woocommerce ul.products img, html body .woocommerce-page ul.products img,
html body .premium-woocommerce .woocommerce-loop-product__link img {
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}
/* Foto principal da página do produto: fotos verticais da Aloia (736x1200) ficavam muito altas
   (passavam de 1000px), dando a impressão de "cortada" em telas menores por precisar rolar pra
   ver o pote inteiro. "contain" com altura máxima mostra a foto inteira, sem cortar nada.
   A página de produto roda no ShopEngine (plugin de extras, mesmo caso do botão da busca acima)
   e não tem um ".woocommerce" por fora — por isso o seletor não depende dele aqui. */
html body .woocommerce-product-gallery__image {
  max-height: 640px !important;
}
html body .woocommerce-product-gallery img {
  object-fit: contain !important;
  max-height: 640px !important;
  width: auto !important;
  margin: 0 auto !important;
}
/* Produtos em destaque da Home ([products] dentro de um widget de shortcode): os cartões flutuam e
   cada um tem a altura do seu próprio título, então o botão "Adicionar ao carrinho" ficava em alturas
   diferentes (títulos de 2, 3 e 4 linhas). Em linha flexível, todos os cartões da fileira têm a mesma
   altura e o botão desce para o pé do cartão. Só nesse widget: a loja e as categorias têm layout próprio. */
.elementor-widget-shortcode .woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
}
.elementor-widget-shortcode .woocommerce ul.products::before,
.elementor-widget-shortcode .woocommerce ul.products::after {
  display: none;
}
.elementor-widget-shortcode .woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
}
.elementor-widget-shortcode .woocommerce ul.products li.product .button {
  margin-top: auto;
}
/* Página de produto e loja (ShopEngine): o modelo coloca a primeira letra de cada palavra em maiúscula
   ("Adicionar Ao Carrinho", "Dips E Homus"), o que erra o português. Aqui volta ao texto como foi escrito.
   Também esconde a linha "Author: Acodima" do modelo do produto (nome do autor do cadastro, sem sentido numa loja). */
html body .single_add_to_cart_button,
html body .shopengine-breadcrumbs a,
html body .shopengine-breadcrumbs span,
html body p.stock {
  text-transform: none !important;
}
html body .elementor-element-5ce4793a,
html body .elementor-element-23b619eb {
  display: none !important;
}
/* Blog: na lista de posts (e nas listas por categoria/busca) o tema mostra a foto de capa grande entre o título e o resumo.
   A foto agora vai dentro do texto de cada post, então na lista ela sai. O título fica dentro do h2, por isso o link direto
   do artigo (> a) é só o da foto. */
body.blog .site-main article.post > a,
body.archive .site-main article.post > a,
body.search .site-main article.post > a {
  display: none;
}
/* Foto de capa dentro do post: ocupa a largura do texto, sem estourar. */
.acodima-capa {
  margin: 0 0 1.5em;
}
.acodima-capa img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/* Trilha de navegação do produto (ShopEngine): o último item vinha com a primeira letra de cada palavra em maiúscula. */
html body .shopengine-breadcrumbs,
html body .shopengine-breadcrumbs * {
  text-transform: none !important;
}
/* Terracota mais escuro (#9C4329, a cor da logo) nos detalhes que ainda usavam o tom antigo (#C35637)
   e que eu não consigo trocar direto no modelo: item ativo do menu, bolinha do carrinho lateral e
   os realces (aba ativa, mouse em cima) da página de produto, que o editor do modelo não abre. */
html body .hfe-nav-menu .menu-item.current-menu-item > a.hfe-menu-item,
html body .hfe-nav-menu .menu-item.current-menu-ancestor > a.hfe-menu-item,
html body .hfe-nav-menu .menu-item > a.hfe-menu-item:hover {
  color: var(--acodima-terracota) !important;
}
html body .cc-compass-count {
  background-color: var(--acodima-terracota) !important;
}
html body .woocommerce-tabs ul.tabs li.active a,
html body .woocommerce-tabs ul.tabs li:hover a,
html body .shopengine-product-rating a:hover,
html body .shopengine-product-meta .product_meta :is(.posted_in a, .tagged_as a):hover {
  color: var(--acodima-terracota) !important;
}
html body div.shopengine-product-tabs div.woocommerce-tabs .wc-tabs .shopengine-tabs-line {
  border-color: var(--acodima-terracota) !important;
}
/* Faixa de topo das páginas (Home, Quem somos, Para o seu negócio, Contato, Entrega): foto de ponta a ponta com terracota por
   cima, como a faixa da loja. Texto branco; o botão da Home fica invertido (branco com letra terracota) para destacar sobre a foto. */
html body .acodima-hero h1,
html body .acodima-hero .elementor-heading-title,
html body .acodima-hero p {
  color: #fff !important;
  text-align: center;
  text-shadow: 0 1px 10px rgba(60, 20, 10, 0.35);
}
html body .acodima-hero h1 {
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.15;
}
html body .acodima-hero .elementor-button {
  background-color: #fff !important;
  color: var(--acodima-terracota) !important;
}
html body .acodima-hero .elementor-button:hover {
  background-color: var(--acodima-fundo) !important;
  color: var(--acodima-botao-hover) !important;
}
/* Botão "Ver Mais..." da grade da loja (Premium Addons): vinha com letra branca sem fundo, quase invisível. */
html body .premium-woo-load-more-btn {
  background-color: var(--acodima-botao) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px;
  padding: 8px 20px;
}
html body .premium-woo-load-more-btn:hover {
  background-color: var(--acodima-botao-hover) !important;
}
/* Instagram da Home (Smash Balloon): o plugin entregava 2 fotos enormes por linha e ignora as opções do shortcode.
   Aqui a grade fica em 4 colunas (2 no celular), com largura máxima, e o botão "Seguir no Instagram" na terracota da marca. */
html body #sb_instagram {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
html body #sb_instagram #sbi_images {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px;
  padding: 0 !important;
}
html body #sb_instagram #sbi_images .sbi_item {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  html body #sb_instagram #sbi_images {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
html body #sb_instagram .sbi_follow_btn a,
html body #sb_instagram #sbi_load .sbi_load_btn {
  background: var(--acodima-botao) !important;
  color: #fff !important;
  border-radius: 6px;
}
html body #sb_instagram .sbi_follow_btn a:hover,
html body #sb_instagram #sbi_load .sbi_load_btn:hover {
  background: var(--acodima-botao-hover) !important;
}
/* Título das faixas de topo vindo do ShopEngine (categorias e busca): vinha em CAIXA ALTA e Arial; aqui segue as outras páginas. */
html body .acodima-hero .shopengine-archive-title,
html body .acodima-hero .shopengine-archive-title * {
  font-family: var(--acodima-fonte-titulo) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-align: center;
}
/* Faixa de topo nas páginas do tema (Receitas e blog, Carrinho, Finalizar compra): mesma ideia das outras — ponta a ponta,
   terracota por cima e título em branco. A foto vem da variável --acodima-faixa (sem foto, fica a terracota lisa). */
html { overflow-x: clip; }
body.blog .page-header,
body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 24px;
  background: linear-gradient(rgba(156, 67, 41, 0.6), rgba(156, 67, 41, 0.6)), var(--acodima-faixa, none) center / cover no-repeat, var(--acodima-terracota);
}
body.blog .page-header .entry-title,
body.woocommerce-cart .page-header .entry-title,
body.woocommerce-checkout .page-header .entry-title {
  margin: 0;
  color: #fff !important;
  text-align: center;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.15;
  text-shadow: 0 1px 10px rgba(60, 20, 10, 0.35);
}
body.woocommerce-cart,
body.woocommerce-checkout { --acodima-faixa: url("https://acodima.com/wp-content/uploads/2026/10/entrega-abertura.jpg"); }
body.blog { --acodima-faixa: url("https://acodima.com/wp-content/uploads/2026/10/blog-faixa.jpg"); }
/* Faixa com o texto à esquerda (Home): o texto fica alinhado à esquerda, sobre a parte lisa da mesa e longe do prato. */
html body .acodima-hero-esq h1,
html body .acodima-hero-esq .elementor-heading-title,
html body .acodima-hero-esq p {
  text-align: left !important;
}

/* Banner de cookies (acodima-marca/assets/cookies.js) */
.acodima-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 10000000;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #F6F7EC;
  color: #333333;
  border: 1px solid rgba(156, 67, 41, 0.28);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.acodima-cookies[hidden],
.acodima-cookies-pref[hidden] { display: none !important; }
.acodima-cookies .acodima-cookies__texto { margin: 0; flex: 1 1 320px; }
.acodima-cookies .acodima-cookies__texto a { color: var(--acodima-botao); text-decoration: underline; }
.acodima-cookies .acodima-cookies__acoes { display: flex; gap: 10px; flex: 0 0 auto; }
.acodima-cookies button {
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}
.acodima-cookies button[data-acao="aceitar"] { background: var(--acodima-botao); color: #fff; border: 2px solid var(--acodima-botao); }
.acodima-cookies button[data-acao="aceitar"]:hover,
.acodima-cookies button[data-acao="aceitar"]:focus-visible { background: var(--acodima-botao-hover); border-color: var(--acodima-botao-hover); }
.acodima-cookies button[data-acao="essencial"] { background: transparent; color: var(--acodima-botao); border: 2px solid var(--acodima-botao); }
.acodima-cookies button[data-acao="essencial"]:hover,
.acodima-cookies button[data-acao="essencial"]:focus-visible { background: rgba(156, 67, 41, 0.1); }
.acodima-cookies button:focus-visible { outline: 3px solid rgba(156, 67, 41, 0.45); outline-offset: 2px; }
@media (max-width: 600px) {
  .acodima-cookies { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; }
  .acodima-cookies .acodima-cookies__acoes { width: 100%; }
  .acodima-cookies .acodima-cookies__acoes button { flex: 1; }
}
.acodima-cookies-pref {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 99998;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(156, 67, 41, 0.35);
  background: #F6F7EC;
  color: var(--acodima-botao);
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}
.acodima-cookies-pref:hover,
.acodima-cookies-pref:focus-visible { opacity: 1; background: #fff; }

/* Caixa "Desejo receber promoções e novidades" no fim do checkout */
.woocommerce-checkout .acodima-newsletter { margin: 0 0 14px; }
.woocommerce-checkout .acodima-newsletter label { display: flex; align-items: center; gap: 8px; font-weight: 600; text-transform: none; cursor: pointer; }
.woocommerce-checkout .acodima-newsletter input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--acodima-botao); flex: none; }
.woocommerce-checkout .acodima-newsletter small { display: block; margin: 4px 0 0 26px; color: #55554A; font-size: 13px; line-height: 1.4; }
.woocommerce-checkout .acodima-newsletter small a { color: var(--acodima-botao); text-decoration: underline; }