/* 
  ZeniteS — Design System 
  Baseado no Roadmap Estratégico (Verde Oliva & Terracota)
*/

/* Fontes já vêm pelo <link rel="stylesheet"> em index.html (com preconnect):
   o @import daqui carregava as MESMAS famílias uma 2ª vez, render-blocking em
   cadeia. Removido (index.html é o único consumidor deste CSS). */

:root {
  /* Colors */
  --primary: #5C6B3A;
  --primary-dark: #4a5730;
  --primary-light: #8B9D6A;
  --secondary: #D4A574;
  --secondary-light: #E8D7C3;
  --accent: #D4A574;
  /* Frente 6 (Paleta A): accent por loja nos CTAs de acao. JS (aplicarTema) sobrescreve
     com Config_Lojas.Cor_Destaque; estes sao o default terracota quando a loja nao definiu. */
  --cor-destaque: #c2410c;
  --cor-destaque-dark: #9a3412;

  --bg-body: #F8F7F4;
  --text-main: #0F172A;
  --text-muted: #64748B;
  
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;

  /* Spacing & Borders */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.5;
  overflow-x: hidden;
  /* __CARD877_STICKY__: hidden no body o vira container de rolagem (overflow-y vira auto) e
     mata todo position:sticky da pagina (header e abas de categoria rolavam junto). clip corta
     igual sem criar container. Navegador sem clip (Safari < 16) fica no hidden de antes. */
  overflow-x: clip;
}

.font-display {
  font-family: 'Playfair Display', serif;
}

/* --- Layout Utils --- */
.container-sb {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* --- Header & Glassmorphism --- */
header.premium-header {
  /* __IMPECCABLE_ONDA3_BLUR_V1__ fundo 97% opaco (quase solido) + blur leve: mantem o glass
     premium com custo de compositing bem menor (o header fica visivel em todo o scroll). */
  background: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 97%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}

/* __CARD877_STICKY__: o header.scrolled ganhava padding 8px 0 e CRESCIA 16px ao rolar. Com o
   sticky consertado, isso empurrava o header por cima da fileira de abas. A classe segue
   existindo (o layout editorial a usa); so o crescimento saiu. */

/* --- Hero Section --- */
.hero-section {
  position: relative;
  height: 80vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  background-size: cover;
  background-position: center;
  margin-bottom: 2rem;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
}

/* Quando loja nao tem Hero_Image_URL: fundo gradient cor primaria.
   JS aplica/remove .hero-no-image em renderDynamicContent. */
.hero-section.hero-no-image {
  background-color: var(--primary);
  background-image: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
}
.hero-section.hero-no-image .hero-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
}

/* Utility classes pra alpha de cor primaria.
   Substituem Tailwind bg-[var(--cor-primaria,#5C6B3A)]/N que NAO funcionam com CSS var em arbitrary values. */
.bg-primary-5 { background-color: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 5%, transparent); }
.bg-primary-10 { background-color: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 10%, transparent); }
.bg-primary-20 { background-color: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 20%, transparent); }
.hover-bg-primary-10:hover { background-color: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 10%, transparent); }
.focus-ring-primary-10:focus { --tw-ring-color: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 10%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-primaria, #5C6B3A) 10%, transparent); }

.hero-content {
  position: relative;
  z-index: 10;
  padding: 0 2rem;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards 0.2s;
  max-width: 100%;
  word-wrap: break-word;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards 0.4s;
}

.btn-hero {
  background-color: var(--cor-destaque, #c2410c);
  color: var(--cor-destaque-texto, #fff); /* __CARD1150_COR_TEXTO_V1__ */
  padding: 1rem 2.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  animation: fadeInUp 0.8s forwards 0.6s;
}

.btn-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  background-color: var(--cor-destaque-dark, #9a3412);
}

/* --- About Section --- */
.section-about {
  padding: 3rem 1.25rem;
  background: white;
  border-radius: var(--radius-md);
  margin: 1rem;
  box-shadow: var(--shadow-sm);
  width: auto; /* Garante que a margem não empurre para fora */
}

.about-grid {
  display: grid;
  gap: 2rem;
}

.about-image {
  width: 100%;
  border-radius: var(--radius-md);
  object-cover: cover;
  box-shadow: var(--shadow-md);
}

.about-badge {
  color: var(--secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
  display: block;
}

.about-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.about-text {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  white-space: pre-line;
}

/* --- Category Tabs --- */
.cat-tabs-container {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 1rem 0;
  scrollbar-width: none;
}

.cat-tabs-container::-webkit-scrollbar {
  display: none;
}

.cat-tab {
  padding: 0.6rem 1.5rem;
  background: white;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}

.cat-tab.active {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--cor-primaria, #5C6B3A) 20%, transparent);
}

/* --- Product Cards --- */
.product-card {
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  border: 1px solid rgba(0,0,0,0.03);
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.product-info {
  flex: 1;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
  color: var(--text-main);
}

.product-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.price-main {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.15rem;
}

.price-old {
  color: var(--text-muted);
  text-decoration: line-through;
  font-size: 0.8rem;
}

.product-image-wrapper {
  width: 120px;
  position: relative;
  background-color: #f0f0f0;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-add-quick {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: none;
  font-size: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* --- FAQ Section --- */
.section-faq {
  padding: 3rem 1.5rem;
}

.faq-title {
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 2rem;
  color: var(--primary);
}

.faq-item {
  background: white;
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.faq-question {
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-main);
  transition: background 0.2s;
}

.faq-question:hover {
  background: #f9f9f9;
}

.faq-answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  display: none;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-icon {
  transition: transform 0.3s;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* --- Animations --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Responsive --- */
/* --- Modals & Drawers --- */
.modal-overlay {
  transition: opacity .25s ease;
}

.modal-overlay.hidden-op {
  opacity: 0;
  pointer-events: none;
}

/* parte 38: drawer com left:50% + -translate-x-1/2 (Tailwind) — closed precisa
   preservar o translateX-50% senao desce sem centralizar e causa hscroll mobile */
.drawer {
  transform: translateX(-50%);
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.drawer.closed {
  transform: translateX(-50%) translateY(100%);
}

.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.1s;
}

.qty-btn:active {
  transform: scale(0.9);
}

/* AUD40-baixos: area de toque do qty-btn (32px visual) expandida pra 44px sem mudar
   o visual — o ::after invisivel captura o toque (WCAG 2.5.8 target size). */
.qty-btn {
  position: relative;
}
.qty-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
  /* __CARD1152_TOQUE_44_V1__ era border-radius 50%: o navegador respeita o arredondamento no toque, entao
     a area valia um CIRCULO de 44px e os cantos do quadrado caiam fora (medido no E2E). Quadrada e invisivel. */
}

/* --- Legacy Compatibility --- */
.bg-primaria { background-color: var(--primary); }
.text-primaria { color: var(--primary); }
.border-primaria { border-color: var(--primary); }
.bg-secundaria { background-color: var(--secondary); }
.hover\:bg-primaria-dark:hover { background-color: var(--primary-dark); }
/* Frente 6 (Paleta A): accent por loja nos CTAs de acao (terracota default, per-loja via Cor_Destaque) */
/* __CARD1150_COR_TEXTO_V1__ icone/texto sobre o destaque sai da claridade da cor (vitrine.js
   sbCorTextoSobre): com destaque claro (amarelo, bege, branco) o "+" branco sumia. Vence o
   `text-white` do Tailwind por vir depois, com a mesma especificidade. */
.bg-destaque { background-color: var(--cor-destaque, #c2410c); color: var(--cor-destaque-texto, #fff); }
.text-destaque { color: var(--cor-destaque-legivel, var(--cor-destaque, #c2410c)); }
.border-destaque { border-color: var(--cor-destaque, #c2410c); }
.hover\:bg-destaque-dark:hover { background-color: var(--cor-destaque-dark, #9a3412); }
.cart-badge { min-width: 20px; height: 20px; border-radius: 10px; }
/* #10: busca de produtos esconde cards/categorias que nao batem */
.search-hidden { display: none !important; }
/* #3/#C4: campo invalido no checkout (validacao inline, sem alert bloqueante) */
.campo-erro { outline: 2px solid #ef4444 !important; outline-offset: 2px; border-radius: 12px; }
/* __AUD40_A11Y2_RADIO_V1__: radio dos cards do checkout oculto mas FOCAVEL (display:none tirava
   do tab order = entrega/quando/pagamento inoperaveis por teclado). Padrao sr-only; o anel de
   foco aparece no label pai via :focus-within. */
.sr-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.entrega-opt:focus-within, .quando-opt:focus-within, .pagto-opt:focus-within {
  outline: 2px solid var(--primary, #16a34a);
  outline-offset: 2px;
}

/* --- Responsive Layout --- */
@media (min-width: 640px) {
  .hero-title { font-size: 4rem; }
  .section-about {
    margin: 3rem auto;
    width: 100%;
    max-width: 640px;
  }
}

/* #9/#C0: no celular o hero 80vh tomava a dobra inteira (nenhum produto aparecia). Reduz pra ~62vh
   pra a 1a fileira de produtos "espiar" abaixo do CTA (affordance de scroll). */
@media (max-width: 639px) {
  .hero-section { height: 62vh; min-height: 360px; }
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}
/* __CARD877_STICKY__: ver a regra do body no topo do arquivo. */
body {
  overflow-x: clip;
}

/* =========================================================
   SPRINT 20 — Refinamentos visuais premium
   Mantém estrutura original mas:
   - sombras mais sofisticadas (multi-camada)
   - tipografia hero com letter-spacing e text-shadow
   - cards com hover mais elegante
   - badges e botões com efeito de profundidade
   - cor secundária usada em mais lugares (acentos quentes)
   ========================================================= */

/* Hero: tipografia mais marcante + overlay com gradiente lateral.
   #11 (auditoria UX): scrim reforcado pra garantir contraste AA do titulo E do
   subtitulo sobre fotos claras/ocupadas (o meio antes caia pra 0.35 e o texto
   branco sumia). Minimo agora 0.5; reforco extra na base onde fica o CTA. */
.hero-overlay {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.35) 100%),
    linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.72) 100%
    );
}

.hero-title {
  letter-spacing: -0.02em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  font-weight: 700;
}

.hero-subtitle {
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  font-weight: 400;
}

/* #11: CTA do hero separado do fundo (foto) com halo escuro + borda clara sutil,
   pra nao "sumir" quando o secundario da marca e escuro/proximo da foto. */
.btn-hero {
  background: linear-gradient(135deg, var(--cor-destaque, #c2410c) 0%, var(--cor-destaque-dark, #9a3412) 100%);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.38),
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.btn-hero:hover {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* Cards de produto: hover com elevação + borda sutil que aparece */
.product-card {
  border: 1px solid transparent;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04);
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 15%, transparent);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.04);
}

/* About: badge com fundo suave (pill limpo, sem a borda-lateral que dava "cara de template").
   __IMPECCABLE_ONDA3_EYEBROW_V1__ alinhado ao eyebrow do site de vendas (pill sem side-tab). */
.about-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  padding: 0.35rem 1rem;
  border-radius: 100px;
}

.about-title {
  letter-spacing: -0.015em;
  position: relative;
}

/* Category Tabs: melhor contraste + sombra colorida na ativa */
.cat-tab {
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-tab:hover:not(.active) {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.cat-tab.active {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 0 0 3px color-mix(in srgb, var(--cor-primaria, #5C6B3A) 8%, transparent);
  transform: translateY(-1px);
}

/* Premium header: sombra colorida ao rolar */
header.premium-header {
  box-shadow: 0 4px 24px color-mix(in srgb, var(--cor-primaria, #5C6B3A) 18%, transparent);
}

/* FAQ: items com hover suave */
.faq-item {
  border-radius: var(--radius-md);
  background: white;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.faq-item:hover {
  box-shadow: var(--shadow-md);
}

/* Glow sutil no FAB do carrinho */
#cart-fab {
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--cor-primaria, #5C6B3A) 35%, transparent),
    0 12px 32px color-mix(in srgb, var(--cor-primaria, #5C6B3A) 20%, transparent);
}

/* =========================================================
   FRENTE 4 — Kits/Combos com apresentacao diferenciada (Opcao A)
   Produto marcado Eh_Kit ganha ribbon "COMBO" + borda accent.
   ========================================================= */
.product-card { position: relative; }
/* Kit: moldura accent clara (borda + ring + sombra tingida) pra destacar de produto normal */
.product-card.is-kit {
  border-color: var(--cor-destaque, #c2410c);
  box-shadow: 0 0 0 1.5px var(--cor-destaque, #c2410c), 0 6px 18px color-mix(in srgb, var(--cor-destaque, #c2410c) 16%, transparent);
}
.product-card.is-kit:hover {
  transform: translateY(-3px);
  border-color: var(--cor-destaque, #c2410c);
  box-shadow: 0 0 0 1.5px var(--cor-destaque, #c2410c), 0 10px 24px color-mix(in srgb, var(--cor-destaque, #c2410c) 24%, transparent);
}
.kit-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  background: var(--cor-destaque, #c2410c);
  color: var(--cor-destaque-texto, #fff); /* __CARD1150_COR_TEXTO_V1__ */
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* =========================================================
   IMPECCABLE PASS (cont64) — coerência de cor whitelabel, contraste,
   placeholder de foto e motion. Tudo tokenizado na cor da loja
   (--cor-primaria por tenant); nada hardcoded verde.
   ========================================================= */

/* Foco de input na cor da MARCA (era focus:ring-green-600 hardcoded, verde
   alheio à marca do lojista). Substitui a tripla Tailwind focus:outline-none
   focus:ring-2 focus:ring-green-600 por 1 classe própria robusta. */
.focus-ring-marca:focus {
  outline: none;
  border-color: var(--cor-primaria, #5C6B3A);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria, #5C6B3A) 22%, transparent);
}

/* Spinner de loading e ícones de progresso na cor da marca (era green-700/600). */
.brand-spinner { border-top-color: var(--cor-primaria, #5C6B3A) !important; }
.text-marca { color: var(--cor-primaria, #5C6B3A) !important; }

/* Estado "selecionado" (entrega/quando/pagamento): fundo tom-sobre-tom da marca,
   não bg-green-50. A borda já era .border-primaria — agora fundo combina. */
.bg-primary-8 { background-color: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 8%, transparent); }

/* Botão/link de cupom na cor da marca (era bg-green-600/text-green-700). */
.btn-cupom-marca { background-color: var(--cor-primaria, #5C6B3A); }
.btn-cupom-marca:hover { background-color: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 82%, #000); }
.link-cupom-marca { color: var(--cor-primaria, #5C6B3A); }
.link-cupom-marca:hover { color: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 78%, #000); }

/* Endereço salvo selecionado: realce da marca (era border-green-200 bg-green-50). */
.endereco-salvo-marca {
  border-color: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 35%, #e2e8f0);
  background-color: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 6%, transparent);
}

/* Avatar de review na cor da marca (era gradiente verde from-green-400 to-green-600). */
.avatar-review-marca {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cor-primaria, #5C6B3A) 62%, #fff),
    var(--cor-primaria, #5C6B3A));
}

/* Placeholder de produto SEM foto — a classe .img-placeholder era usada pelo
   vitrine.js (onerror + card sem imagem) mas NÃO existia em CSS nenhum: o card
   colapsava a área da foto p/ 0 e o botão "+" flutuava solto. Todo lojista novo
   começa sem foto, então esta era a 1ª impressão da própria vitrine. */
.img-placeholder {
  background-color: #eef2f6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8c2cf' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15.5l-4.5-4.5L5 22'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px;
  min-height: 120px;
}

/* Modal produto (#67): altura do carrossel ajusta por proporcao da foto. */
#modal-carousel {
  transition: height 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #modal-carousel { transition: none; }
}

/* Lixeira do carrinho: hit-area de 44px (WCAG 2.5.8) sem mudar o tamanho visual —
   o ::after invisível captura o toque, longe do botão "+" (evita apagar item sem querer). */
.btn-remover-item { position: relative; }
.btn-remover-item::after { content: ''; position: absolute; inset: -11px; }

/* __CARD1152_TOQUE_44_V1__ (#1152, vit-10): alvo de toque de pelo menos 44x44 sem mudar o desenho.
   Um ::after invisivel, CENTRADO no botao, com max(tamanho do botao, 44px) em cada eixo: o X de 24px
   ganha 10px de cada lado, o botao de 40px ganha 2px, e o botao largo so cresce na altura.
   NAO poe `position` aqui de proposito: o "+" do cartao e o X do produto sao `absolute`, e uma regra
   `relative` nesta folha (carregada depois do Tailwind) os tiraria do lugar. Quem e estatico leva a
   classe `relative` junto no HTML. Medido no E2E pelo elementFromPoint (vitrine-revisao-1148.spec). */
.sb-toque::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
/* __CARD1152_TOQUE_44_V1__ links de Politica/Termos DENTRO da frase da barra do checkout (11px): 44px de
   altura exigiria uma barra mais alta (e o #1153 quer o total sem rolar). Link em frase e excecao da
   WCAG 2.5.8; mesmo assim cada pedaco do link ganha 24px de altura de toque (o minimo da regra) com
   padding vertical, que em elemento inline NAO muda a altura da linha. Os dois links nao se encostam.
   `position: relative`: sem ele a linha de BAIXO da frase ganha o toque no padding de baixo (o navegador
   testa as linhas da ultima para a primeira); posicionado, o link e testado antes do texto comum. */
#termo-passivo a { padding-block: 5px; position: relative; }

/* __CARD1153_RESUMO_PRIMEIRO_V1__ "Mais opcoes" do passo final (montado no wizardInit): titulo + linha do
   que tem dentro, e uma seta que vira para cima quando abre (no lugar do triangulo nativo do <details>). */
#wz-extras > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
#wz-extras > summary::-webkit-details-marker { display: none; }
#wz-extras > summary::after {
  content: '';
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #4b5563;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
#wz-extras[open] > summary::after { transform: rotate(-135deg); margin-top: 0.25rem; }

/* Banner LGPD nunca cobre o dinheiro (P0): some enquanto carrinho/checkout
   (.modal-overlay) estão abertos. Instantâneo, sem depender do timing do JS. */
body:has(.modal-overlay:not(.hidden-op)) #lgpd-banner { display: none !important; }
/* __CARD263_WIZARD_FULLSCREEN__: a faixa de AMBIENTE LOCAL (env-bar, só existe em
   dev) tem z-index 99999 e cobria o cabeçalho/X do checkout em tela cheia no
   celular. Mesma solução do LGPD: some enquanto um modal está aberto. Zero efeito
   em PROD (o elemento nem é criado lá). */
body:has(.modal-overlay:not(.hidden-op)) #env-bar { display: none !important; }
body:has(#cart-fab:not(.hidden)) #lgpd-banner { display: none !important; }
/* __CARD747_LGPD_PREFS__: reaberto pelo rodapé ("Preferências de cookies") o aviso tem que
   APARECER mesmo com item no carrinho — senão o clique não faz nada visível (falha silenciosa).
   Só a regra do carrinho é sobreposta; com um modal aberto ele continua escondido (P0). */
body:has(#cart-fab:not(.hidden)) #lgpd-banner.lgpd-prefs { display: block !important; }

/* Sticky category tabs: offset derivado da altura real do header */
#cat-tabs-wrap {
  top: var(--shell-chrome-h, 4.25rem);
}
/* __CARD877_STICKY__: modo mesa: a faixa de consulta gruda ABAIXO do header (as duas em top:0
   se sobrepunham) e a altura dela ja entra no --shell-chrome-h. */
#consulta-faixa {
  top: var(--shell-hdr-h, 4.25rem);
}
/* __CARD877_STICKY__: o titulo da categoria para logo abaixo do header + fileira de abas
   (medido em syncShellChromeHeight), em vez de ficar escondido atras deles. */
#produtos-wrap > section[id^="cat-"] {
  scroll-margin-top: var(--cat-anchor-h, 10rem);
}

/* WA FAB global: canto inferior direito (nao no meio da tela) */
#wa-fab {
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
}
/* __CARD1150_WA_FAB_V1__ (vit-2) com a barra "Ver carrinho" na tela o botao do WhatsApp sobe para
   cima dela. Antes a regra tinha `:not(.wa-fab--cart-active)`, mas essa classe e posta JUSTAMENTE
   quando ha item no carrinho (syncFloatingChrome): a regra nunca valia e o botao cobria o total
   ("R$ 33," cortado). No layout compacto o botao some com carrinho ativo (vitrine-layouts.css). */
body:has(#cart-fab:not(.hidden)) #wa-fab {
  bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 4.5rem));
}

/* __CARD1149_AVISO_FECHADA_V1__ selo "Fechado agora/hoje" no topo do hero. Cores fixas (ambar),
   fora da cor da loja de proposito: aviso de estado nao pode sumir numa marca amarela. */
.hero-fechada {
  display: inline-block;
  margin: 0 auto 0.75rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: #fffbeb;
  color: #78350f;
  font-size: 0.8125rem;
  font-weight: 700;
}
.hero-fechada.hidden { display: none; }



/* __CARD263_WIZARD_V1__: iOS/Android dão zoom automático ao focar input com fonte
   menor que 16px — o zoom estoura a lateral do modal do checkout no celular
   (achado do dono no teste local; o bug já existia no formulário único). 16px SÓ
   nos campos do checkout em tela pequena elimina a CAUSA do zoom sem mexer no
   viewport nem bloquear o pinch-zoom de acessibilidade. */
@media (max-width: 640px) {
  #checkout-overlay input,
  #checkout-overlay select,
  #checkout-overlay textarea {
    font-size: 16px;
  }
}

/* __CARD263_WIZARD_FULLSCREEN__ (pedido do dono no teste mobile): no celular cada
   passo do wizard ocupa a TELA INTEIRA. O sheet curto (passo tem poucos campos)
   deixava o gesto de rolagem vazar pra vitrine atrás — o iOS ignora o
   overflow:hidden do body quando o alvo do toque não tem rolagem própria. Tela
   cheia + overscroll contido no form resolvem os dois. O X do cabeçalho continua
   fechando e voltando pra vitrine. SÓ no modo wizard (.wz-ativo): o formulário
   único de PROD segue byte-a-byte como era. */
@media (max-width: 640px) {
  #checkout-overlay.wz-ativo > div {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  @supports (height: 100dvh) {
    #checkout-overlay.wz-ativo > div {
      height: 100dvh;
      max-height: 100dvh;
    }
  }
  #checkout-overlay.wz-ativo #checkout-form {
    overscroll-behavior-y: contain;
  }
}

/* Reduced motion: sem pulso infinito no WA FAB nem entradas animadas p/ quem
   pediu menos movimento (WCAG 2.3.3). O projeto não tinha nenhum fallback. */
@media (prefers-reduced-motion: reduce) {
  .wa-pulse { animation: none !important; }
  .hero-title, .hero-subtitle, .btn-hero { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { scroll-behavior: auto !important; }
}