/* ==========================================================================
   cdc-layout.css — Layout único, mobile-first, do Comidinhas do Chef
   --------------------------------------------------------------------------
   Substitui a lógica "uma versão desktop + uma versão mobile" por UMA versão
   que escala. Carrega depois de cdc-design-system.css e antes de mobile-app.css.

   O problema que este arquivo resolve
   -----------------------------------
   O style.css é desktop-first: escreve o layout grande e depois desfaz em
   dezenas de `@media (max-width: ...)`. Só nesse arquivo há quebras em 520,
   620, 767, 768, 769, 1023, 1024 e 1200px — sete pontos diferentes, sem
   critério comum. Cada ajuste novo vira mais uma exceção, e é por isso que
   coisas como o furo de anúncio entre 769 e 1023px passam despercebidas.

   Aqui a direção inverte: o pequeno é o padrão, o grande é o acréscimo.
   Quatro pontos de quebra, um significado cada:

     (sem media query)  base — celular em pé, 320px+
     min-width: 600px   celular deitado / tablet pequeno: listas em 2 colunas
     min-width: 1024px  entra a barra lateral (é onde o grid de fato muda)
     min-width: 1280px  respiro máximo do container

   CONTRATO DE ANÚNCIOS
   --------------------
   A Adzep injeta nos IDs e classes do tema. Os seletores abaixo são
   ESTRUTURA DE RECEITA, não decoração — nenhum deles pode ser renomeado,
   removido, receber `display:none` ou perder o lugar no fluxo:

     .r7-anuncio, .r7-anuncio.r7-new     faixa de topo (header.php)
     .top-banner                          bloco de topo do artigo
     .ads-top                             faixa de topo de listagens
     .ads                                 caixa genérica de anúncio
     .only-mobile / .only-desktop         decidem QUAL slot renderiza
     .content-sidebar                     coluna lateral
     .content-sidebar-fixed               slot fixo da lateral
     .content-text-sidebar                lateral do bloco de ingredientes

   Este arquivo trata esses seletores só para dar reserva de espaço e evitar
   estouro de largura. Nunca esconde, nunca reordena, nunca renomeia.
   O js/cdc-ad-guard.js verifica isso em runtime.

   Índice
   ------
   00. Contrato de anúncios
   01. Base e caixa
   02. Container
   03. Grid de página
   04. Cabeçalho
   05. Rodapé
   06. Tipografia de página
   07. Cartões de receita
   08. Trilhos e carrosséis
   09. Artigo e receita
   10. Tabelas
   11. Formulários e conta
   12. Comentários
   13. Paginação
   14. Barra lateral
   ========================================================================== */

/* ==========================================================================
   00. CONTRATO DE ANÚNCIOS
   ========================================================================== */

/* Nenhum contêiner de anúncio pode estourar a largura da tela nem empurrar a
   página para o lado. `overflow: clip` no eixo X contém criativo maior que o
   slot sem criar contexto de rolagem (o que `overflow:hidden` faria, e que
   quebraria `position:sticky` nos ancestrais). */
.r7-anuncio,
.ads,
.ads-top,
.top-banner,
.billboard-footer,
.content-sidebar,
.content-sidebar-fixed,
.content-text-sidebar {
  max-width: 100%;
  overflow-x: clip;
}

.ads > *,
.ads-top > *,
.top-banner > *,
.r7-anuncio > * {
  max-width: 100%;
}

/* Reserva de espaço padronizada por posição, mobile-first.
   O tema hoje usa `contain-intrinsic-size: 0 300px` genérico em slots que
   servem 250px e 600px — CLS nos dois sentidos. */
.ads {
  display: block;
  width: 100%;
  margin-block: var(--cdc-space-6);
  text-align: center;
  min-height: 280px;
}

@media (min-width: 1024px) {
  .ads { min-height: 260px; }
}

/* Faixa de topo.
   style.css fixa `height: 39px` e r7-header.css fixa `height: 50px`. Altura
   travada é o que impede a faixa de acomodar um criativo de 90px em desktop.
   `height: auto` + `min-height` deixa o slot crescer sem nunca encolher. */
.r7-anuncio { height: auto; min-height: 50px; }
@media (min-width: 1024px) { .r7-anuncio { min-height: 90px; } }

/* --------------------------------------------------------------------------
   `.top-banner` traz altura no atributo `style` do próprio template
   (`min-height:330px;height:330px`). Atributo inline vence qualquer folha de
   estilo por especificidade — `!important` é o único caminho, e este é o caso
   legítimo dele: sobrescrever inline sem editar o template.

   Por que mudar: 330px fixos em uma tela de 360×640 empurram foto e tabela da
   receita inteiramente para fora da primeira dobra. A pessoa chega da busca e
   vê título e um retângulo vazio. A reserva continua exata (sem CLS), só
   dimensionada para o formato que de fato é servido em cada tela.
   -------------------------------------------------------------------------- */
.top-banner {
  min-height: 250px !important;
  height: auto !important;
}

@media (min-width: 600px) {
  .top-banner { min-height: 280px !important; }
}

@media (min-width: 1024px) {
  .top-banner { min-height: 280px !important; }
}

.ads-top {
  display: block;
  width: 100%;
  padding-block: var(--cdc-space-6) 0;
  text-align: center;
  min-height: 100px;
}
@media (min-width: 1024px) { .ads-top { min-height: 250px; } }

/* Rótulo de publicidade nos blocos legados, sem tocar no HTML.
   Exigência de política e principal mitigação de clique acidental. */
.ads::before,
.ads-top::before,
.top-banner::before {
  content: "Publicidade";
  display: block;
  margin-bottom: var(--cdc-space-1);
  font-family: var(--cdc-font-body);
  font-size: var(--cdc-text-3xs);
  line-height: var(--cdc-leading-snug, 14px);
  letter-spacing: var(--cdc-tracking-caps);
  text-transform: uppercase;
  color: var(--cdc-text-muted);
}

/* Billboard acima do rodapé (#billboard-footer, impresso pelo footer.php).
   Estava sem reserva nenhuma: quando o criativo chegava, empurrava o rodapé
   inteiro para baixo — CLS no fim de toda página do site. */
.billboard-footer {
  display: block;
  width: 100%;
  min-height: 100px;
  margin-block: var(--cdc-space-8) 0;
  text-align: center;
}
@media (min-width: 1024px) { .billboard-footer { min-height: 250px; } }

/* Slot vazio NUNCA colapsa — regra de negócio do grupo. */
.ads:empty,
.ads-top:empty { min-height: 280px; }

/* --------------------------------------------------------------------------
   EXCEÇÃO APROVADA: `.content-text-sidebar` (slot `receita_conteudo_5`, a
   coluna sticky ao lado dos ingredientes) foi retirada do plano de mídia.

   Como é o único ponto do contrato autorizado a sumir, o colapso é por
   `:empty` — some apenas quando não há NADA dentro. Se um dia o slot voltar a
   ser preenchido, ele reaparece sozinho, sem mexer em CSS.
   -------------------------------------------------------------------------- */
.content-text-sidebar:empty { display: none; }

/* ==========================================================================
   01. BASE E CAIXA
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOX-SIZING — por que este arquivo NÃO aplica border-box globalmente.

   O style.css do tema foi escrito em `content-box`. Ele declara
   `box-sizing: border-box` em apenas três seletores pontuais (#backtotop,
   header .search, .login-dual > div:first-child) — todo o resto assume o
   modelo padrão do CSS.

   Isso não é detalhe. Padrões como `width: calc(100% - 30px)` combinados com
   `padding: 0 15px` — que é literalmente o `.wrapper` do tema — foram
   calculados sabendo que o padding fica FORA da largura declarada. Ligar
   border-box no `*` faz cada um desses elementos encolher pelo valor do
   próprio padding, de uma vez, em todas as páginas.

   Aplicar um modelo de caixa novo retroativamente sobre 2.000 linhas escritas
   no modelo antigo parece higiene e sai como dezenas de defeitos espalhados,
   sem um culpado óbvio.

   border-box vale para os componentes do design system e para os elementos que
   ESTE arquivo redimensiona. O CSS legado segue no modelo em que foi escrito,
   até ser migrado componente a componente.
   -------------------------------------------------------------------------- */
[class^="cdc-"],
[class*=" cdc-"],
[class^="cdc-"]::before,
[class^="cdc-"]::after,
[class*=" cdc-"]::before,
[class*=" cdc-"]::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   E os seletores legados que ESTE arquivo redimensiona.

   Toda regra abaixo declara largura E respiro ao mesmo tempo. Em content-box,
   `width: 100%` somado a `padding-inline: 24px` estoura o pai em 48px — em
   `.wrapper`, isso é rolagem lateral em todas as páginas do site.

   A lista é explícita de propósito. Um seletor entra aqui quando este arquivo
   passa a controlar largura e respiro dele; enquanto não passar, ele continua
   no modelo de caixa do tema, que é onde foi escrito.
   -------------------------------------------------------------------------- */
.wrapper,
header .search,
header .search button,
header nav > ul,
.content-text-shadow .quantidade,
.content-text-shadow .quantidade-actions,
.content-text-shadow .quantidade-actions button,
.content-text-shadow .quantidade-actions input,
.login-dual form input,
.login-dual form select,
.minha-conta form input,
.minha-conta form select,
.content-info .comments form input[type="text"],
.content-info .comments form input[type="email"],
.content-info .comments form textarea,
.content-sidebar,
.content-text-shadow,
.pagination .page-numbers,
#footer,
#footer .wrapper {
  box-sizing: border-box;
}

html {
  /* `clip` em vez de `hidden`: contém estouro horizontal sem criar contexto de
     rolagem — `position: sticky` continua funcionando nos filhos. */
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--cdc-bg);
  color: var(--cdc-text);
  font-family: var(--cdc-font-body);
  font-size: var(--cdc-text-md);
  line-height: var(--cdc-leading-body);
  -webkit-font-smoothing: antialiased;
}

img,
video,
iframe,
svg { max-width: 100%; }

img,
video { height: auto; }

/* Todo filho de grid/flex precisa de min-width:0, senão uma palavra longa,
   uma URL sem espaço ou um iframe de anúncio força o container a crescer e a
   página inteira ganha rolagem horizontal. É a causa número um de "o site
   está deslizando pro lado no celular". */
.content-wrapper > *,
.content-info > *,
.receita-small > *,
.receita-medium > *,
.receita-big > *,
#footer .wrapper > * { min-width: 0; }

/* ==========================================================================
   02. CONTAINER
   ========================================================================== */

/* Um container só, fluido, com respiro que cresce junto com a tela.
   Substitui `width: calc(100% - 30px); padding: 0 15px` por algo que não
   depende de subtração fixa. Largura máxima preservada (1127px). */
.wrapper {
  width: 100%;
  max-width: 1127px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
  padding-inline-start: max(clamp(16px, 4vw, 24px), var(--cdc-safe-l));
  padding-inline-end: max(clamp(16px, 4vw, 24px), var(--cdc-safe-r));
}

/* O header usa dois `.wrapper` irmãos; o segundo não deve repetir o respiro
   vertical. Mantido do comportamento original. */
header .wrapper + .wrapper { padding-block: 0; }

/* ==========================================================================
   03. GRID DE PÁGINA
   ========================================================================== */

/* Mobile-first: uma coluna. A lateral entra em 1024px, que é o mesmo ponto em
   que `.only-desktop` passa a valer — os dois alinhados de propósito, porque
   é o desalinhamento entre eles que hoje deixa a faixa 769–1023px sem anúncio
   nenhum. */
.content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cdc-space-6);
  align-items: start;
  padding-block: var(--cdc-space-6);
}

@media (min-width: 1024px) {
  .content-wrapper {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--cdc-space-8);
    padding-block: var(--cdc-space-8);
  }
}

@media (min-width: 1280px) {
  .content-wrapper { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* `.page` centraliza sem lateral. */
.page .content-wrapper { grid-template-columns: minmax(0, 1fr); justify-content: center; }
@media (min-width: 1024px) {
  .page .content-wrapper { max-width: 760px; margin-inline: auto; }
}

.content { width: 100%; background: var(--cdc-bg); }

.site-main { display: block; }

/* ==========================================================================
   04. CABEÇALHO
   --------------------------------------------------------------------------
   Estrutura real: faixa de parceiros do R7 (#r7-header, injetada por script
   externo), depois a linha da marca — logo à esquerda, busca ao centro, ações
   à direita — e por último a linha de categorias com seta de submenu e "Mais".

   Em celular a mesma marcação vira: menu, logo centralizado, conta; a busca cai
   para a linha de baixo. Nenhum elemento é duplicado nem escondido por versão.
   ========================================================================== */

/* Faixa do R7: vem de fora, então aqui só garantimos que ela não crie rolagem
   horizontal nem passe por cima do header do site. */
#r7-header {
  max-width: 100vw !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
#r7-header::-webkit-scrollbar { display: none; }

header {
  background: var(--cdc-surface);
  border-bottom: 1px solid var(--cdc-border);
}

/* --- linha da marca ---------------------------------------------------- */

/* --------------------------------------------------------------------------
   CABEÇALHO — flex com quebra, não grid de colunas fixas.

   A versão anterior usava `grid-template-columns: auto 1fr auto`, assumindo
   três filhos. O markup real tem CINCO: o botão de menu, o `div` que embrulha
   o logo, o formulário de busca e dois links de conta. Com a busca ocupando a
   linha inteira, os dois links sobravam e caíam numa terceira linha, cada um
   numa coluna diferente — cabeçalho torto em celular e em desktop.

   Grid com contagem fixa de colunas só é seguro quando o template é seu. Aqui
   não é: um link a mais no cabeçalho quebraria de novo. `flex` com
   `flex-wrap` acomoda N filhos sem que o CSS precise saber quantos são.
   -------------------------------------------------------------------------- */
header .wrapper:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cdc-space-2);
  padding-block: var(--cdc-space-3);
}

header .wrapper:first-child > .action-btn { flex: 0 0 auto; }

/* O bloco do logo ocupa o vão do meio e centraliza. */
header .wrapper:first-child > div:not(.action-btn):not(.search) {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

header .logo img,
header .logo svg {
  height: clamp(40px, 10vw, 48px);
  width: auto;
}

/* Ações (Minhas Receitas / Entrar-Sair): ícone acima do rótulo em celular,
   ícone ao lado do rótulo no desktop. */
header .action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cdc-space-05, 2px);
  min-height: var(--cdc-tap);
  min-width: var(--cdc-tap);
  color: var(--cdc-brand-dark);
  font-size: var(--cdc-text-2xs);
  line-height: 1.1;
  text-align: center;
}
header .action-btn:hover { color: var(--cdc-text-brand); text-decoration: none; }
header .action-btn--recipe { display: none; }

/* --- busca ------------------------------------------------------------- */

header .search {
  /* Linha própria em celular por flex-basis, não por grid-column — o pai é
     flex agora. `order` garante que ela fique por último mesmo aparecendo no
     meio do HTML. */
  flex: 1 1 100%;
  order: 10;
  display: flex;
  align-items: center;
  gap: var(--cdc-space-1);
  width: 100%;
  padding: var(--cdc-space-1);
  background: var(--cdc-tint-line-24);
  border: 1px solid var(--cdc-border);
  border-radius: var(--cdc-radius-pill);
}

header .search input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  min-height: var(--cdc-control-sm);
  padding-inline: var(--cdc-space-4);
  border: 0;
  background: none;
  color: var(--cdc-brand-dark);
  font-size: var(--cdc-text-md);   /* 16px: abaixo disso o iOS dá zoom ao focar */
  border-radius: inherit;
}
header .search input::placeholder { color: var(--cdc-text-muted); opacity: 1; }

header .search button {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--cdc-radius-circle, 50%);
  background: var(--cdc-brand);
  color: var(--cdc-gray-0, #fff);
}
header .search button:hover { background: var(--cdc-red-700); }

/* --- desktop ----------------------------------------------------------- */

@media (min-width: 1024px) {
  header .wrapper:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cdc-space-6);
    padding-block: var(--cdc-space-5);
  }

  header .logo img,
  header .logo svg { height: 72px; }

  /* A busca é o elemento central do header e o principal caminho de descoberta
     do site. Ela ganha o espaço que sobra, com teto para não colar nas ações. */
  header .search {
    flex: 1 1 auto;
    max-width: 620px;
    margin-inline: auto;
    padding: var(--cdc-space-1) var(--cdc-space-1) var(--cdc-space-1) var(--cdc-space-2);
  }
  header .search input { min-height: var(--cdc-tap-min); font-size: var(--cdc-text-lg); }
  header .search button { width: var(--cdc-tap-min); height: var(--cdc-tap-min); }

  header .action-btn {
    flex-direction: row;
    gap: var(--cdc-space-2);
    font-size: var(--cdc-text-md);
    white-space: nowrap;
  }
  header .action-btn--recipe { display: flex; }
  header .action-btn--menu { display: none; }
}

/* --- linha de categorias ------------------------------------------------ */

header nav { width: 100%; }

/* Em celular a navegação vive na folha do app shell — que tem trava de
   rolagem, foco preso e alvo de 48px, coisas que o menu em tela cheia atual
   não tem. Aqui ela só não é desenhada; nada é removido do DOM. */
@media (max-width: 1023.98px) {
  header nav { display: none; }
}

@media (min-width: 1024px) {
  header nav h2 { display: none; }

  header nav > ul {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--cdc-border);
  }

  header nav > ul > li {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
  }

  header nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cdc-space-1);
    min-height: calc(var(--cdc-icon-lg) + var(--cdc-space-5));
    padding-inline: var(--cdc-space-3);
    color: var(--cdc-brand-dark);
    font-size: var(--cdc-text-md);
    font-weight: var(--cdc-weight-medium);
    background-image: none;
    border-bottom: 3px solid transparent;
    transition: color var(--cdc-dur-fast) var(--cdc-ease), border-color var(--cdc-dur-fast) var(--cdc-ease);
  }

  /* Indicador da seção atual e do hover: sublinhado grosso na cor da marca.
     É o mesmo vocabulário do indicador da aba ativa na tab bar do celular. */
  header nav > ul > li:hover > a,
  header nav > ul > li:focus-within > a,
  header nav > ul > li.current-menu-item > a,
  header nav > ul > li.current-menu-parent > a {
    color: var(--cdc-text-brand);
    border-bottom-color: var(--cdc-text-brand);
  }

  header nav > ul > li > ul { display: none; }

  header nav > ul > li:hover > ul,
  header nav > ul > li:focus-within > ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 50;
    min-width: 220px;
    margin: 0;
    padding: var(--cdc-space-2);
    background: var(--cdc-surface);
    border: 1px solid var(--cdc-border);
    border-radius: 0 0 var(--cdc-radius-sm) var(--cdc-radius-sm);
    box-shadow: var(--cdc-elev-4);
    text-align: start;
    list-style: none;
    transform: translateX(-50%);
  }

  /* Submenus das pontas não podem sair da tela. */
  header nav > ul > li:first-child:hover > ul,
  header nav > ul > li:first-child:focus-within > ul { left: 0; transform: none; }
  header nav > ul > li:last-child:hover > ul,
  header nav > ul > li:last-child:focus-within > ul { left: auto; right: 0; transform: none; }

  header nav > ul > li > ul li { display: block; width: 100%; }

  header nav > ul > li > ul a {
    display: block;
    min-height: var(--cdc-control-sm);
    padding: var(--cdc-space-2) var(--cdc-space-3);
    border-radius: var(--cdc-radius-xs);
    color: var(--cdc-brand-dark);
    font-size: var(--cdc-text-sm);
  }
  header nav > ul > li > ul a:hover {
    background: var(--cdc-red-50);
    text-decoration: none;
  }
}

/* ==========================================================================
   05. RODAPÉ
   --------------------------------------------------------------------------
   Três blocos, na ordem em que já estão no HTML: menu rápido, marca, autor.
   Em celular eles empilham nessa mesma ordem — sem `order:` invertendo a
   leitura, que é o que o CSS atual faz e o que confunde leitor de tela.

   O cartão do autor é o único elemento com fundo próprio: ele é a prova de
   autoria do site (E-E-A-T), então merece peso visual diferente do resto.
   ========================================================================== */

#footer {

  background: var(--cdc-footer-bg);
  color: var(--cdc-gray-0, #fff);
  padding-block: var(--cdc-space-10) var(--cdc-space-6);
  margin-block-start: var(--cdc-space-10);
}

#footer .wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cdc-space-10);
  align-items: start;
}

@media (min-width: 1024px) {
  #footer .wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cdc-space-8); }
  #footer .footer-author { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  #footer .wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--cdc-space-10);
  }
  #footer .footer-author { grid-column: auto; }
}

#footer a { color: var(--cdc-gray-0, #fff); }
#footer a:hover { text-decoration: underline; }

/* --- menu rápido -------------------------------------------------------- */

#footer .footer-menu h2 {
  margin: 0 0 var(--cdc-space-4);
  padding-bottom: var(--cdc-space-3);
  border-bottom: 1px solid var(--cdc-tint-on-dark-24);
  color: var(--cdc-gray-0, #fff);
  font-family: var(--cdc-font-body);
  font-size: var(--cdc-text-sm);
  font-weight: var(--cdc-weight-bold);
  letter-spacing: var(--cdc-tracking-caps);
  text-transform: uppercase;
}

#footer .footer-menu-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--cdc-space-5);
}

#footer .footer-menu ul { margin: 0; padding: 0; list-style: none; }
#footer .footer-menu li { list-style: none; }

#footer .footer-menu li a {
  display: flex;
  align-items: center;
  min-height: var(--cdc-tap-min);
  padding-block: var(--cdc-space-1);
  color: var(--cdc-footer-ink);
  font-size: var(--cdc-text-md);
}
#footer .footer-menu li a:hover { color: var(--cdc-gray-0, #fff); }

/* --- marca -------------------------------------------------------------- */

#footer .footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cdc-space-6);
  text-align: center;
}

#footer .footer-logo > a { display: block; }
#footer .footer-logo img,
#footer .footer-logo svg { max-width: 240px; height: auto; }

#footer .social,
#footer .cdc-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cdc-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Redes sociais: círculo com o glifo em branco, alvo de var(--cdc-tap-min). O tema hoje usa
   SVG solto com escala no hover e sem área de toque definida. */
#footer .social a,
#footer .cdc-social-link {
  display: grid;
  place-items: center;
  width: var(--cdc-tap-min); height: var(--cdc-tap-min);
  border-radius: var(--cdc-radius-circle, 50%);
  background: var(--cdc-tint-on-dark-12, rgba(255, 255, 255, .12));
  color: var(--cdc-gray-0, #fff);
  transition: background var(--cdc-dur-fast) var(--cdc-ease), transform var(--cdc-dur-fast) var(--cdc-ease);
}
#footer .social a:hover,
#footer .cdc-social-link:hover { background: var(--cdc-tint-on-dark-24); transform: translateY(-2px); }
#footer .social a svg { transform: none; }

#footer .footer-institutional {
  width: 100%;
  padding-top: var(--cdc-space-5);
  border-top: 1px solid var(--cdc-tint-on-dark-12);
}

#footer .footer-institutional ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cdc-space-1) var(--cdc-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .footer-institutional li { list-style: none; position: relative; }

/* Separador em pseudo-elemento: some sozinho na quebra de linha, ao contrário
   do "|" escrito no HTML, que fica órfão no fim da linha. */
#footer .footer-institutional li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--cdc-space-4) / -2);
  top: 50%;
  width: 1px; height: 14px;
  transform: translateY(-50%);
  background: var(--cdc-tint-on-dark-32);
}

#footer .footer-institutional a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cdc-tap-min);
  font-size: var(--cdc-text-md);
}

#footer .copyright {
  margin: var(--cdc-space-4) 0 0;
  color: var(--cdc-tint-on-dark-62);
  font-size: var(--cdc-text-sm);
  line-height: var(--cdc-leading-snug);
}
#footer .copyright a { color: var(--cdc-tint-on-dark-82); }

/* --- autor -------------------------------------------------------------- */

#footer .footer-author {
  padding: var(--cdc-space-6);
  background: var(--cdc-scrim-hairline);
  border: 1px solid var(--cdc-tint-on-dark-12);
  border-radius: var(--cdc-radius-lg);
}

#footer .footer-author .author {
  display: flex;
  align-items: center;
  gap: var(--cdc-space-4);
  margin-bottom: var(--cdc-space-4);
}

#footer .footer-author .author img {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  border-radius: var(--cdc-radius-circle, 50%);
  object-fit: cover;
}

#footer .footer-author .author h3 {
  margin: 0;
  color: var(--cdc-gray-0, #fff);
  font-size: var(--cdc-text-lg);
  font-weight: var(--cdc-weight-bold);
  line-height: var(--cdc-leading-snug);
}

#footer .footer-author .author h3 span {
  display: block;
  margin-top: var(--cdc-space-05, 2px);
  color: var(--cdc-footer-ink);
  font-size: var(--cdc-text-sm);
  font-weight: var(--cdc-weight-regular);
}

#footer .footer-author p {
  margin: 0;
  color: var(--cdc-footer-ink);
  font-size: var(--cdc-text-md);
  line-height: var(--cdc-leading-body);
  max-width: 46ch;
}

/* --- aviso de cookies ---------------------------------------------------- */

/* Fica acima da tab bar e da âncora, respeitando a área segura — hoje ele
   ancora em `bottom:25px` e cobre a navegação inteira no iPhone. */
#footer-lgpd {
  left: var(--cdc-space-3);
  right: var(--cdc-space-3);
  bottom: calc(var(--cdc-tabbar-h) + var(--cdc-anchor-h) + var(--cdc-safe-b) + var(--cdc-space-3));
  max-width: 1127px;
  padding: var(--cdc-space-4);
  border-radius: var(--cdc-radius-lg);
  box-shadow: var(--cdc-elev-4);
}
#footer-lgpd p { font-size: var(--cdc-text-sm); line-height: var(--cdc-leading-snug); }
#footer-lgpd button {
  min-height: var(--cdc-tap);
  margin: var(--cdc-space-3) 0 0;
  padding-inline: var(--cdc-space-5);
  border-radius: var(--cdc-radius-pill);
  font-size: var(--cdc-text-md);
  font-weight: var(--cdc-weight-bold);
}
@media (min-width: 1024px) {
  #footer-lgpd button { margin: 0 0 0 var(--cdc-space-4); }
}

/* ==========================================================================
   06. TIPOGRAFIA DE PÁGINA
   --------------------------------------------------------------------------
   Substitui os pares "48px no desktop / 24px no celular" por um degrau só,
   fluido. São ~30 declarações de font-size no style.css que deixam de precisar
   de media query.
   ========================================================================== */

.content h1,
.sobrenos h1,
.minha-conta .t-secondary,
.receitas-tipo .t-secondary,
.receitas-recentes .t-secondary,
.receitas-eventos .t-secondary,
.receitas-maisvistas .t-secondary {
  font-family: var(--cdc-font-display);
  font-size: var(--cdc-text-3xl);
  line-height: var(--cdc-leading-tight);
  /* Título usa a TINTA (#5B1311), não o vermelho de ação. Ver a nota sobre
     contraste em cdc-design-system.css: 13,13:1 contra 5,92:1. */
  color: var(--cdc-text-brand);
}

.content h1 {
  font-size: var(--cdc-text-4xl);
  line-height: var(--cdc-leading-display);
  letter-spacing: var(--cdc-tracking-display);
  /* Equilibra as linhas: sem isso o navegador quebra no limite da caixa e
     sobra uma segunda linha com duas palavras soltas, como em
     "…cobertura / de brigadeiro". `balance` distribui o texto entre as
     linhas e ignora a regra em blocos com mais de 4 linhas, então não há
     custo de renderização em título longo. */
  text-wrap: balance;
  /* Título de display não deve usar a medida do texto corrido: 68ch em 40px
     dá uma linha larga demais para o olho voltar ao começo da seguinte. */
  max-width: 24ch;
  margin-block-end: var(--cdc-space-3);
}

/* Os demais títulos de display herdam a mesma correção de entrelinha. */
.content h1,
.sobrenos h1,
.minha-conta .t-secondary,
.receitas-tipo .t-secondary,
.receitas-recentes .t-secondary,
.receitas-eventos .t-secondary,
.receitas-maisvistas .t-secondary {
  line-height: var(--cdc-leading-display);
  letter-spacing: var(--cdc-tracking-display);
  text-wrap: balance;
}

/* Breadcrumb: respiro próprio, separador com espaço de respiração e alvo de
   toque real em cada elo. */
.breadcrumb {
  margin-block-start: var(--cdc-space-1);
  color: var(--cdc-text-muted);
}

.content-info .accordeon h2,
.content-info .video h2,
.content-info .comments #reply-title,
.sobrenos h2,
.seetoo h3,
.receitas-maisvistas h3 {
  font-family: var(--cdc-font-body);
  font-size: var(--cdc-text-2xl);
  line-height: var(--cdc-leading-snug);
  color: var(--cdc-brand-dark);
  font-weight: var(--cdc-weight-bold);
}

.content-text-shadow h2 { font-size: var(--cdc-text-xl); }

.content .resume,
.archive p,
.sobrenos p {
  font-size: var(--cdc-text-lg);
  line-height: var(--cdc-leading-body);
  letter-spacing: var(--cdc-tracking-tight);
  color: var(--cdc-text);
}

/* Medida de leitura. Linha com mais de ~75 caracteres cansa e faz o olho
   perder o começo da linha seguinte — em desktop a coluna de texto hoje passa
   de 100 caracteres. */
.content .resume > p,
.content-info .accordeon-text p,
.sobrenos p { max-width: 68ch; }

.breadcrumb { font-size: var(--cdc-text-sm); }
.breadcrumb a {
  display: inline-block;
  padding: var(--cdc-space-3) var(--cdc-space-1) var(--cdc-space-3) 0;
  color: var(--cdc-brand-dark);
  font-weight: var(--cdc-weight-bold);
}

/* ==========================================================================
   07. CARTÕES DE RECEITA
   --------------------------------------------------------------------------
   `.receita-small`, `.receita-medium` e `.receita-big` são três componentes com
   CSS quase idêntico e três comportamentos responsivos diferentes. Aqui viram
   variações do mesmo cartão, com consultas de container em vez de media query:
   o cartão se adapta ao espaço que RECEBE, não ao tamanho da janela. É o que
   faz o mesmo componente funcionar na coluna principal e na lateral sem
   nenhuma exceção nova.
   ========================================================================== */

.receita-small,
.receita-medium,
.receita-big {
  container-type: inline-size;
  background: var(--cdc-surface);
  border-radius: var(--cdc-radius-xl);
  box-shadow: var(--cdc-elev-1);
}

.receita-small,
.receita-medium {
  display: grid;
  grid-template-columns: var(--cdc-thumb-md) minmax(0, 1fr);
  gap: var(--cdc-space-3);
  padding: var(--cdc-space-2);
  margin-block-start: var(--cdc-space-5);
}

@container (min-width: 420px) {
  .receita-small,
  .receita-medium { grid-template-columns: var(--cdc-thumb-lg) minmax(0, 1fr); gap: var(--cdc-space-4); }
}

.receita-small-image a,
.receita-medium-image a {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: var(--cdc-radius-lg);
  overflow: hidden;
}

.receita-small-image img,
.receita-medium-image img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.receita-small-info .title,
.receita-medium-info .title,
.receita-big-info .title {
  font-size: var(--cdc-text-lg);
  line-height: var(--cdc-leading-snug);
  font-weight: var(--cdc-weight-medium);
  color: var(--cdc-brand-dark);
}
.receita-small-info .title a,
.receita-medium-info .title a,
.receita-big-info .title a { font-size: inherit; color: inherit; }

@container (min-width: 600px) {
  .receita-small-info .title,
  .receita-medium-info .title { font-size: var(--cdc-text-xl); }
}

.receita-big {
  display: flex;
  flex-direction: column;
  gap: var(--cdc-space-2);
  padding: var(--cdc-space-2);
  margin-block: 0 var(--cdc-space-4);
}

@media (min-width: 600px) {
  .receita-big { padding: var(--cdc-space-4); margin-block-start: var(--cdc-space-6); }
}

.receita-big-image a {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--cdc-radius-lg);
  overflow: hidden;
}
.receita-big-image a img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: none;
}

.receita-small-info .category,
.receita-small-info .comment-count,
.receita-medium-info .category,
.receita-medium-info .comment-count,
.receita-big-info .category,
.receita-big-info .comment-count {
  display: flex;
  align-items: center;
  gap: var(--cdc-space-1);
  font-size: var(--cdc-text-xs);
  color: var(--cdc-brand-deep);
}

/* O contador de comentários some no celular hoje. É prova social — o sinal
   mais forte de que a receita funciona — e é justamente onde ele mais pesa. */
@media (max-width: 1023.98px) {
  .receita-small-info .comment-count,
  .receita-medium-info .comment-count,
  .receita-big-info .comment-count { display: flex; }
  .receita-big-info .actions-links .category { display: flex; }
}

/* Botões de ação do cartão com alvo real de toque. */
.receita-small-info button,
.receita-medium-info button,
.receita-big-info button {
  width: var(--cdc-tap);
  height: var(--cdc-tap);
  background-size: 22px auto;
  right: var(--cdc-space-2);
  top: var(--cdc-space-1);
}

/* Listagens: uma coluna no celular, duas a partir de 600px, três em telas
   grandes SEM barra lateral. */
.receitas-recentes .receita-big,
.archive .receita-big { margin-block-start: var(--cdc-space-4); }

@media (min-width: 600px) {
  .cdc-grid-recipes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--cdc-space-5);
  }
  .cdc-grid-recipes > * { margin-block: 0; }
}

/* ==========================================================================
   08. TRILHOS E CARROSSÉIS
   --------------------------------------------------------------------------
   `.seetoo-slide`, `.receitas-maisvistas-slide` e `.receitas-tipo ul` já são
   trilhos de rolagem horizontal em telas pequenas, cada um com regras próprias.
   Padronizados aqui num comportamento só, com encaixe (scroll-snap) e sem
   depender do slick — que é 51 KB de JS para fazer o que o navegador já faz.
   ========================================================================== */

.seetoo-slide,
.receitas-maisvistas-slide,
.receitas-tipo ul {
  display: flex;
  gap: var(--cdc-space-3);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 var(--cdc-space-4);
  margin: 0;
  scrollbar-width: none;
}

.seetoo-slide::-webkit-scrollbar,
.receitas-maisvistas-slide::-webkit-scrollbar,
.receitas-tipo ul::-webkit-scrollbar { display: none; }

.seetoo-slide-item,
.receitas-maisvistas-slide-item {
  flex: 0 0 auto;
  width: clamp(140px, 42vw, 176px);
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

@media (min-width: 1024px) {
  .seetoo-slide,
  .receitas-maisvistas-slide { padding-inline: 0; }
  .seetoo-slide-item,
  .receitas-maisvistas-slide-item { width: 180px; }
}

.seetoo-slide-img,
.receitas-maisvistas-slide-img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding-top: 0;
  border-radius: var(--cdc-radius-lg);
  overflow: hidden;
}

.seetoo-slide-img img,
.receitas-maisvistas-slide-img img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transform: none;
  border-radius: inherit;
}

.seetoo-slide-item::after,
.receitas-maisvistas-slide-item::after {
  left: 0;
  width: 100%;
  border-radius: 0 0 var(--cdc-radius-lg) var(--cdc-radius-lg);
}

.seetoo-slide-item h4,
.receitas-maisvistas-slide-item h4 {
  font-size: var(--cdc-text-sm);
  line-height: var(--cdc-leading-snug);
}

.receitas-tipo .tipo-img {
  width: clamp(88px, 24vw, 135px);
  aspect-ratio: 1 / 1;
  padding-top: 0;
}
.receitas-tipo .tipo-img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: none;
}

/* Setas do carrossel: só fazem sentido onde há ponteiro. */
.seetoo .arrow,
.receitas-maisvistas .arrow { display: none; }
@media (min-width: 1024px) and (hover: hover) {
  .seetoo .arrow,
  .receitas-maisvistas .arrow { display: flex; }
}

/* Destaque principal da home. */
.slide .img {
  aspect-ratio: 16 / 9;
  padding-top: 0;
  border-radius: var(--cdc-radius-lg);
}
@media (min-width: 1024px) {
  .slide .img { aspect-ratio: 21 / 9; border-radius: var(--cdc-radius-xl); }
}
.slide .img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: none;
}
.slide h2 {
  font-size: var(--cdc-text-2xl);
  line-height: var(--cdc-leading-tight);
  left: var(--cdc-space-4);
  bottom: var(--cdc-space-4);
}
@media (min-width: 1024px) {
  .slide h2 { font-size: var(--cdc-text-4xl); left: var(--cdc-space-12); bottom: var(--cdc-space-10); }
}

.receita-eventos-tipo a {
  aspect-ratio: 3 / 1;
  padding-top: 0;
  border-radius: var(--cdc-radius-lg);
}
@media (min-width: 1024px) { .receita-eventos-tipo a { border-radius: var(--cdc-radius-xl); } }
.receita-eventos-tipo a img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transform: none;
}
.receita-eventos-tipo a h3 { font-size: var(--cdc-text-xl); left: var(--cdc-space-4); bottom: var(--cdc-space-3); }
@media (min-width: 1024px) { .receita-eventos-tipo a h3 { font-size: var(--cdc-text-3xl); left: var(--cdc-space-6); bottom: var(--cdc-space-4); } }

/* ==========================================================================
   09. ARTIGO E RECEITA
   ========================================================================== */

.content-info figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding-top: 0;
  margin: 0;
  border-radius: var(--cdc-radius-lg);
  overflow: hidden;
}

@media (min-width: 1024px) {
  /* Em desktop a foto quadrada ocupa uma tela inteira e empurra ingredientes e
     inventário para baixo. Proporção mais larga entrega a mesma informação em
     menos altura. */
  .content-info figure { aspect-ratio: 4 / 3; }
}

.content-info figure img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

.content-subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cdc-space-2) var(--cdc-space-4);
  padding-block-end: var(--cdc-space-4);
}

.content-subtitle-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cdc-space-2) var(--cdc-space-5);
}

.content-subtitle-info span,
.content-subtitle-info a {
  display: flex;
  align-items: center;
  gap: var(--cdc-space-1);
  min-height: var(--cdc-tap-min);
  height: auto;
  color: var(--cdc-brand-deep);
  font-size: var(--cdc-text-sm);
}

/* --------------------------------------------------------------------------
   Nutricional + ingredientes.

   Com o slot `receita_conteudo_5` (a coluna sticky ao lado) fora do plano de
   mídia, esse espaço volta para o conteúdo: os dois blocos passam a ocupar a
   largura toda da coluna principal.

   O ganho não é estético. Em desktop a lista de ingredientes de uma receita
   média ocupava uma coluna estreita e longa, obrigando a rolar para ler o que
   cabia numa tela. Em duas colunas ela termina acima da dobra — e o usuário
   chega no modo de preparo sem rolar, que é o passo seguinte que interessa.

   O tema também usa `flex-direction: column-reverse` em telas pequenas, o que
   inverte a ordem visual em relação ao DOM e confunde leitor de tela. Aqui a
   ordem visual e a ordem do documento são a mesma.
   -------------------------------------------------------------------------- */
.content-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cdc-space-6);
}

.content-text-box {
  display: flex;
  flex-direction: column;
  gap: var(--cdc-space-6);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   UMA COLUNA, SEMPRE.

   Nutricional e ingredientes ficam empilhados em qualquer largura, e a lista de
   ingredientes nunca se divide em colunas.

   Não é só preferência visual: quem usa esta parte da página está cozinhando,
   olhando o celular ou o notebook de relance, com a mão ocupada. Em duas
   colunas o olho precisa achar onde a primeira termina e a segunda começa toda
   vez que volta para a tela — e, se a pessoa marca os itens conforme separa, a
   sequência do que falta deixa de ser vertical.

   Uma coluna também mantém a ordem visual igual à ordem do documento, que é o
   que o leitor de tela anuncia.
   -------------------------------------------------------------------------- */
.content-text-box {
  display: flex;
  flex-direction: column;
}

.content-text-shadow ul {
  columns: 1;
}

.content-text-shadow {
  background: var(--cdc-surface);
  border: 1px solid var(--cdc-border);
  border-radius: var(--cdc-radius-sm);
  box-shadow: var(--cdc-elev-1);
  padding: var(--cdc-space-4);
}

/* --------------------------------------------------------------------------
   SELETOR DE PORÇÕES — correções de forma e de contenção.

   Três defeitos visíveis na versão anterior:

   1. Os botões `−` e `+` apareciam ELÍPTICOS. `border-radius: var(--cdc-radius-circle)` sobre uma
      caixa que não é quadrada não desenha círculo, desenha elipse. Como o
      botão estava num flex sem `flex: 0 0 auto`, a largura vinha do conteúdo e
      da distribuição do container, nunca batendo com a altura. A correção é
      fixar a proporção, não só a largura — `aspect-ratio` garante o círculo em
      qualquer contexto futuro, inclusive se alguém trocar o ícone.

   2. A pílula amarela usava `width: calc(100% - 32px)` (herdado do tema) junto
      com padding lateral próprio. Duas formas de descontar a mesma margem, uma
      cancelando a outra — resultado: transbordo à direita do cartão.

   3. `justify-content: space-between` sem `min-width: 0` no rótulo faz o texto
      empurrar o grupo de botões para fora quando a legenda é longa.
   -------------------------------------------------------------------------- */
.content-text-shadow .quantidade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cdc-space-3);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-block: var(--cdc-space-5);
  padding: var(--cdc-space-2) var(--cdc-space-3);
  background: var(--cdc-tint-accent-16);
  border-radius: var(--cdc-radius-pill);
}

.content-text-shadow .quantidade > span {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  font-size: var(--cdc-text-sm);
  line-height: var(--cdc-leading-snug);
}

.content-text-shadow .quantidade-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--cdc-space-1);
  width: auto;
  padding: var(--cdc-space-05);
  background: var(--cdc-tint-on-dark-56);
  border-radius: var(--cdc-radius-pill);
}

.content-text-shadow .quantidade-actions button {
  flex: 0 0 auto;
  inline-size: 32px;
  block-size: 32px;
  aspect-ratio: 1;          /* o que de fato garante o círculo */
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--cdc-radius-circle);
  background: var(--cdc-accent);
}

.content-text-shadow .quantidade-actions button svg { display: block; }

/* --------------------------------------------------------------------------
   O CAMPO DE PORÇÕES.

   Dois defeitos que apareceram ao chegar em 36 porções:

   1. NÚMERO CORTADO. `inline-size: 3ch` parecia folgado — `ch` é a largura do
      "0" — mas `input[type="number"]` reserva espaço para os botões de
      incremento do navegador mesmo quando eles estão ocultos. O texto perdia a
      disputa e o segundo dígito era cortado ao meio.

      A correção é dupla: neutralizar os spinners de verdade
      (`appearance: textfield` + as pseudo-classes do WebKit) e trocar a
      largura fixa por um mínimo que cresce — 3 dígitos cabem, 4 também.

   2. O SALTO. Sem `tabular-nums` cada dígito tem largura própria: ir de 12
      para 36 muda a largura do campo e o grupo inteiro dança a cada toque.

   Vale notar de onde veio: o `style.css` do tema já escondia os spinners. A
   demonstração não carrega esse arquivo, então o defeito só apareceu ali — mas
   depender do CSS legado para um componente que o design system agora controla
   é a inconsistência que este trabalho existe para eliminar.
   -------------------------------------------------------------------------- */
.content-text-shadow .quantidade-actions label {
  flex: 0 0 auto;
  display: block;
  min-inline-size: 3ch;
  padding-inline: var(--cdc-space-1);
}

.content-text-shadow .quantidade-actions input {
  inline-size: 100%;
  min-inline-size: 3ch;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--cdc-text);
  font-family: var(--cdc-font-body);
  font-size: var(--cdc-text-md);
  font-weight: var(--cdc-weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.content-text-shadow .quantidade-actions input::-webkit-outer-spin-button,
.content-text-shadow .quantidade-actions input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   CONTENÇÃO DO CARTÃO.
   Qualquer coisa inserida depois — o medidor de ingredientes, por exemplo —
   fica presa à largura do cartão. `min-width: 0` é o que impede um filho de
   flex/grid de crescer além do pai e produzir a rolagem lateral que aparecia
   à direita do bloco.
   -------------------------------------------------------------------------- */
.content-text-shadow,
.content-text-shadow > * {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.content-text-shadow { overflow-x: clip; }

.content-text-shadow ul li { font-size: var(--cdc-text-md); line-height: var(--cdc-leading-snug); }

/* Acordeão de preparo. */
.content-info .accordeon {
  display: flex;
  flex-direction: column;
  gap: var(--cdc-space-1);
  padding: var(--cdc-space-4);
  padding-right: var(--cdc-space-16, 64px);
  margin-block-start: var(--cdc-space-6);
  background: var(--cdc-gray-50);
  border: 1px solid var(--cdc-border);
  border-radius: var(--cdc-radius-sm) var(--cdc-radius-sm) 0 0;
}
.content-info .accordeon button { right: var(--cdc-space-4); }
.content-info .accordeon-text { padding: var(--cdc-space-5) var(--cdc-space-4); }
.content-info .accordeon-text ol { gap: var(--cdc-space-6); }
.content-info .accordeon-text p,
.content-info .accordeon-text h3 { font-size: var(--cdc-text-lg); line-height: var(--cdc-leading-body); }
.content-info .accordeon-text img { border-radius: var(--cdc-radius-lg); margin-block-start: var(--cdc-space-5); }

/* Vídeo — proporção nativa, sem padding hack. */
.content-info .video .container {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--cdc-radius-sm);
  overflow: hidden;
}
.content-info .video .responsive-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Barra de curtir/compartilhar. */
.content-info .share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cdc-space-2);
  margin-block: var(--cdc-space-6);
  padding: var(--cdc-space-1);
  background: transparent;
  border: 0;
}
@media (min-width: 600px) {
  .content-info .share {
    flex-wrap: nowrap;
    padding: var(--cdc-space-2);
    background: var(--cdc-surface);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-pill);
  }
}
.content-info .share .like { width: auto; flex: 1 1 auto; min-width: 0; font-size: var(--cdc-text-sm); gap: var(--cdc-space-2); }
.content-info .share button,
.content-info .share a { min-height: var(--cdc-tap); padding-inline: var(--cdc-space-4); font-size: var(--cdc-text-sm); }

/* Ações sobre a foto. */
.content .caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cdc-space-3);
  padding-block: var(--cdc-space-3);
}
.content .caption a,
.content .caption button { min-height: var(--cdc-tap); }
.content .caption button {
  margin-top: -32px;
  margin-right: var(--cdc-space-3);
  padding-inline: var(--cdc-space-4);
  font-size: var(--cdc-text-sm);
}

/* ==========================================================================
   10. TABELAS
   ========================================================================== */

/* A tabela de resumo (preparo / rendimento / dificuldade) é o dado mais
   consultado da página. Fica com 12px no celular hoje. */
.content .recipe-info {
  width: 100%;
  margin-block-start: var(--cdc-space-5);
  border-spacing: 0;
}
@media (min-width: 1024px) { .content .recipe-info { width: 80%; margin-inline: auto; } }

.content .recipe-info thead th { font-size: var(--cdc-text-xs); padding-bottom: var(--cdc-space-2); }
.content .recipe-info tbody tr td span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cdc-space-1);
  padding-block: var(--cdc-space-3);
  font-size: var(--cdc-text-md);
}
@media (min-width: 1024px) {
  .content .recipe-info tbody tr td span { padding-block: var(--cdc-space-5); font-size: var(--cdc-text-xl); }
}

/* Qualquer tabela dentro do conteúdo rola em vez de estourar a página. */
.content .resume table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   11. FORMULÁRIOS E CONTA
   ========================================================================== */

.login { padding-block: var(--cdc-space-6) var(--cdc-space-12); }

.login-dual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cdc-space-8);
  align-items: start;
}
@media (min-width: 1024px) { .login-dual { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cdc-space-10); } }

.login-dual > div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cdc-space-5);
  padding: 0;
}
@media (min-width: 1024px) {
  .login-dual > div { padding: var(--cdc-space-8); }
  .login-dual > div:first-child {
    background: var(--cdc-surface);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-sm);
    box-shadow: var(--cdc-elev-1);
  }
}

.login-dual form input,
.login-dual form select,
.minha-conta form input,
.minha-conta form select,
.content-info .comments form input[type="text"],
.content-info .comments form input[type="email"],
.content-info .comments form textarea {
  width: 100%;
  min-height: var(--cdc-tap);
  padding: var(--cdc-space-3) var(--cdc-space-4);
  border: 1px solid var(--cdc-gray-100);
  border-radius: var(--cdc-radius-sm);
  background: var(--cdc-surface);
  color: var(--cdc-text);
  font-family: var(--cdc-font-body);
  font-size: var(--cdc-text-md);
  appearance: none;
}

.login-dual form input[type="submit"],
.login-dual form .form-actions button,
.minha-conta form .form-actions button,
.btn-cta {
  min-height: var(--cdc-tap);
  padding-inline: var(--cdc-space-6);
  border-radius: var(--cdc-radius-pill);
  font-size: var(--cdc-text-md);
  font-weight: var(--cdc-weight-bold);
}

.login .social-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cdc-space-2);
}
@media (min-width: 600px) { .login .social-login { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.login .social-login a { min-height: var(--cdc-tap); }

.minha-conta { padding-block: var(--cdc-space-6); }
.minha-conta .perfil { display: flex; flex-wrap: wrap; gap: var(--cdc-space-5); margin-block: var(--cdc-space-6); }

.sobrenos .authors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--cdc-space-6);
}
.sobrenos .authors-img { aspect-ratio: 1 / 1; padding-top: 0; }
.sobrenos .authors-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; left: 0; }

/* ==========================================================================
   12. COMENTÁRIOS
   ========================================================================== */

.content-info .comments { padding-block-start: var(--cdc-space-6); }

/* `word-break: break-all` quebra palavra no meio de qualquer lugar, inclusive
   em palavra curta — o texto do comentário fica ilegível. `overflow-wrap`
   quebra só quando a palavra realmente não cabe. */
.content-info .comments .comment-content p {
  font-size: var(--cdc-text-md);
  line-height: var(--cdc-leading-body);
  word-break: normal;
  overflow-wrap: anywhere;
}

.content-info .comments .comment-content { padding: var(--cdc-space-4); padding-bottom: var(--cdc-space-8); }
.content-info .comments .children li { padding-left: var(--cdc-space-5); }
.content-info .comments form button { min-height: var(--cdc-tap); padding-inline: var(--cdc-space-5); font-size: var(--cdc-text-sm); }

/* ==========================================================================
   13. PAGINAÇÃO
   ========================================================================== */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cdc-space-2);
  margin-block-start: var(--cdc-space-10);
}

.pagination .page-numbers {
  display: grid;
  place-items: center;
  width: var(--cdc-tap-min);
  height: var(--cdc-tap-min);
  border-radius: var(--cdc-radius-pill);
  background: var(--cdc-brand-dark);
  color: var(--cdc-gray-0);
  font-weight: var(--cdc-weight-bold);
}
.pagination .page-numbers.current { background: var(--cdc-gray-200); color: var(--cdc-text); font-weight: var(--cdc-weight-regular); }
.pagination .page-numbers.prev,
.pagination .page-numbers.next { background: var(--cdc-surface); border: 1px solid var(--cdc-border); }

/* ==========================================================================
   14. BARRA LATERAL
   ========================================================================== */

/* A lateral existe a partir de 1024px. Abaixo disso o inventário dela é
   servido pelos slots `.only-mobile` — por isso o ponto de quebra aqui e o de
   `.only-desktop` PRECISAM ser o mesmo número. */
.content-sidebar { display: none; }

@media (min-width: 1024px) {
  .content-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--cdc-space-8);
    height: 100%;
    padding: var(--cdc-space-6) var(--cdc-space-5);
    background: var(--cdc-surface);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-lg);
  }
}

.content-sidebar-fixed { position: sticky; top: var(--cdc-space-6); left: 0; }
/* Com o bloco em coluna única, `.content-text-sidebar` deixa de ser uma coluna
   lateral e passa a ser uma faixa logo abaixo dos ingredientes. O elemento
   continua no fluxo e visível — é ponto de injeção da Adzep (receita_conteudo_5)
   e o contrato não permite escondê-lo. Só o `sticky` sai, que não faz sentido
   fora de uma coluna. */
.content-text-sidebar {
  display: block;
  width: 100%;
}

.content-text-sidebar > div {
  position: static;
  width: 100%;
}

/* ==========================================================================
   IMPRESSÃO
   ========================================================================== */

@media print {
  .ads, .ads-top, .top-banner, .r7-anuncio,
  .content-sidebar, .content-text-sidebar,
  header, #footer, .comments, .share, .pagination,
  .seetoo, .receitas-maisvistas, .slide { display: none !important; }

  .content-wrapper { grid-template-columns: 1fr !important; padding: 0 !important; }
  .content-info .accordeon-text.inactive { display: block !important; }
  body { background: var(--cdc-gray-0, #fff); }
}

/* ==========================================================================
   15. POLIMENTO — os detalhes que separam "funciona" de "acabado"
   --------------------------------------------------------------------------
   Cada item aqui corrige um defeito que só aparece em uso real: com o texto
   de verdade, no aparelho de verdade, com o dedo de verdade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Âncora sob o cabeçalho fixo.
   Clicar em "128 comentários" leva o alvo para o topo da janela — que é
   exatamente onde o header sticky está. O título da seção fica escondido
   atrás dele e o usuário acha que o link não funcionou.
   -------------------------------------------------------------------------- */
:target,
[id] {
  scroll-margin-top: calc(var(--cdc-header-h) + var(--cdc-space-4));
}

@media (max-width: 1023.98px) {
  [id] { scroll-margin-top: calc(var(--cdc-header-h) + var(--cdc-safe-t) + var(--cdc-space-4)); }
}

/* Destaque discreto ao chegar por âncora: confirma que o salto aconteceu. */
:target {
  animation: cdc-target-hint 1.6s var(--cdc-ease) 1;
}

@keyframes cdc-target-hint {
  from { background-color: var(--cdc-tint-accent-24); }
  to   { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  :target { animation: none; }
}

/* --------------------------------------------------------------------------
   Órfãs e viúvas no texto corrido.
   `pretty` impede que a última linha de um parágrafo fique com uma palavra
   sozinha. Custa nada onde não há suporte.
   -------------------------------------------------------------------------- */
.content .resume p,
.content-info .accordeon-text p,
.content-info .comments .comment-content p,
.sobrenos p,
.cdc-card-title,
.cdc-sheet-title {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Palavra longa em tela estreita.
   "Bolo de cenoura com cobertura de brigadeiro" cabe; "Strogonoff" em 320px
   dentro de um card de 140px não. Hifenização em pt-BR resolve sem quebrar
   no meio de palavra curta, que é o que `word-break: break-all` fazia.
   -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  .content h1,
  .cdc-card-title,
  .receita-small-info .title,
  .receita-medium-info .title,
  .receita-big-info .title {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* --------------------------------------------------------------------------
   Números que mudam no lugar.
   Sem `tabular-nums`, trocar 12 por 6 porções muda a largura do campo e o
   grupo de botões dança para os lados a cada toque. O mesmo vale para a
   tabela de tempo/rendimento e para o contador de ingredientes.
   -------------------------------------------------------------------------- */
.content-text-shadow .quantidade-actions input,
.content .recipe-info td span,
.cdc-ing-count,
.cdc-stat-value,
.pagination .page-numbers {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   Imagem antes de carregar.
   Sem cor de fundo, o espaço reservado é branco sobre branco e a página
   parece quebrada em conexão lenta — que é a condição normal em 4G.
   -------------------------------------------------------------------------- */
.content-info figure,
.cdc-card-media,
.receita-big-image a,
.receita-small-image a,
.receita-medium-image a,
.seetoo-slide-img,
.receitas-maisvistas-slide-img,
.receitas-tipo .tipo-img {
  background-color: var(--cdc-gray-50);
}

/* --------------------------------------------------------------------------
   Respiro do cabeçalho do artigo.
   O título encostando na borda do bloco é o tipo de detalhe que ninguém
   aponta e todo mundo sente.
   -------------------------------------------------------------------------- */
.entry-header {
  padding-block: var(--cdc-space-2) var(--cdc-space-4);
}

/* --------------------------------------------------------------------------
   Rótulo de publicidade colado no criativo.
   O rótulo existe para separar conteúdo de anúncio; sem folga entre os dois,
   ele parece legenda do criativo em vez de aviso.
   -------------------------------------------------------------------------- */
.ads::before,
.ads-top::before,
.top-banner::before {
  margin-bottom: var(--cdc-space-2);
}

/* --------------------------------------------------------------------------
   Seleção de texto na cor da marca — detalhe barato, muda a percepção de
   acabamento em toda a leitura.
   -------------------------------------------------------------------------- */
::selection {
  background: var(--cdc-tint-accent-32);
  color: var(--cdc-text-strong);
}

/* --------------------------------------------------------------------------
   Rolagem lateral involuntária: cinto de segurança final.
   Nenhum elemento do conteúdo pode exceder a largura do container.
   -------------------------------------------------------------------------- */
.content-info img,
.content-info iframe,
.content-info video,
.content-info table,
.content-info pre {
  max-width: 100%;
}

.content-info { overflow-wrap: break-word; }