/* ============================================================
   COZINHA MINUTO - CSS UNIFICADO E OTIMIZADO
   - Desktop: imagens de posts/overview 1:1
   - Mobile (≤768px): posts/overview 3:2
   - Related Recipes (MOBILE): título completo + espaçamentos
   - Widgets "Receitas" e "Últimas Delícias" (MOBILE): thumbs padronizadas
   - Não altera logo, WhatsApp, Elementor genérico
============================================================ */

/* =================================
   TOKENS GLOBAIS E TIPOGRAFIA
================================= */

/* Roboto centralizado em um único import */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;800;900&display=swap");

:root{
  --cm-brand: #e63946;
  --cm-muted: #6b7280;
}

/* ================================
   BLOQUEIO GLOBAL DE OVERFLOW
=============================== */
html, body{
  overflow-x: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================
   IMAGENS DE POSTS / LISTAGENS E OVERVIEW (fora de widgets)
========================================================== */
:is(.wp-post-image, .post-thumbnail img, .entry-thumbnail img, .posts .thumbnail img, .gt-overview-box img){
  width: 100% !important;
  max-width: 750px;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

/* =========================================
   MOBILE (≤768px) - posts/overview em 3:2
========================================= */
@media (max-width: 768px){
  :is(.wp-post-image, .post-thumbnail img, .entry-thumbnail img, .posts .thumbnail img, .gt-overview-box img){
    aspect-ratio: 3 / 2;
  }

  .single-recipe h1{ font-size: 26px !important; }
  .single-recipe .gt-content-body{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* =========================================
   LISTAS CUSTOMIZADAS (bullets)
========================================= */
.gt-lists.gt-style-4 li{
  display: flex; align-items: flex-start; gap: 6px;
  line-height: 1.6; position: relative; padding-left: 18px;
}
.gt-lists.gt-style-4 li::before{
  content: ""; position: absolute; left: 0; top: 0.6em; transform: translateY(-50%);
  width: 8px; height: 8px; background: var(--cm-brand); border-radius: 50%;
}

/* ============================================================
   AREA DE RECEITA - AJUSTES GERAIS (SEM MEXER EM DIRECTIONS)
============================================================ */

/* Oculta ações do autor */
.single-recipe .gt-author-actions{
  display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important;
}

/* Ingredientes ocultos por padrão, com opção de reexibir */
.single-recipe .gt-ingredients{ display: none !important; }
.single-recipe.cm-show-ingredients .gt-ingredients{ display: block !important; }

/* Botões de print e social */
.single-recipe .gt-social-share{
  display: flex !important; flex-wrap: wrap; gap: 15px;
  justify-content: center; align-items: center;
  margin-top: 15px; margin-bottom: 20px;
}
.single-recipe .gt-social-share a,
.single-recipe .gt-social-share .print-button-custom{
  display: flex; justify-content: center; align-items: center;
  width: 48px; height: 48px; background-color: #555; color: #fff;
  border-radius: 50%; transition: background-color .3s;
}
.single-recipe .gt-social-share a:hover,
.single-recipe .gt-social-share .print-button-custom:hover{ background-color: var(--cm-brand); }
.single-recipe .gt-social-share .print-button-custom svg{
  width: 22px; height: 22px; stroke-width: 2.2; vector-effect: non-scaling-stroke;
}

/* Ajustes visuais finos da receita (fora de directions) */
.single-recipe .gt-overview-box .gt-details{ font-size: 18px; }
.single-recipe .gt-nutritions{ font-size: 15px !important; }

/* Parágrafos gerais do bloco de conteúdo da receita (fora de directions) */
.single-recipe .gt-item.gt-item-content p{
  margin: 8px 0 !important;
}

/* Paddings da área de conteúdo da receita (geral) */
.single-recipe .gt-content-body{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

@media (max-width: 768px){
  .single-recipe .gt-content-body{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ============================================================
   INTRO AJUSTES MANUAIS - SOMENTE INTRODUCAO DO POST
   - Use as variáveis abaixo para alterar tipografia da introdução
   - Não afeta o Modo de Preparo (directions)
============================================================ */
:root{
  --cm-intro-font-family: "Roboto", system-ui, -apple-system, "Segoe UI",
                          "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
  --cm-intro-font-size: 14px;
  --cm-intro-line-height: 1.6;
  --cm-intro-margin-top: 16px;
}

/* Aplicacao somente na introducao */
.single-recipe .gt-description{
  font-family: var(--cm-intro-font-family) !important;
  font-size: var(--cm-intro-font-size) !important;
  line-height: var(--cm-intro-line-height) !important;
  margin-top: var(--cm-intro-margin-top) !important;
}

/* Heranca limpa somente dentro da introducao */
.single-recipe .gt-description *{
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* ============================================================
   DIRECTIONS - SOMENTE CONTROLES DE NUMERACAO
   - Removido qualquer tamanho de texto, fonte, padding e margens
   - Mantida a opcao de ocultar/exibir numeracao
============================================================ */

/* Oculta numeros gerados pelo tema/shortcode, se existirem */
.single-recipe .gt-item-directions .gt-number,
.single-recipe .gt-item-directions .gt-title .gt-number,
.single-recipe .gt-item-directions .gt-title span.gt-number{
  display: none !important;
}

/* Remove marcadores padrao da lista de passos sem mexer em padding */
.single-recipe .gt-item-directions .gt-desc ol{
  list-style: none !important;
  counter-reset: none !important;
}
.single-recipe .gt-item-directions .gt-desc ol > li::marker{ content: "" !important; }

/* Opcional: reativar numeracao adicionando .cm-show-steps no body da receita
   Observacao: sem definir padding, usa o recuo padrao do navegador/tema */
.single-recipe.cm-show-steps .gt-item-directions .gt-desc ol{
  list-style: decimal !important;
}

/* ============================================================
   MOBILE (≤768px) - RELATED RECIPES (cards)
============================================================ */
@media (max-width: 768px){
  :root{
    --cm-related-title-size: 22px;
    --cm-gap-thumb-chip: 16px;
    --cm-gap-chip-title: 6px;
    --cm-gap-title-details: 6px;
  }

  .gt-item-related-recipes .gt-image{
    aspect-ratio: 1 / 1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  .gt-item-related-recipes .gt-image img{
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center !important;
    border-radius: 8px !important; display: block !important;
  }

  .gt-item-related-recipes .gt-item.gt-style-1 .gt-content,
  .gt-item-related-recipes .gt-item.gt-style-2 .gt-content{
    margin-top: var(--cm-gap-thumb-chip) !important;
    display: flex; flex-direction: column; gap: 0;
  }

  .gt-item-related-recipes .gt-categories{
    margin: 0 0 var(--cm-gap-chip-title) 0 !important;
  }
  .gt-item-related-recipes .gt-categories a{
    background: #fff1f2; color: var(--cm-brand) !important;
    border-radius: 999px; font-weight: 700; font-size: 12px;
    line-height: 1; padding: 6px 10px; display: inline-block;
    text-decoration: none !important;
  }

  .gt-item-related-recipes .gt-title a{
    font-size: var(--cm-related-title-size) !important;
    font-weight: 800; line-height: 1.2;
    display: block !important;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important;
    text-decoration: none !important;
    margin: 0 0 var(--cm-gap-title-details) 0 !important;
  }

  .gt-item-related-recipes .gt-details{ margin: 0 !important; }
  .gt-item-related-recipes .gt-details > ul{
    list-style: none !important; margin: 0 !important; padding: 0 !important;
    display: flex; gap: 14px; flex-wrap: wrap;
  }
  .gt-item-related-recipes .gt-details > ul > li{
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--cm-muted); font-size: 14px;
  }
  .gt-item-related-recipes .gt-details > ul > li .gt-icon{ line-height: 0; }
  .gt-item-related-recipes .gt-details > ul > li ul{ margin: 0; padding: 0; list-style: none; }
  .gt-item-related-recipes .gt-details > ul > li a{ color: var(--cm-muted) !important; text-decoration: none; }
}

/* ============================================================
   MOBILE (≤768px) - WIDGET: RECEITAS (1:1) COMPACTO
============================================================ */
@media (max-width: 768px){
  :root{
    --cm-recipes-thumb-m: 108px;
    --cm-recipes-radius-m: 6px;

    --cm-recipes-align-items: center;
    --cm-recipes-li-gap: 12px;
    --cm-recipes-li-padding-y: 6px;

    --cm-gap-cat-to-title: 2px;
    --cm-gap-title-to-details: 2px;

    --cm-recipes-chip-gap: 6px;
    --cm-recipes-title-lh: 1.18;
  }

  .widget_platea_recipes_widget .gt-blog-widget > ul{ margin: 0 !important; padding: 0 !important; }

  .widget_platea_recipes_widget .gt-blog-widget li{
    display: grid !important;
    grid-template-columns: var(--cm-recipes-thumb-m) 1fr !important;
    gap: var(--cm-recipes-li-gap) !important;
    align-items: var(--cm-recipes-align-items) !important;
    padding: var(--cm-recipes-li-padding-y) 0 !important;
  }

  .widget_platea_recipes_widget .gt-blog-widget .gt-image{
    inline-size: var(--cm-recipes-thumb-m) !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important; border-radius: var(--cm-recipes-radius-m) !important;
  }
  .widget_platea_recipes_widget .gt-blog-widget .gt-image a,
  .widget_platea_recipes_widget .gt-blog-widget .gt-image img{
    width: 100% !important; height: 100% !important; display: block !important;
    object-fit: cover !important; object-position: center !important;
    border-radius: var(--cm-recipes-radius-m) !important;
  }
  .widget_platea_recipes_widget .gt-blog-widget .gt-image img.wp-post-image{
    aspect-ratio: 1 / 1 !important; max-width: 100% !important;
  }

  .widget_platea_recipes_widget .gt-blog-widget .gt-desc{
    display: flex !important; flex-direction: column !important; text-align: left !important;
  }

  .widget_platea_recipes_widget .gt-blog-widget .gt-categories{
    margin: 0 0 var(--cm-gap-cat-to-title) 0 !important;
  }

  .widget_platea_recipes_widget .gt-blog-widget .gt-title{
    margin: 0 0 var(--cm-gap-title-to-details) 0 !important;
  }
  .widget_platea_recipes_widget .gt-blog-widget .gt-title h3,
  .widget_platea_recipes_widget .gt-blog-widget .gt-title a{
    margin: 0 !important; line-height: var(--cm-recipes-title-lh) !important;
    font-weight: 800; text-decoration: none !important; display: block;
  }

  .widget_platea_recipes_widget .gt-blog-widget .gt-details{ margin: 0 !important; }
  .widget_platea_recipes_widget .gt-blog-widget .gt-details > ul{
    list-style: none !important; margin: 0 !important; padding: 0 !important;
    display: flex !important; flex-wrap: wrap; gap: var(--cm-recipes-chip-gap) !important;
    justify-content: flex-start !important;
  }
  .widget_platea_recipes_widget .gt-blog-widget .gt-details > ul > li{
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    color: var(--cm-muted); font-size: 14px;
  }
  .widget_platea_recipes_widget .gt-blog-widget .gt-details > ul > li .gt-icon{ line-height: 0; }

  /* Modificadores rapidos */
  .widget_platea_recipes_widget.cm-tight{
    --cm-recipes-li-gap: 10px;
    --cm-recipes-li-padding-y: 4px;
    --cm-gap-cat-to-title: 1px;
    --cm-gap-title-to-details: 1px;
    --cm-recipes-chip-gap: 4px;
    --cm-recipes-title-lh: 1.16;
  }
  .widget_platea_recipes_widget.cm-align-start { --cm-recipes-align-items: start; }
  .widget_platea_recipes_widget.cm-align-end   { --cm-recipes-align-items: end; }
}

/* ============================================================
   MOBILE (≤768px) - WIDGET: ULTIMAS DELICIAS (3:2)
============================================================ */
@media (max-width: 768px){
  :root{
    --cm-delicias-thumb-m: 120px;
    --cm-delicias-radius-m: 6px;
    --cm-delicias-title-size: 18px;
  }

  .widget_platea_blog_widget .gt-blog-widget li{
    display: grid !important;
    grid-template-columns: var(--cm-delicias-thumb-m) 1fr !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 12px 0 !important;
  }

  /* Esconde categorias no widget */
  .widget_platea_blog_widget .gt-blog-widget .gt-categories,
  .widget_platea_blog_widget .gt-blog-widget .gt-categories *,
  .widget_platea_blog_widget .gt-blog-widget .post-categories{
    display: none !important;
  }

  .widget_platea_blog_widget .gt-blog-widget .gt-image{
    inline-size: var(--cm-delicias-thumb-m) !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
    border-radius: var(--cm-delicias-radius-m) !important;
  }
  .widget_platea_blog_widget .gt-blog-widget .gt-image a,
  .widget_platea_blog_widget .gt-blog-widget .gt-image img{
    width: 100% !important; height: 100% !important;
    display: block !important;
    object-fit: cover !important; object-position: center !important;
    border-radius: var(--cm-delicias-radius-m) !important;
  }
  .widget_platea_blog_widget .gt-blog-widget .gt-image img.wp-post-image{
    aspect-ratio: 3 / 2 !important;
    border-radius: var(--cm-delicias-radius-m) !important;
    max-width: 100% !important;
  }

  .widget_platea_blog_widget .gt-blog-widget .gt-desc{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .widget_platea_blog_widget .gt-blog-widget .gt-title,
  .widget_platea_blog_widget .gt-blog-widget .gt-title h3{ margin: 0 !important; }
  .widget_platea_blog_widget .gt-blog-widget .gt-title a{
    font-size: var(--cm-delicias-title-size) !important;
    font-weight: 800; line-height: 1.3;
    text-decoration: none !important; display: block;
  }
}

/* ============================================================
   PLATEA RECIPE SEARCH - placeholders traduzidos (Selectize)
============================================================ */

/* Escopo de widget */
.elementor-widget-platea-recipe-search-widget .gt-search-form{}

/* Esconde placeholders nativos em ingles */
.elementor-widget-platea-recipe-search-widget
  .selectize-control.single .selectize-input input::placeholder{
  color: transparent !important;
}

/* Base para pseudo placeholder */
.elementor-widget-platea-recipe-search-widget
  .selectize-control.single .selectize-input{ position: relative; }

/* Categorias -> "Categorias" */
.elementor-widget-platea-recipe-search-widget
  select[name="recipe-category"] + .selectize-control
  .selectize-input.items.not-full::before{
  content: "Categorias";
  position: absolute; inset-inline-start: 10px; top: 50%;
  transform: translateY(-50%);
  color: #6b7280; font-weight: 600; font-size: 14px; pointer-events: none;
}

/* Dificuldade -> "Dificuldade" */
.elementor-widget-platea-recipe-search-widget
  select[name="recipe-difficulty"] + .selectize-control
  .selectize-input.items.not-full::before{
  content: "Dificuldade";
  position: absolute; inset-inline-start: 10px; top: 50%;
  transform: translateY(-50%);
  color: #6b7280; font-weight: 600; font-size: 14px; pointer-events: none;
}

/* Tempo de Preparo -> "Tempo de Preparo" */
.elementor-widget-platea-recipe-search-widget
  select[name="recipe-cooking-time"] + .selectize-control
  .selectize-input.items.not-full::before{
  content: "Tempo de Preparo";
  position: absolute; inset-inline-start: 10px; top: 50%;
  transform: translateY(-50%);
  color: #6b7280; font-weight: 600; font-size: 14px; pointer-events: none;
}

/* Estados de hover/focus do pseudo placeholder */
.elementor-widget-platea-recipe-search-widget
  .selectize-control.single .selectize-input:hover::before{ color: #4b5563; }
.elementor-widget-platea-recipe-search-widget
  .selectize-control.single .selectize-input.focus::before,
.elementor-widget-platea-recipe-search-widget
  .selectize-control.single .selectize-input.input-active::before{ color: #374151; }

/* Garantia: com item selecionado o ::before some */
.elementor-widget-platea-recipe-search-widget
  .selectize-control.single .selectize-input.has-items::before{ content: "" !important; }

/* ============================================================
   PREFERENCIAS DE MOVIMENTO (ACESSIBILIDADE)
============================================================ */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
/* ========================================================= CM — RECEITAS: ESPAÇAMENTO CONSISTENTE + BULLETS Escopo: .single-recipe ========================================================= */
/* ---------- CONTROLES ---------- */
.single-recipe{
  /* Modo de Preparo */
  --cm-step-title-size: 28px;
  --cm-step-desc-size: 18px;
  --cm-step-gap: 24px; /* espaço ENTRE passos */
  --cm-step-inner-py: 20px; /* padding interno de cada passo (pedido) */
  --cm-step-title-text-gap: 10px; /* distância Título → Texto */
  --cm-step-paragraph-gap: 8px; /* entre parágrafos da descrição */

  /* Ingredientes */
  --cm-ingredients-title-size: 26px;
  --cm-ingredients-text-size: 20px;
  --cm-ingredients-title-gap: 30px; /* Título → Lista */
  --cm-ingredients-gap: 8px; /* entre itens da lista */
  --cm-ingredients-paragraph-gap: 4px;

  /* Bullets dos ingredientes */
  --cm-ingredients-bullet-size: 8px;
  --cm-ingredients-bullet-color: var(--cm-brand, #e63946);
  --cm-ingredients-bullet-indent: 18px;
}

/* ========================================================= MODO DE PREPARO (Directions) ========================================================= */
/* Zera variações e linhas do tema */
.single-recipe .gt-item.gt-item-directions .gt-lists.gt-style-3 > ul,
.single-recipe .gt-item.gt-item-directions .gt-lists.gt-style-3 > ul > li,
.single-recipe .gt-item.gt-item-directions .gt-lists.gt-style-3 > ul > li .gt-item,
.single-recipe .gt-item.gt-item-directions .gt-title-wrapper,
.single-recipe .gt-item.gt-item-directions .gt-title-wrapper .gt-title,
.single-recipe .gt-item.gt-item-directions .gt-desc,
.single-recipe .gt-item.gt-item-directions .gt-desc p{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
.single-recipe .gt-item.gt-item-directions .gt-lists.gt-style-3 > ul > li::before,
.single-recipe .gt-item.gt-item-directions .gt-lists.gt-style-3 > ul > li::after,
.single-recipe .gt-item.gt-item-directions .gt-lists.gt-style-3 > ul > li .gt-item::before,
.single-recipe .gt-item.gt-item-directions .gt-lists.gt-style-3 > ul > li .gt-item::after{
  content: none !important;
  display: none !important;
}

/* Ritmo entre passos: row-gap (não colapsa) */
.single-recipe .gt-item.gt-item-directions .gt-lists.gt-style-3 > ul{
  display: flex !important;
  flex-direction: column !important;
  row-gap: var(--cm-step-gap) !important;
}

/* Padding interno fixo de cada passo */
.single-recipe .gt-item.gt-item-directions .gt-lists.gt-style-3 > ul > li .gt-item{
  padding: var(--cm-step-inner-py) 0 !important;
}

/* Título do passo + gap para o texto */
.single-recipe .gt-item.gt-item-directions .gt-title-wrapper .gt-title{
  font-size: var(--cm-step-title-size) !important;
}
.single-recipe .gt-item.gt-item-directions .gt-desc{
  margin-top: var(--cm-step-title-text-gap) !important;
}

/* Texto/descrição + parágrafos */
.single-recipe .gt-item.gt-item-directions .gt-desc p{
  font-size: var(--cm-step-desc-size) !important;
}
.single-recipe .gt-item.gt-item-directions .gt-desc p + p{
  margin-top: var(--cm-step-paragraph-gap) !important;
}
.single-recipe .gt-item.gt-item-directions .gt-desc *{
  font-size: inherit !important;
}

/* ========================================================= INGREDIENTES (restaura bullets e padroniza espaçamento) ========================================================= */
/* Zera variações e define gaps com row-gap */
.single-recipe .gt-item.gt-item-ingredients .gt-recipe-ingredients,
.single-recipe .gt-item.gt-item-ingredients .gt-lists.gt-style-4,
.single-recipe .gt-item.gt-item-ingredients .gt-lists.gt-style-4 > ul,
.single-recipe .gt-item.gt-item-ingredients .gt-lists.gt-style-4 > ul > li,
.single-recipe .gt-item.gt-item-ingredients .gt-lists.gt-style-4 > ul > li .gt-desc{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.single-recipe .gt-item.gt-item-ingredients .gt-lists.gt-style-4 > ul{
  display: flex !important;
  flex-direction: column !important;
  row-gap: var(--cm-ingredients-gap) !important;
}

/* Restaura e controla as bolinhas */
.single-recipe .gt-item.gt-item-ingredients .gt-lists.gt-style-4 > ul > li{
  position: relative !important;
  padding-left: var(--cm-ingredients-bullet-indent) !important;
}
.single-recipe .gt-item.gt-item-ingredients .gt-lists.gt-style-4 > ul > li::before{
  content: "" !important; /* reativa o bullet */
  position: absolute !important;
  left: 0; top: 0.6em; transform: translateY(-50%);
  width: var(--cm-ingredients-bullet-size);
  height: var(--cm-ingredients-bullet-size);
  background: var(--cm-ingredients-bullet-color);
  border-radius: 50%;
}

/* Título do bloco (mantém sua cápsula), texto e parágrafos */
.single-recipe .gt-item.gt-item-ingredients > .gt-title{
  font-size: var(--cm-ingredients-title-size) !important;
  margin-bottom: var(--cm-ingredients-title-gap) !important;
}
.single-recipe .gt-item.gt-item-ingredients .gt-lists.gt-style-4 > ul > li .gt-desc{
  font-size: var(--cm-ingredients-text-size) !important;
}
.single-recipe .gt-item.gt-item-ingredients .gt-lists.gt-style-4 > ul > li .gt-desc p{
  font-size: inherit !important;
}
.single-recipe .gt-item.gt-item-ingredients .gt-lists.gt-style-4 > ul > li .gt-desc p + p{
  margin-top: var(--cm-ingredients-paragraph-gap) !important;
}

/* ========================================================= INTRODUÇÃO (mantida, caso use) ========================================================= */
.single-recipe{
  --cm-intro-text-size: 18px;
}
.single-recipe .gt-item.gt-item-content > p{
  font-size: var(--cm-intro-text-size) !important;
}


/* =========================================================
   CM - CAPSULAS DE DESTAQUE PARA TITULOS (INGREDIENTES + PREPARO)
   - Vermelho fixo, bordas arredondadas, padding 12px e texto branco
   - Não afeta "Macros" nem conteúdo interno de listas/tabelas
========================================================= */
:root{
  --cm-title-chip-bg: #e92d28;  /* vermelho */
  --cm-title-chip-fg: #FFFFFF;  /* branco */
  --cm-title-chip-radius: 8px;  /* arredondado */
  --cm-title-chip-padding: 6px 12px; /* 8px top/bottom, 12px lados */
}

/* DIRECTIONS: titulo geral */
.single-recipe .gt-item.gt-item-directions > .gt-title,
/* INGREDIENTES: titulo do bloco */
.single-recipe .gt-item.gt-item-ingredients > .gt-title{
  display: inline-block !important;             /* vira “capsula” no tamanho do texto */
  padding: var(--cm-title-chip-padding) !important;
  background: var(--cm-title-chip-bg) !important;
  color: var(--cm-title-chip-fg) !important;
  border-radius: var(--cm-title-chip-radius) !important;
  /* Opcional: ative para deixar MAIUSCULO como no exemplo */
  /* text-transform: uppercase !important; */
}

/* Garante que qualquer span dentro do título herde a cor branca */
.single-recipe .gt-item.gt-item-directions > .gt-title *,
.single-recipe .gt-item.gt-item-ingredients > .gt-title *{
  color: inherit !important;
}

/* CM — esconder a versão desktop desse logo (≥1025px) */
@media (min-width: 1025px){
  img.wp-image-4024{
    display: none !important;
  }
}

/* ===============================
   iOS MOBILE PATCH — Elementor Sticky Header
   Mantém o header ativo durante pull-to-refresh no iPhone
   (escopo: header do Elementor)
=============================== */

/* iOS Safari only */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px){
    /* Ajuste geral do container sticky ativo */
    .elementor-location-header .elementor-sticky.elementor-sticky--active{
      opacity: 1 !important;
      visibility: visible !important;

      /* Evita efeitos de esconder/transladar */
      transform: none !important;
      -webkit-transform: none !important;

      /* Força posição e camada estáveis */
      position: fixed !important;
      top: max(env(safe-area-inset-top), 0px) !important;
      left: 0 !important; right: 0 !important;
      width: 100% !important;
      z-index: 9999 !important;

      /* Ajuda de composição no iOS */
      will-change: transform;
      backface-visibility: hidden;
    }

    /* Garante que o SPACER não colapse (o Elementor usa ele para evitar "jump") */
    .elementor-location-header .elementor-sticky__spacer{
      visibility: visible !important;         /* o Elementor às vezes deixa hidden */
      height: var(--cm-sticky-h, 60px) !important;  /* ajuste se seu header for mais alto */
      min-height: var(--cm-sticky-h, 60px) !important;
    }

    /* Em alguns setups o Elementor aplica efeitos no sticky container */
    .elementor-location-header .elementor-sticky--effects{
      opacity: 1 !important;
      transform: none !important;
      -webkit-transform: none !important;
    }

    /* Evita “jitter” de largura medido pelo script em mudanças de viewport no iOS */
    .elementor-location-header .elementor-sticky.elementor-sticky--active[style*="width"]{
      width: 100% !important;
    }
  }
}

/* =========================================================
   RECEITAS RELACIONADAS (DESKTOP)
   - Imagens em 3:2 com corte elegante
   - Gap maior entre imagem e conteúdo (tags/título)
========================================================= */
@media (min-width: 1025px){

  /* controles */
  .single-recipe{
    --cm-related-aspect: 3 / 2;  /* razão L:H -> 3:2 */
    --cm-related-radius: 14px;
    --cm-related-gap: 16px;      /* espaço imagem → conteúdo (tags/título) */
  }

  /* caixa da imagem com aspecto fixo 3:2 */
  .single-recipe .gt-content-footer .gt-item-related-recipes
  .gt-recipe-listing .gt-item .gt-image{
    width: 100% !important;
    aspect-ratio: var(--cm-related-aspect) !important;
    height: auto !important;          /* altura passa a ser calculada pelo aspect-ratio */
    max-height: none !important;
    border-radius: var(--cm-related-radius) !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* link + img ocupam 100% da caixa e cortam o excedente */
  .single-recipe .gt-content-footer .gt-item-related-recipes
  .gt-recipe-listing .gt-item .gt-image a,
  .single-recipe .gt-content-footer .gt-item-related-recipes
  .gt-recipe-listing .gt-item .gt-image img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    max-width: none !important; /* ignora dimensões intrínsecas 630x785 etc. */
  }

  /* aumenta o respiro entre a imagem e as tags/título */
  .single-recipe .gt-content-footer .gt-item-related-recipes
  .gt-recipe-listing .gt-item .gt-content{
    margin-top: var(--cm-related-gap) !important;
  }
}
/* =========================================================
   SIDEBAR (DESKTOP) — THUMBS IGUAIS EM TODOS OS WIDGETS
   - Aplica a .widget_platea_recipes_widget e .widget_platea_blog_widget
   - Usa o tamanho do "Últimas Novidades" (110×110)
========================================================= */
@media (min-width: 1025px){

  /* controles */
  .gt-sidebar{
    --cm-sb-thumb: 110px;   /* tamanho quadrado da thumb */
    --cm-sb-radius: 12px;   /* cantos arredondados       */
    --cm-sb-col-gap: 14px;  /* espaço thumb → texto      */
    --cm-sb-row-gap: 16px;  /* espaço entre itens        */
  }

  /* lista alinhada (vale para receitas e para últimas novidades) */
  .gt-sidebar .gt-blog-widget > ul{
    display: flex !important;
    flex-direction: column !important;
    row-gap: var(--cm-sb-row-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .gt-sidebar .gt-blog-widget > ul > li{
    display: grid !important;
    grid-template-columns: var(--cm-sb-thumb) 1fr !important;
    align-items: center !important;
    column-gap: var(--cm-sb-col-gap) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* caixa da imagem (tamanho fixo) */
  .gt-sidebar .gt-blog-widget .gt-image{
    width: var(--cm-sb-thumb) !important;
    height: var(--cm-sb-thumb) !important;
    flex: 0 0 var(--cm-sb-thumb) !important;
    border-radius: var(--cm-sb-radius) !important;
    overflow: hidden !important;
    margin: 0 !important;
    float: none !important;
  }

  /* link + img preenchem e cortam excedente */
  .gt-sidebar .gt-blog-widget .gt-image a,
  .gt-sidebar .gt-blog-widget .gt-image img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    max-width: none !important; /* ignora 72x90, 150x150, etc. */
  }

  /* compat: garante que o widget de posts também siga a grade acima */
  .gt-sidebar .widget_platea_blog_widget .gt-blog-widget > ul{ row-gap: var(--cm-sb-row-gap) !important; }
  .gt-sidebar .widget_platea_blog_widget .gt-blog-widget > ul > li{
    display: grid !important;
    grid-template-columns: var(--cm-sb-thumb) 1fr !important;
    column-gap: var(--cm-sb-col-gap) !important;
  }
}


