/* =================================================================
   LADRILAR — Correções de layout (mobile-first fixes)
   -----------------------------------------------------------------
   REGRAS DESTE ARQUIVO (para não virar "lasanha"):
   1. Carregado por ÚLTIMO (ver functions.php) → vence ordem de cascata.
   2. Fixes mobile vão DENTRO de @media (max-width) → desktop intocado.
   3. Fixes específicos de uma página usam a body class do WP
      (.home, .page-id-XXXX, .page-id-3239 ...) → não vazam p/ outra página.
   4. Fixes globais (ex.: botões flutuantes) ficam na seção GLOBAL e são
      conscientemente aplicados a todos os viewports.
   5. Evitar !important salvo quando preciso vencer CSS inline do builder.
   Breakpoints: mobile <=767px | tablet 768-1024px | desktop >1024px
   ================================================================= */

/* =================================================================
   GLOBAL — Override movido do tema PAI (mendel/css/__colors.css)
   Cor do elemento <code> (#333 -> #043045). Mantido aqui no child p/
   não editar o tema pai (que é sobrescrito em updates).
   ================================================================= */
code {
  color: #043045;
}

/* =================================================================
   GLOBAL — Botões flutuantes (WhatsApp + Voltar ao topo)
   Problema: ambos position:fixed no canto inferior direito → sobrepõem
   (acontece também no desktop). Solução: empilhar em coluna —
   WhatsApp embaixo, "voltar ao topo" logo acima, alinhados à direita.
   ================================================================= */
.ldl-whatsapp-float {
  right: 22px;
  bottom: 22px;
}
.trx_addons_scroll_to_top {
  right: 26px !important; /* alinha com o centro do WhatsApp (58px) */
  bottom: 92px !important; /* acima do WhatsApp (58 + ~12 de folga) */
}

@media (max-width: 767px) {
  .ldl-whatsapp-float {
    right: 16px;
    bottom: 16px;
  }
  .trx_addons_scroll_to_top {
    right: 19px !important;
    bottom: 80px !important;
  }
}

/* =================================================================
   MOBILE — normalização global (max-width: 767px)
   Corrige os problemas estruturais comuns a TODAS as páginas, sem
   tocar no desktop. Header/footer usam .sc_layouts_row (não .vc_row),
   então as regras de coluna abaixo não os afetam.
   ================================================================= */
@media (max-width: 767px) {
  /* --- A. Colunas que não empilham (causa de sobreposição/squeeze) ---
     Rows flex do WPBakery ficam com nowrap → colunas comprimem lado a
     lado no mobile em vez de empilhar. Permitir wrap resolve. */
  .vc_row.vc_row-flex,
  .vc_row.wpb_row.vc_inner {
    flex-wrap: wrap !important;
  }
  /* Reforço: colunas vc_col-sm/md ocupam a largura toda no mobile */
  .vc_row.vc_row-flex > .wpb_column[class*='vc_col-sm-'],
  .vc_row.vc_row-flex > .wpb_column[class*='vc_col-md-'],
  .vc_row.vc_inner > .wpb_column[class*='vc_col-sm-'],
  .vc_row.vc_inner > .wpb_column[class*='vc_col-md-'] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* --- B. Tipografia: títulos de display do tema (.sc_item_title) ---
     Mesma escala em todas as páginas + nunca quebrar no meio da palavra.
     (Não afeta labels de produto/h2 do catálogo, que usam outras classes.) */
  .sc_item_title.sc_title_title,
  .sc_layouts_title_caption {
    font-size: 26px !important;
    line-height: 1.18 !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }
  /* subtítulo/olho-d'água acima dos títulos (ex.: "Modelos", "Designer") */
  .sc_item_subtitle.sc_title_subtitle {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  /* --- C. Ritmo vertical: padroniza os espaçadores do builder ---
     Os .vc_empty_space tinham alturas caóticas por página (16/27/53/69/120).
     Normaliza por classe nomeada e limita os inline gigantes no mobile,
     criando um ritmo único e mais compacto. */
  .vc_empty_space {
    max-height: 40px !important;
  }
  .vc_empty_space.height_small {
    height: 16px !important;
    max-height: 16px !important;
  }
  .vc_empty_space.height_medium {
    height: 24px !important;
    max-height: 24px !important;
  }
  .vc_empty_space.height_large {
    height: 32px !important;
    max-height: 32px !important;
  }
  .vc_empty_space.height_huge {
    height: 40px !important;
    max-height: 40px !important;
  }

  /* --- D. Gutter lateral PADRONIZADO (simétrico em todas as páginas) ---
     Problema medido: lado direito ~20px maior que o esquerdo (sc_content
     width:80% alinhado à esquerda) e gutter esquerdo variando 18/22/41px
     entre páginas. Padroniza tudo: conteúdo do tema em largura total,
     zera margens negativas/custom horizontais, e gutter único de 16px. */

  /* D1. conteúdo do tema ocupa largura total (mata a assimetria à direita).
     Seletores com [class*=] têm especificidade 0,2,0 — vencem o <style>
     inline do WPBakery (.vc_custom_* / .sc_content_width_* / .sc_float_*,
     que são 0,1,0 !important e por isso batiam o reset simples). */
  .sc_content,
  .sc_content[class*='width_'],
  .sc_content[class*='vc_custom_'],
  .sc_content[class*='sc_float_'],
  .sc_content_container {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
    margin-top: 0 !important; /* mata o overlap (margin-top:-300px do desktop) */
    margin-bottom: 0 !important;
  }
  /* D2. zera TODAS as margens horizontais das rows (o -15 padrão e os
     custom), top-level e nested — senão o conteúdo vaza (bleed -14px).
     Exclui rows full-width (hero/vídeo) que dependem da margem negativa. */
  .vc_row:not([data-vc-full-width]),
  .vc_row.vc_inner,
  .vc_row .vc_column-inner,
  .sc_content,
  .wpb_wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* D3. gutter único de 16px no container top-level; nested sem gutter
     próprio (herda os 16px do pai). */
  .vc_row:not(.vc_inner):not([data-vc-full-width])
    > .wpb_column
    > .vc_column-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .vc_row.vc_inner > .wpb_column > .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- E. Overlap vertical: reset de margin-top negativo (composições
     desktop que sobrepõem texto na imagem). Ex.: seção "LINHA VILANOVA
     ARTIGAS" na home tinha .sc_content com margin-top:-300px. No mobile
     o conteúdo deve fluir ABAIXO da imagem, não por cima. */
  .sc_content {
    margin-top: 0 !important;
  }

  /* --- F. Acessibilidade: menu do footer ---
     Links eram 10px com tap de ~30px de altura. Sobe a fonte p/ legível
     e o alvo de toque p/ ~44px (recomendação WCAG/iOS). */
  .ldl-footer .ldl-footer__menu li a {
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    display: block;
  }
}

/* =================================================================
   MOBILE — fixes por página (body class do WP), preenchido conforme
   a auditoria visual de cada página.
   @media (max-width: 767px) { .home { ... } .page-id-XXXX { ... } }
   ================================================================= */
@media (max-width: 767px) {
  /* --- /fotos/ (page-id 3209) ---
     A row de vídeo de fundo (#video-page) colapsava p/ ~40px no mobile
     (vc_row-o-full-height não aplica), mostrando só a barra de controle
     do YouTube + um vazio branco. Damos altura p/ o vídeo aparecer como
     hero. O crop global de .vc_video-bg deixa o playback limpo. */
  .page-id-3209 #video-page,
  .page-id-3209 .video-page {
    min-height: 50vh !important;
    height: auto !important;
  }
  .page-id-3209 #video-page .vc_video-bg,
  .page-id-3209 .video-page .vc_video-bg {
    min-height: 50vh !important;
  }
  /* Aqui o vídeo é "assistível" (com controles), não hero de fundo:
     desfaz o crop/no-click global p/ permitir play. */
  .page-id-3209 .vc_video-bg-container .vc_video-bg,
  .page-id-3209 .vc_video-bg-container .vc_video-bg iframe {
    transform: none !important;
    pointer-events: auto !important;
  }

  /* --- /simulador/ — seletor "1. Selecione um formato" ---
     O simulador tem regras @media conflitantes: uma deixa os 4 cards num
     scroller horizontal (flex-wrap:nowrap, 148px fixos), outra força grid
     2-col de ~130px. No ~390px elas brigam → grid de 130px com cards de
     148px = coluna direita (Hexagonal/Faixas) estoura e é cortada.
     Solução: um grid 2x2 limpo, colunas flexíveis (1fr) que sempre cabem,
     sem scroller/corte, cards preenchendo a coluna. (#simulador = 1,1,0;
     este arquivo carrega por último e vence.) */
  #simulador .formatos-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: stretch !important;
    /* Breakout p/ gutter padrão de 16px (igual às demais seções),
       independente do aninhamento de wrappers do simulador que empurravam
       o grid p/ ~57px de margem. */
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    padding: 4px 0 10px !important;
  }
  #simulador .formato-opcao {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: initial !important;
  }
}

/* =================================================================
   SIMULADOR — Feedback do limite de 5 cores por ladrilho
   -----------------------------------------------------------------
   Ao atingir o limite, as cores NÃO usadas na peça ficam atenuadas e
   as usadas ganham um anel sutil. Todos os swatches continuam
   clicáveis (só muda a opacidade), para o usuário trocar uma cor.
   Classes aplicadas via JS em #paleta-ladrilho li:
   .cor-usada (cor presente na peça) | .cor-fora-limite (atenuada).
   ================================================================= */
#paleta-ladrilho li {
  transition: opacity 0.2s ease;
}
#paleta-ladrilho li.cor-fora-limite {
  opacity: 0.3;
}
#paleta-ladrilho li.cor-usada .swatch {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(0, 0, 0, 0.35);
}

/* =================================================================
   SIMULADOR — Dica + faixa "Cores no seu ladrilho" (troca rápida)
   ================================================================= */
.area-cores-ladrilho .dica-cores {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #6b6b6b;
}
.cores-no-ladrilho {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.cores-no-ladrilho[hidden] {
  display: none;
}
.cores-no-ladrilho-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #444;
  margin-bottom: 8px;
}
.cores-no-ladrilho-label small {
  font-weight: 400;
  color: #999;
}
.lista-cores-usadas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lista-cores-usadas .cor-usada-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 5px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.lista-cores-usadas .cor-usada-chip:hover {
  border-color: rgba(0, 0, 0, 0.35);
}
.lista-cores-usadas .cor-usada-chip .swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
}
.lista-cores-usadas .cor-usada-chip .nome {
  font-size: 12px;
  color: #333;
  white-space: nowrap;
}
/* Chip selecionado como origem da troca */
.lista-cores-usadas .cor-usada-chip.trocando {
  border-color: #c79a3b;
  box-shadow: 0 0 0 2px rgba(199, 154, 59, 0.35);
}
/* Durante a troca, a paleta "pisca" sutil pedindo a nova cor */
.cores-no-ladrilho.em-troca + .obs-cores {
  color: #c79a3b;
}

/* Cor escolhida como origem da troca (destaque dourado na paleta) */
#paleta-ladrilho li.cor-troca-origem .swatch {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #c79a3b;
}

/* =================================================================
   SIMULADOR — Botão "Monte seu ladrilho": fundo = cor da borda
   O tema pai (sc_button_hover_slide_left) injeta um gradiente claro
   por cima, deixando o fundo mais claro que a borda. Fixamos o fundo
   na própria cor da borda (#a49562).
   ================================================================= */
#btn-salvar-ladrilho.btn-primary-destaque {
  background-image: none !important;
  background-color: #a49562 !important;
  border: 2px solid #a49562 !important;
  color: #fff !important;
}
#btn-salvar-ladrilho.btn-primary-destaque:hover {
  background-image: none !important;
  background-color: #8f8052 !important;
  border-color: #8f8052 !important;
}

/* =================================================================
   SIMULADOR — Dialog de coleções: visual mais clean
   ----------------------------------------------------------------- */
/* Cards de coleção: tira gradiente, ponto e borda pesada → mais leve */
#grid-modelos-ladrilho .modelo-item.colecao-item {
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: none;
}
#grid-modelos-ladrilho .modelo-item.colecao-item:hover {
  border-color: #c9b89a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
#grid-modelos-ladrilho .modelo-item.colecao-item::after {
  content: none;
}
#grid-modelos-ladrilho .modelo-item.colecao-item img {
  border: none;
  box-shadow: none;
}
/* Badge "N ladrilhos": pílula sutil em vez do dourado pesado */
#grid-modelos-ladrilho .badge-colecao {
  background: #f4f1ea;
  color: #8a7d54;
  box-shadow: none;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Aliviar também os cards individuais no dialog */
#grid-modelos-ladrilho .modelo-item {
  border-width: 1px;
  box-shadow: none;
}
#grid-modelos-ladrilho .modelo-item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* =================================================================
   SIMULADOR — Step de detalhe da coleção (ver ladrilhos antes de aplicar)
   ----------------------------------------------------------------- */
.colecao-detalhe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid #ececec;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}
.colecao-detalhe-titulo {
  text-align: center;
  line-height: 1.3;
}
.colecao-detalhe-titulo strong {
  display: block;
  font-size: 16px;
  color: #2f2e2c;
  font-weight: 600;
}
.colecao-detalhe-titulo span {
  font-size: 12px;
  color: #9a9a9a;
}
.colecao-voltar,
.colecao-escolher {
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.colecao-voltar {
  background: transparent;
  border: 1px solid #d8d4ca;
  color: #6b6b6b;
}
.colecao-voltar:hover {
  border-color: #a49562;
  color: #a49562;
}
.colecao-escolher {
  background: #a49562;
  border: 1px solid #a49562;
  color: #fff;
}
.colecao-escolher:hover {
  background: #8f8052;
  border-color: #8f8052;
}
.colecao-detalhe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.colecao-ladrilho-card {
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  background: #fff;
}
.colecao-ladrilho-card img,
.colecao-ladrilho-sem-img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  border-radius: 4px;
  margin-bottom: 8px;
  background: #f6f6f6;
  display: block;
}
.colecao-ladrilho-nome {
  font-size: 12px;
  color: #5a5a5a;
  line-height: 1.3;
  display: block;
}
@media (max-width: 600px) {
  .colecao-detalhe-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .colecao-detalhe-titulo {
    order: -1;
    width: 100%;
  }
  .colecao-voltar,
  .colecao-escolher {
    flex: 1;
  }
}

/* Detalhe da coleção: o container é um grid; ao exibir o detalhe, volta a
   block para o cabeçalho e a grade internos ocuparem a largura toda. */
#grid-modelos-ladrilho:has(.colecao-detalhe) {
  display: block;
}
.colecao-detalhe {
  width: 100%;
}

/* =================================================================
   SIMULADOR — Tom do dourado nos botões do dialog = #a49562 (igual ao
   "Monte seu ladrilho"). O tema pai força um dourado claro (#dfccb0);
   sobrescrevemos com !important.
   ================================================================= */
.colecao-escolher {
  background: #a49562 !important;
  background-image: none !important;
  border: 1px solid #a49562 !important;
  color: #fff !important;
}
.colecao-escolher:hover {
  background: #8f8052 !important;
  border-color: #8f8052 !important;
}
.colecao-voltar {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid #d8d4ca !important;
  color: #6b6b6b !important;
}
.colecao-voltar:hover {
  border-color: #a49562 !important;
  color: #a49562 !important;
}
/* Aba ativa do dialog usa o mesmo dourado sólido */
.dialog-tabs .tab-btn.active {
  background: #a49562 !important;
  background-image: none !important;
  color: #fff !important;
}
/* Aba inativa: neutra e leve */
.dialog-tabs .tab-btn:not(.active) {
  background: #f4f1ea !important;
  background-image: none !important;
  color: #8a7d54 !important;
}