/**
 * ============================================================================
 * ALÔ VENDAS PRO — CATÁLOGO: BASE (vale no computador E no celular)
 * ============================================================================
 *
 * Aqui está o que o `catalogo-mobile.css` NÃO redeclara — ou seja, aquilo de
 * que o celular depende para funcionar. O `:root` mora aqui: é por ele que a
 * paleta escolhida pelo lojista entra na vitrine, nos dois tamanhos.
 *
 * Não acrescente layout de tela grande neste arquivo: ele vale no celular
 * também, e foi exatamente assim que uma propriedade do desktop atravessou e
 * quebrou o desenho do card no aparelho.
 *
 * ⚠️ GERADO por scripts/separar-css-catalogo.php a partir do antigo
 * catalogo.css, em 16/08/2026. Editar à mão daqui em diante é o normal — o
 * script existe para registrar COMO a divisão foi feita, não para rodar de
 * novo por cima do que alguém escrever.
 */
/* ==========================================================================
   CATALOGO.CSS - ML DNA
   ========================================================================== */

:root {
  /* CORES DA MARCA — servidas pela paleta do lojista.
   *
   * Aqui havia um aviso em inglês proibindo mexer nestes valores, e era ele que
   * fazia a cor escolhida no painel não chegar à vitrine (defeito nº 1 de
   * 15/08). Saiu junto com a mudança.
   *
   * O contrato agora é outro: quem MANDA é `--cor-*`, gerada em PHP no
   * `<head>` a partir da tabela `configuracoes`. O valor depois da vírgula é
   * FALLBACK — vale quando o bloco não foi gerado, e é o visual de fábrica
   * desta loja. Continue editando o fallback, nunca o nome da variável.
   *
   * ⚠️ Esta declaração precisa vir DEPOIS do <style id="tema-dinamico">, e
   * vem: o <link> deste arquivo está abaixo dele no <head>. Variável repetida
   * com a mesma especificidade é decidida por quem vem por último. */
  --primary: var(--cor-primaria, #89646E);
  --primary-hover: var(--cor-secundaria, #68434F);
  --accent: var(--cor-destaque, #C8AEC5);
  --dark-slate: var(--cor-titulo, #352A30);

  /* Marca de TERCEIRO: fica fixa. Virar rosa porque a loja é rosa
   * descaracteriza o ícone que a cliente reconhece no botão de pedir. */
  --whatsapp-green: #25D366;

  /* ML STRUCTURAL TOKENS */
  --texto-1: var(--cor-texto, rgba(0,0,0,.9));
  --texto-2: rgba(0,0,0,.55);
  --texto-3: #999;
  --ok: var(--cor-sucesso, #00a650);
  --divisor: var(--cor-borda, #ededed);
  --fundo-body: var(--cor-fundo, #ebebeb);
  --fundo-card: var(--cor-card, #fff);
  --raio: 6px;
  --raio-input: 2px;
  --sombra-hover: 0 7px 16px 0 rgba(0,0,0,.15), 0 1px 3px 0 rgba(0,0,0,.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.top-info .divider {
  color: rgba(255,255,255,.5);
}
.top-contact a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}

/* Header */
/* Mobile elements hidden on desktop */
.mobile-drawer,
.mobile-drawer-overlay,
.mobile-menu-btn,
.mobile-sub-bar {
  display: none;
}
.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-sacola-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.search-clear-btn:hover {
  color: #333333;
}
.search-results-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  z-index: 10;
}
.search-results-dropdown.hidden {
  display: none;
}
.link-limpar-filtro:hover {
  background: var(--primary);
  color: #fff;
}
.dept-item:hover {
  color: var(--primary);
}
.banner-slides-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  transform: scale(1.02);
  z-index: 1;
}
.banner-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}
.btn-banner-click {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 3;
}
.overlay-actions {
  pointer-events: auto;
}
.link-cotar-zap-overlay:hover {
  transform: scale(1.03);
  background: #20b858;
}
.stitch-dots-overlay {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(0,0,0,.2);
  cursor: pointer;
  padding: 0;
  transition: all .25s ease;
}
.dot:hover,
.dot.active {
  background: #fff;
  transform: scale(1.25);
  box-shadow: 0 0 6px rgba(255,255,255,.8);
}
.hero-stitch-main-hd:hover .banner-nav-btn {
  opacity: 1;
}
.banner-nav-btn:hover {
  background: rgba(0,0,0,.75);
}
.banner-nav-btn.btn-prev {
  left: 14px;
}
.banner-nav-btn.btn-next {
  right: 14px;
}
.stitch-side-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
/* ⚠️ OS DOIS CARDS DO TOPO SEGUEM A PALETA — não têm cor própria.
 *
 * Estava cravado aqui o vinho `#2D1F27 → #4A333F` e `#3A2632 → #5C3D4E`, do
 * desenho da primeira loja. A loja de material de construção trocava a cor da
 * marca para o amarelo dela, a vitrine inteira mudava, e estes dois quadros
 * continuavam vinho no meio da página — o dono viu e perguntou.
 *
 * Agora o fundo sai de `--cor-titulo` (o tom escuro da paleta) para
 * `--cor-secundaria` (a cor da marca, mais funda). Trocar a cor principal na
 * tela leva os dois junto, sem ninguém precisar saber que eles existem.
 *
 * O `color-mix` deixa o segundo card um degrau mais claro que o primeiro, para
 * eles não virarem um bloco só — a diferença é relativa à paleta, não uma cor
 * escolhida à mão que voltaria a brigar com a marca do próximo lojista.
 */
/* ⚠️ O ESCURO DOMINA, e a marca entra só como tempero.
 *
 * A primeira versão ia de `--cor-titulo` até `--cor-secundaria` cheia. Com a
 * marca amarela, o gradiente atravessava azul-escuro → amarelo-fundo e o card
 * saía OLIVA — uma cor que não é da loja nem da paleta, nascida da mistura.
 *
 * Misturar duas cores de pontas opostas do círculo dá isso. Agora a base é
 * sempre o tom escuro do texto, com 30% da marca por cima: o card fica escuro,
 * puxando discretamente para a cor da loja, e nenhuma paleta produz cor suja. */
.card-pisos {
  background: linear-gradient(135deg,
    var(--cor-titulo, #24303D) 0%,
    color-mix(in srgb, var(--cor-secundaria, #234867) 30%, var(--cor-titulo, #24303D)) 100%);
}
.card-basico {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cor-titulo, #24303D) 88%, #ffffff) 0%,
    color-mix(in srgb, var(--cor-secundaria, #234867) 26%, color-mix(in srgb, var(--cor-titulo, #24303D) 88%, #ffffff)) 100%);
}
.stitch-side-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px 0;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.btn-stitch-white:hover {
  /* Era `#f8edf3` e `#89646E` — o rosa da primeira loja, escrito à mão. */
  background: color-mix(in srgb, var(--cor-primaria, #2F5D8A) 10%, #ffffff);
  color: var(--cor-secundaria, #234867);
  transform: scale(1.04);
}
.stitch-side-card:hover .stitch-side-thumb img {
  transform: scale(1.08);
}
.stitch-section-title {
  font-size: 24px;
  font-weight: 400;
  color: var(--texto-1);
  margin-bottom: 24px;
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-hover);
}
.product-card:hover .product-img-wrap img {
  transform: scale(1.04);
}
.product-sem-foto {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--divisor);
}
.product-title a:hover,
.product-title-link:hover {
  color: var(--primary);
}
.price-cents {
  font-size: 12px;
  line-height: 14px;
  margin-top: 4px;
}
.price-consulte {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto-1);
  margin-top: 16px;
}

/* Variants */
.product-variants {
  margin-bottom: 12px;
}
.btn-add-cart:hover {
  background: var(--primary-hover);
}
.stitch-store-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zap-icon-header {
  color: var(--whatsapp-green);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zap-consultant-card strong {
  display: block;
  color: var(--texto-1);
  font-size: 14px;
  line-height: 1.3;
}
.zap-consultant-card span {
  display: block;
  color: var(--texto-2);
  font-size: 13px;
  line-height: 1.3;
}
.zap-consultant-card p {
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.footer-col ul li a:hover {
  color: var(--primary);
}

.payment-badges-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pay-flag-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--texto-2);
  text-transform: uppercase;
}
.stitch-footer-bottom {
  border-top: 1px solid var(--divisor);
  padding: 16px 0;
  background: var(--fundo-body);
}
.social-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.social-icons a, .rodape-acesso a {
  color: var(--texto-2);
}
.rodape-acesso a:hover {
  color: var(--primary);
}
.floating-whatsapp:hover {
  transform: scale(1.05);
}

/* Quickview Modal */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay[hidden] {
  display: none;
}
.modal-card {
  background: #fff;
  border-radius: var(--raio);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--fundo-body);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 10;
}
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Mobile Breakpoints */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
  .header-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .search-box input {
    font-size: 16px; /* Prevent iOS zoom */
  }
  .search-red-btn {
    min-width: 48px; /* Touch target */
  }
  /* `.hero-stitch-grid { grid-template-columns: 1fr }` saiu daqui em 17/08/2026:
     o `catalogo-mobile.css` torna este seletor `display: flex` no celular, e
     propriedade de GRID não faz nada dentro de um flex. Era declaração inerte —
     e inerte hoje é a mesma forma do defeito que quebrou os diferenciais
     (mudar o modelo e herdar propriedade do modelo antigo). `testar-blindagem`
     acusa quem repetir isso. */
  .hero-stitch-main-hd {
    max-height: 180px;
  }
  .stitch-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
  .product-img-wrap {
    aspect-ratio: 1/1; /* keep 1:1 */
  }
  /* `.stitch-features-grid { flex-direction: column }` morava aqui e estava
     MORTA: o `catalogo-mobile.css` manda `row !important` e vencia sempre.
     Regra morta que contradiz a viva é pista falsa — quem foi caçar a coluna
     dos diferenciais em 17/08/2026 achou esta linha primeiro, e ela não era a
     causa (a causa era o `flex-wrap: wrap` daqui de baixo, que o mobile não
     sobrescrevia). Breakpoint não mora nesta folha; ela é a base dos dois. */
  /* `.stitch-store-grid { grid-template-columns: 1fr }` saiu pelo mesmo motivo
     do `.hero-stitch-grid` acima: o celular o torna `display: flex`. */
  .stitch-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom-flex {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .floating-whatsapp {
    width: 48px; height: 48px;
    font-size: 24px;
    bottom: 16px; right: 16px;
  }
  .modal-grid {
    grid-template-columns: 1fr;
  }
}
/* ══ REGRAS QUE VOLTARAM DO DESKTOP, EM 17/08/2026 ═══════════════════════════
 *
 * A divisão original usou um critério fraco: "o mobile menciona este seletor,
 * então o desktop pode se fechar em min-width". Mencionar não é redeclarar.
 *
 * O `.floating-whatsapp` prova: o mobile só ajustava tamanho e posição, e as
 * propriedades que o SUSTENTAM — `position: fixed`, `display: flex`, o verde do
 * fundo — ficaram trancadas no desktop. No celular ele virou um link comum no
 * fluxo do documento e apareceu no canto esquerdo do rodapé, sem cor nenhuma.
 * O dono viu: "para que esse botão de WhatsApp no canto esquerdo do rodapé?".
 *
 * Estas 17 regras têm propriedade ESTRUTURAL (position, display, background,
 * border-radius, box-shadow, align-items, justify-content, flex-direction,
 * z-index) que o mobile não redeclara. Ficam na base, onde valem nos dois
 * tamanhos; o mobile continua ajustando por cima o que quiser.
 * ══════════════════════════════════════════════════════════════════════════ */


/* Top Bar */
.top-bar {
  background: var(--dark-slate);
  color: #fff;
  font-size: 13px;
  padding: 4px 0;
}
.header-grid {
  display: flex;
  align-items: center;
  gap: 28px;
}
.search-box {
  flex-grow: 1;
  position: relative;
  order: 2;
}
.hero-stitch-main-hd {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  height: 340px;
  background: var(--dark-slate);
}
.banner-overlay-content {
  position: absolute;
  bottom: 0; left: 0; width: 100%;
  padding: 20px 24px;
  pointer-events: none;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.link-cotar-zap-overlay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--whatsapp-green);
  color: #fff;
  padding: 9px 18px;
  border-radius: var(--raio);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: transform .15s ease, background-color .15s ease;
}
.banner-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.25);
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
  line-height: 1;
}
.hero-stitch-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 340px;
}
.btn-stitch-white {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #352A30;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: all .2s ease;
}
.stitch-features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  background: var(--fundo-card);
  padding: 16px 24px;
  border-radius: var(--raio);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.price-current {
  font-size: 24px;
  font-weight: 600;
  color: var(--texto-1);
  display: flex;
}
.btn-stitch-dark {
  background: var(--primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--raio);
  font-weight: 600;
  font-size: 14px;
}
.zap-consultant-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--divisor);
  border-radius: var(--raio);
  margin-top: 5%;
}
.pay-flags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pay-icon-svg {
  display: block;
  flex-shrink: 0;
  border-radius: 2px;
}
.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--texto-3);
}

/* Floating WhatsApp */
.floating-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: var(--whatsapp-green);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  z-index: 100;
  transition: transform 0.2s;
}
/* ══ BARRA DE NAVEGAÇÃO INFERIOR — existe só no celular ══════════════════════
   Declarada escondida aqui, na folha que vale nos dois tamanhos, e acesa em
   `catalogo-mobile.css`. Assim o computador nunca a mostra, mesmo que alguém
   mexa na folha do celular.

   (Havia aqui um `.voltar-ao-topo` pelo mesmo motivo. Removido em 23/08/2026:
   nenhum HTML ou JS jamais criou esse botão — a regra existia sozinha.) */
.barra-inferior {
  display: none;
}

/* A frase de pagamento escrita por extenso — quando o lojista não escreveu uma
   lista, e sim uma explicação ("No momento, recebemos apenas via PIX"). Sai
   inteira, numa linha, em vez de picada em etiquetas pela vírgula. */
.pay-frase {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--texto-2, #6b7280);
}