/**
 * ============================================================================
 * 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,
.header-mobile-zap,
.mobile-sub-bar,
.header-mobile-placeholder {
  display: none;
}
.logo-box,
.logo-yellow-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;
  }
  .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;
  }
  .stitch-store-grid {
    grid-template-columns: 1fr;
  }
  .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;
  }
}