/* ==========================================================================
   IDENTIDADE-VISUAL.CSS
   PROJETO: ACHADINHOS DA ALLANA
   VERSÃO: 1.0 — REDESIGN VISUAL
   TECNOLOGIA: CSS3 NATIVO
   OBJETIVO: IDENTIDADE VISUAL GLOBAL, RESPONSIVA E REUTILIZÁVEL

   PRINCÍPIOS:
   - Preservação da paleta institucional por meio de variáveis.
   - Aparência moderna, elegante e comercial.
   - Sem frameworks obrigatórios.
   - Sem estilos inline.
   - Sem dependência de JavaScript para a apresentação visual.
   - Compatibilidade com as classes existentes sempre que possível.
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS — PALETA E CONFIGURAÇÕES CENTRAIS
   Substitua somente os valores de cores pelos HEX oficiais, se necessário.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Cores institucionais */
  --cor-primaria: #F97316;
  --cor-primaria-hover: #EA580C;
  --cor-primaria-escura: #C2410C;
  --cor-primaria-clara: #FFF7ED;

  --cor-secundaria: #142B49;
  --cor-secundaria-hover: #0B1727;

  --cor-destaque: #142B49;
  --cor-destaque-clara: #F3F5F8;

  /* Superfícies */
  --cor-fundo: #F3F5F8;
  --cor-superficie: #FFFFFF;
  --cor-superficie-secundaria: #F8FAFC;
  --cor-superficie-elevada: #FFFFFF;

  /* Texto */
  --cor-texto: #303846;
  --cor-texto-secundario: #475569;
  --cor-texto-suave: #64748B;
  --cor-texto-invertido: #FFFFFF;

  /* Bordas */
  --cor-borda: #E2E8F0;
  --cor-borda-forte: #CBD5E1;

  /* Estados */
  --cor-sucesso: #10B981;
  --cor-sucesso-fundo: #ECFDF5;

  --cor-alerta: #F59E0B;
  --cor-alerta-fundo: #FEF3C7;

  --cor-erro: #EF4444;
  --cor-erro-fundo: #FEF2F2;

  --cor-info: #3B82F6;
  --cor-info-fundo: #EFF6FF;

  /* Foco acessível */
  --cor-foco: #F97316;
  --anel-foco: 0 0 0 3px rgb(249 115 22 / 22%);

  /* Gradientes institucionais */
  --gradiente-primario: linear-gradient(
    135deg,
    var(--cor-primaria) 0%,
    var(--cor-primaria-escura) 100%
  );

  --gradiente-destaque: linear-gradient(
    135deg,
    var(--cor-superficie) 0%,
    var(--cor-primaria-clara) 100%
  );

  --gradiente-superficie: linear-gradient(
    180deg,
    var(--cor-superficie) 0%,
    var(--cor-fundo) 100%
  );

  /* Tipografia */
  --fonte-principal: "Inter", "Segoe UI", Arial, sans-serif;
  --fonte-titulos: "Inter", "Segoe UI", Arial, sans-serif;

  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-md: 1.0625rem;
  --texto-lg: 1.25rem;
  --texto-xl: 1.5rem;
  --texto-2xl: 2rem;
  --texto-3xl: 2.75rem;
  --texto-4xl: 3.5rem;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-extra-bold: 800;

  --linha-texto: 1.65;
  --linha-titulo: 1.15;

  /* Espaçamento */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.25rem;
  --espaco-6: 1.5rem;
  --espaco-8: 2rem;
  --espaco-10: 2.5rem;
  --espaco-12: 3rem;
  --espaco-16: 4rem;

  /* Dimensões */
  --largura-conteudo: 1200px;
  --largura-leitura: 760px;
  --altura-header: 76px;

  /* Bordas e raios */
  --borda-fina: 1px solid var(--cor-borda);
  --raio-xs: 5px;
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 18px;
  --raio-xl: 24px;
  --raio-circular: 999px;

  /* Sombras */
  --sombra-xs: 0 1px 3px rgb(30 24 24 / 5%);
  --sombra-sm: 0 4px 12px rgb(30 24 24 / 6%);
  --sombra-md: 0 10px 28px rgb(30 24 24 / 9%);
  --sombra-lg: 0 18px 45px rgb(30 24 24 / 12%);
  --sombra-header: 0 3px 16px rgb(30 24 24 / 5%);

  /* Movimento */
  --duracao-rapida: 140ms;
  --duracao-padrao: 220ms;
  --duracao-lenta: 350ms;
  --curva-suave: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Camadas */
  --nivel-base: 1;
  --nivel-header: 100;
  --nivel-menu: 200;
  --nivel-flutuante: 300;
  --nivel-toast: 400;
  --nivel-cookie: 500;
  --nivel-modal: 1000;

  /* =========================================================
     PONTE DE COMPATIBILIDADE (PARA O PAINEL ADMIN)
     ========================================================= */
  --cor-laranja: var(--cor-primaria);
  --cor-azul-marinho: var(--cor-secundaria);
  --cor-verde: var(--cor-sucesso);
  --cor-cinza-grafite: var(--cor-texto);
  
  --bg-body: var(--cor-fundo);
  --bg-card: var(--cor-superficie);
  --bg-secundario: var(--cor-superficie-secundaria);
  
  --texto-principal: var(--cor-texto);
  --texto-titulos: var(--cor-texto);
  --texto-suave: var(--cor-texto-suave);
  
  --borda-padrao: var(--cor-borda);
  
  --sombra-card: var(--sombra-sm);
  --sombra-flutuante: var(--sombra-md);
}

/* =========================================================
     ATIVAÇÃO DA PONTE DE COMPATIBILIDADE NO MODO NOTURNO
     ========================================================= */
  body.dark-mode {
    --bg-body: var(--cor-fundo);
    --bg-card: var(--cor-superficie);
    --bg-secundario: var(--cor-superficie-secundaria);
    
    --texto-principal: var(--cor-texto);
    --texto-titulos: var(--cor-texto);
    --texto-suave: var(--cor-texto-suave);
    
    --borda-padrao: var(--cor-borda);
    
    --sombra-card: var(--sombra-md);
  }


/* ==========================================================================
   02. RESET E BASE GLOBAL
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-header) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-principal);
  font-size: var(--texto-base);
  font-weight: var(--peso-normal);
  line-height: var(--linha-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--fonte-principal);
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

img {
  display: block;
  height: auto;
}

button,
input,
select,
textarea {
  font-size: inherit;
}

button,
select {
  cursor: pointer;
}

button {
  color: inherit;
}

button:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

a {
  color: var(--cor-primaria);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition:
    color var(--duracao-rapida) ease,
    opacity var(--duracao-rapida) ease;
}

a:hover {
  color: var(--cor-primaria-hover);
}

p {
  margin: 0 0 var(--espaco-4);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--cor-texto);
  font-family: var(--fonte-titulos);
  font-weight: var(--peso-bold);
  line-height: var(--linha-titulo);
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(2rem, 5vw, var(--texto-4xl));
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, var(--texto-2xl));
}

h3 {
  font-size: clamp(1.15rem, 2vw, var(--texto-lg));
}

ul,
ol {
  padding-left: 1.4em;
}

::selection {
  color: var(--cor-texto-invertido);
  background: var(--cor-primaria);
}

:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
}


/* ==========================================================================
   03. LAYOUT E CONTÊINERES
   ========================================================================== */

.container,
.container-global,
.header-container,
.top-bar-container,
.footer-grid,
.main-review,
.main-404 {
  width: min(calc(100% - 2rem), var(--largura-conteudo));
  margin-inline: auto;
}

main {
  min-height: 50vh;
}

section {
  scroll-margin-top: calc(var(--altura-header) + 1rem);
}

.secao-global,
.vitrine-produtos,
.categorias-rapidas,
.produtos-semelhantes,
.produto-outras-lojas {
  margin-block: clamp(2.5rem, 6vw, 5rem);
}

.secao-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espaco-4);
  margin-bottom: var(--espaco-8);
}

.secao-titulo {
  margin-bottom: var(--espaco-2);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
}

.secao-descricao {
  max-width: 650px;
  margin-bottom: 0;
  color: var(--cor-texto-secundario);
}

.texto-secundario {
  color: var(--cor-texto-secundario);
}

.texto-suave {
  color: var(--cor-texto-suave);
}

.texto-centralizado {
  text-align: center;
}


/* ==========================================================================
   04. BARRA SUPERIOR E CABEÇALHO
   ========================================================================== */

.header-global {
  position: relative;
  z-index: var(--nivel-header);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-header);
}

.header-top-bar {
  color: var(--cor-texto-invertido);
  background: var(--gradiente-primario);
  font-size: var(--texto-xs);
}

.top-bar-container {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  padding-block: 0.35rem;
}

.top-bar-texto {
  margin: 0;
  color: inherit;
  font-weight: var(--peso-medium);
}

.top-bar-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-4);
}

.top-bar-links a {
  color: inherit;
  opacity: 0.9;
}

.top-bar-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.header-container {
  display: grid;
  min-height: var(--altura-header);
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: var(--espaco-3);
}

.logo-link {
  display: inline-flex;
  max-width: 220px;
  align-items: center;
  gap: var(--espaco-2);
}

.logo-img {
  width: auto;
  max-width: 100%;
  max-height: 58px;
  object-fit: contain;
  object-position: left center;
}

.header-busca {
  width: 100%;
  max-width: 560px;
  justify-self: center;
}

.form-busca {
  display: flex;
  width: 100%;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-circular);
  background: var(--cor-superficie);
  transition:
    border-color var(--duracao-padrao) ease,
    box-shadow var(--duracao-padrao) ease;
}

.form-busca:focus-within {
  border-color: var(--cor-primaria);
  box-shadow: var(--anel-foco);
}

.input-padrao {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  transition:
    border-color var(--duracao-padrao) ease,
    box-shadow var(--duracao-padrao) ease;
}

.input-padrao::placeholder {
  color: var(--cor-texto-suave);
  opacity: 1;
}

.input-padrao:focus {
  border-color: var(--cor-primaria);
  outline: none;
  box-shadow: var(--anel-foco);
}

.form-busca .input-padrao {
  min-height: 46px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.btn-busca {
  display: inline-grid;
  min-width: 48px;
  place-items: center;
  padding-inline: 1rem;
  border: 0;
  background: var(--cor-primaria);
  color: var(--cor-texto-invertido);
  transition: background var(--duracao-padrao) ease;
}

.btn-busca:hover {
  background: var(--cor-primaria-hover);
}

.nav-global {
  border-top: var(--borda-fina);
  background: var(--cor-superficie);
}

.nav-global ul {
  display: flex;
  width: min(calc(100% - 2rem), var(--largura-conteudo));
  min-height: 48px;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.nav-global li {
  margin: 0;
}

.nav-global a {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  transition: color var(--duracao-padrao) ease;
}

.nav-global a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: var(--raio-circular);
  background: var(--cor-primaria);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duracao-padrao) var(--curva-suave);
}

.nav-global a:hover,
.nav-global a[aria-current="page"] {
  color: var(--cor-primaria);
}

.nav-global a:hover::after,
.nav-global a[aria-current="page"]::after {
  transform: scaleX(1);
}

.btn-menu-mobile {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: var(--borda-fina);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

.icone-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   05. BOTÕES GLOBAIS
   ========================================================================== */

.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--duracao-padrao) ease,
    background var(--duracao-padrao) ease,
    border-color var(--duracao-padrao) ease,
    box-shadow var(--duracao-padrao) ease,
    transform var(--duracao-padrao) var(--curva-suave);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primario,
.btn-conversao {
  border-color: var(--cor-primaria);
  background: var(--gradiente-primario);
  color: var(--cor-texto-invertido);
  box-shadow: 0 5px 14px rgb(249 115 22 / 15%);
}

.btn-primario:hover,
.btn-conversao:hover {
  border-color: var(--cor-primaria-hover);
  background: var(--cor-primaria-hover);
  color: var(--cor-texto-invertido);
  box-shadow: var(--sombra-sm);
}

.btn-secundario {
  border-color: var(--cor-borda-forte);
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

.btn-secundario:hover {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria-escura);
}

.btn-destaque {
  border-color: var(--cor-destaque);
  background: var(--cor-destaque);
  color: #29221A;
}

.btn-destaque:hover {
  filter: brightness(0.96);
}

.btn-texto {
  min-height: auto;
  padding: 0.35rem 0.5rem;
  border: 0;
  background: transparent;
  color: var(--cor-primaria);
}

.btn-texto:hover {
  background: var(--cor-primaria-clara);
}

.btn:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  box-shadow: none;
  transform: none;
}


/* ==========================================================================
   06. HOME — BANNER PRINCIPAL
   ========================================================================== */

.banner-destaque {
  position: relative;
  display: grid;
  min-height: 390px;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  margin: clamp(1.5rem, 4vw, 3rem) auto;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid rgb(20 43 73 / 10%);
  border-radius: var(--raio-xl);
  background: var(--gradiente-destaque);
  box-shadow: var(--sombra-sm);
}

.banner-conteudo {
  position: relative;
  z-index: var(--nivel-base);
  max-width: 600px;
}

.banner-conteudo h1 {
  max-width: 650px;
  margin-bottom: var(--espaco-5);
  font-size: clamp(2.1rem, 4.8vw, 3.75rem);
  letter-spacing: -0.045em;
}

.banner-conteudo p {
  max-width: 540px;
  margin-bottom: var(--espaco-6);
  color: var(--cor-texto-secundario);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.75;
}

.banner-imagem {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

.banner-imagem img {
  width: 100%;
  max-width: 480px;
  max-height: 360px;
  border-radius: var(--raio-lg);
  object-fit: contain;
}

.badge-desconto {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid rgb(249 115 22 / 12%);
  border-radius: var(--raio-circular);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria-escura);
  font-size: var(--texto-xs);
  font-weight: var(--peso-bold);
  line-height: 1.2;
}


/* ==========================================================================
   07. CATEGORIAS
   ========================================================================== */

.categorias-rapidas {
  padding-block: var(--espaco-2);
}

.grid-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
  gap: var(--espaco-4);
}

.card-categoria {
  display: flex;
  min-height: 145px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
  border: var(--borda-fina);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  text-align: center;
  box-shadow: var(--sombra-xs);
  transition:
    transform var(--duracao-padrao) var(--curva-suave),
    border-color var(--duracao-padrao) ease,
    box-shadow var(--duracao-padrao) ease;
}

.card-categoria:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
  box-shadow: var(--sombra-md);
  transform: translateY(-4px);
}

.cat-icone {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: var(--raio-md);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
  font-size: 1.5rem;
  transition:
    background var(--duracao-padrao) ease,
    color var(--duracao-padrao) ease;
}

.card-categoria:hover .cat-icone {
  background: var(--cor-primaria);
  color: var(--cor-texto-invertido);
}

#outrasCategorias {
  max-width: 340px;
  margin-top: var(--espaco-6);
}


/* ==========================================================================
   08. VITRINES E CARDS DE PRODUTOS
   ========================================================================== */

.grid-produtos,
#listaProdutosHome {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espaco-5);
}

.card-produto,
.produto-card,
.card-vitrine {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: var(--borda-fina);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  box-shadow: var(--sombra-xs);
  transition:
    border-color var(--duracao-padrao) ease,
    box-shadow var(--duracao-padrao) ease,
    transform var(--duracao-padrao) var(--curva-suave);
}

.card-produto:hover,
.produto-card:hover,
.card-vitrine:hover {
  border-color: var(--cor-borda-forte);
  box-shadow: var(--sombra-md);
  transform: translateY(-3px);
}

.card-produto a,
.produto-card a,
.card-vitrine a {
  color: inherit;
}

.card-produto-imagem,
.produto-card-imagem {
  position: relative;
  display: grid;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  padding: var(--espaco-4);
  background: var(--cor-superficie-secundaria);
}

.card-produto-imagem img,
.produto-card-imagem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--duracao-lenta) var(--curva-suave);
}

.card-produto:hover .card-produto-imagem img,
.produto-card:hover .produto-card-imagem img {
  transform: scale(1.035);
}

.card-produto-conteudo,
.produto-card-conteudo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espaco-2);
  padding: var(--espaco-4);
}

.card-produto-titulo,
.produto-card-titulo {
  display: -webkit-box;
  overflow: hidden;
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card-produto-descricao,
.produto-card-descricao {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  line-height: 1.6;
}

.preco-antigo {
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  text-decoration: line-through;
}

.preco-atual,
.preco-atual-destaque {
  color: var(--cor-primaria);
  font-size: var(--texto-lg);
  font-weight: var(--peso-extra-bold);
  line-height: 1.2;
}

.preco-parcelamento {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
}

.card-produto .btn,
.produto-card .btn,
.card-vitrine .btn {
  width: 100%;
  margin-top: auto;
}

.produto-curadoria {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-logistica.full { 
  color: #FFFFFF;
  background-color: #00A650;
  border: none;
}

.badge-logistica.prime { 
  color: #FFFFFF;
  background-color: #00A8E1;
  border: none;
}


/* ==========================================================================
   09. PÁGINAS DE PRODUTO — ESTRUTURA PRINCIPAL
   ========================================================================== */

.main-review {
  padding-block: var(--espaco-8) var(--espaco-16);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-6);
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
}

.breadcrumbs a {
  color: var(--cor-texto-secundario);
}

.breadcrumbs a:hover {
  color: var(--cor-primaria);
}

.produto-apresentacao {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: var(--espaco-12);
}

.produto-galeria,
.produto-checkout-info {
  min-width: 0;
}

.produto-galeria {
  position: relative;
}

.imagem-principal {
  display: grid;
  min-height: 360px;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  padding: var(--espaco-6);
  border: var(--borda-fina);
  border-radius: var(--raio-xl);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-xs);
}

.imagem-principal img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
}

.badge-logistica {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-circular);
  background: var(--cor-superficie);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
}

.imagens-miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  margin-top: var(--espaco-4);
}

.miniatura {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  padding: 0.3rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  cursor: pointer;
  transition:
    border-color var(--duracao-padrao) ease,
    box-shadow var(--duracao-padrao) ease;
}

.miniatura:hover,
.miniatura.ativa,
.miniatura[aria-pressed="true"] {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 2px rgb(249 115 22 / 12%);
}

.miniatura img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.produto-prova-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-3);
  margin-block: var(--espaco-4);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

.vendas {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
}

.produto-titulo-grande {
  margin-bottom: var(--espaco-4);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.2;
}

.produto-alertas {
  display: grid;
  gap: var(--espaco-3);
  margin-block: var(--espaco-5);
}

.alerta-estoque,
.alerta-loja {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  font-size: var(--texto-sm);
}

.alerta-estoque {
  border-color: rgb(149 100 26 / 20%);
  background: var(--cor-alerta-fundo);
  color: var(--cor-alerta);
}

.alerta-loja {
  border-color: rgb(38 115 77 / 20%);
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
}


/* ==========================================================================
   10. VARIAÇÕES DO PRODUTO
   ========================================================================== */

.produto-variacoes {
  display: grid;
  gap: var(--espaco-5);
  margin-block: var(--espaco-6);
}

.variacao-grupo {
  display: grid;
  gap: var(--espaco-3);
}

.variacao-titulo {
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
}

.variacao-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}

.btn-variacao {
  display: inline-flex;
  min-width: 44px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  transition:
    border-color var(--duracao-padrao) ease,
    background var(--duracao-padrao) ease,
    color var(--duracao-padrao) ease;
}

.btn-variacao:hover {
  border-color: var(--cor-primaria);
}

.btn-variacao.ativa,
.btn-variacao[aria-pressed="true"],
.btn-variacao[aria-checked="true"] {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria-escura);
  box-shadow: inset 0 0 0 1px var(--cor-primaria);
}


/* ==========================================================================
   11. PREÇOS E CONVERSÃO
   ========================================================================== */

.produto-caixa-preco {
  display: grid;
  gap: var(--espaco-3);
  margin-block: var(--espaco-5);
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid rgb(249 115 22 / 15%);
  border-radius: var(--raio-lg);
  background: var(--gradiente-destaque);
}

.preco-atual-destaque {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem;
  color: var(--cor-primaria-escura);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  letter-spacing: -0.04em;
}

.preco-atual-destaque .moeda {
  font-size: 0.42em;
  font-weight: var(--peso-semibold);
  letter-spacing: 0;
}

.preco-atual-destaque .valor {
  font-weight: var(--peso-extra-bold);
}

.preco-atual-destaque .centavos {
  align-self: flex-start;
  padding-top: 0.18em;
  font-size: 0.48em;
  font-weight: var(--peso-bold);
}

.btn-comprar-grande {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-3);
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: var(--raio-md);
  background: var(--gradiente-primario);
  color: var(--cor-texto-invertido);
  font-size: var(--texto-base);
  font-weight: var(--peso-bold);
  text-align: center;
  box-shadow: 0 7px 18px rgb(249 115 22 / 18%);
  transition:
    box-shadow var(--duracao-padrao) ease,
    transform var(--duracao-padrao) var(--curva-suave),
    background var(--duracao-padrao) ease;
}

.btn-comprar-grande:hover {
  background: var(--cor-primaria-hover);
  color: var(--cor-texto-invertido);
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}

.aviso-seguranca {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  margin-top: var(--espaco-4);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  line-height: 1.6;
}

.btn-loja-secundaria {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  transition:
    border-color var(--duracao-padrao) ease,
    background var(--duracao-padrao) ease;
}

.btn-loja-secundaria:hover {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria-escura);
}

.nome-loja {
  color: var(--cor-texto);
  font-weight: var(--peso-semibold);
}

.preco-loja {
  color: var(--cor-primaria);
  font-weight: var(--peso-bold);
}

.btn-esgotado {
  border-color: var(--cor-borda);
  background: var(--cor-superficie-secundaria);
  color: var(--cor-texto-suave);
  box-shadow: none;
  cursor: not-allowed;
}


/* ==========================================================================
   12. CURADORIA, ANÁLISE E PRÓS/CONTRAS
   ========================================================================== */

.produto-analise-tecnica {
  display: grid;
  gap: var(--espaco-8);
  margin-block: var(--espaco-12);
}

.bloco-curadoria,
.bloco-pros-contras {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: var(--borda-fina);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-xs);
}

.bloco-curadoria h2,
.bloco-curadoria h3,
.bloco-pros-contras h2,
.bloco-pros-contras h3 {
  margin-bottom: var(--espaco-4);
}

.bloco-curadoria p:last-child,
.bloco-pros-contras p:last-child {
  margin-bottom: 0;
}

.bloco-pros-contras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-5);
}

.pros,
.contras {
  min-width: 0;
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
}

.pros {
  border-color: rgb(38 115 77 / 20%);
  background: var(--cor-sucesso-fundo);
}

.contras {
  border-color: rgb(149 100 26 / 20%);
  background: var(--cor-alerta-fundo);
}

.pros h3 {
  color: var(--cor-sucesso);
}

.contras h3 {
  color: var(--cor-alerta);
}

.pros ul,
.contras ul {
  display: grid;
  gap: var(--espaco-3);
  margin: 0;
  padding-left: 1.3rem;
}

.pros li,
.contras li {
  padding-left: 0.2rem;
  color: var(--cor-texto);
  line-height: 1.65;
}

.pros li::marker {
  color: var(--cor-sucesso);
}

.contras li::marker {
  color: var(--cor-alerta);
}


/* ==========================================================================
   13. OUTRAS LOJAS E PRODUTOS SEMELHANTES
   ========================================================================== */

.lista-outras-lojas {
  display: grid;
  gap: var(--espaco-3);
}

.lista-outras-lojas > * {
  min-width: 0;
}

.item-outra-loja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  padding: var(--espaco-4);
  border: var(--borda-fina);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  transition:
    border-color var(--duracao-padrao) ease,
    box-shadow var(--duracao-padrao) ease;
}

.item-outra-loja:hover {
  border-color: var(--cor-borda-forte);
  box-shadow: var(--sombra-xs);
}

.produtos-semelhantes .grid-produtos {
  margin-top: var(--espaco-5);
}

.nome-loja {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
}

/* Estilo padrão (cinza) para lojas não listadas abaixo */
.nome-loja::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: var(--raio-circular);
  background-color: var(--cor-borda-forte);
}

/* 1. Varejo Gigante e Marketplaces */
.btn-loja-secundaria[data-loja*="Amazon" i] .nome-loja::before { background-color: #FF9900; }
.btn-loja-secundaria[data-loja*="Shopee" i] .nome-loja::before { background-color: #EE4D2D; }
.btn-loja-secundaria[data-loja*="Mercado" i] .nome-loja::before { background-color: #FFE600; }
.btn-loja-secundaria[data-loja*="AliExpress" i] .nome-loja::before { background-color: #FF4747; }
.btn-loja-secundaria[data-loja*="Magalu" i] .nome-loja::before { background-color: #0086FF; }
.btn-loja-secundaria[data-loja*="Banggood" i] .nome-loja::before { background-color: #FF6600; }
.btn-loja-secundaria[data-loja*="Fast Shop" i] .nome-loja::before { background-color: #E30014; }
.btn-loja-secundaria[data-loja*="Best Buy" i] .nome-loja::before { background-color: #0046BE; }
.btn-loja-secundaria[data-loja*="Polishop" i] .nome-loja::before { background-color: #E3000F; }

/* 2. Saúde, Beleza e Perfumaria */
.btn-loja-secundaria[data-loja*="iHerb" i] .nome-loja::before { background-color: #469739; }
.btn-loja-secundaria[data-loja*="Sephora" i] .nome-loja::before { background-color: #000000; }
.btn-loja-secundaria[data-loja*="Época" i] .nome-loja::before { background-color: #E91E63; }
.btn-loja-secundaria[data-loja*="Beleza na Web" i] .nome-loja::before { background-color: #5A2D82; }
.btn-loja-secundaria[data-loja*="Ulta" i] .nome-loja::before { background-color: #F89A1E; }

/* 3. Informática, Eletrônicos e Áudio/Vídeo */
.btn-loja-secundaria[data-loja*="KaBuM" i] .nome-loja::before { background-color: #FF6500; }
.btn-loja-secundaria[data-loja*="Dell" i] .nome-loja::before { background-color: #007DB8; }
.btn-loja-secundaria[data-loja*="B&H" i] .nome-loja::before { background-color: #006600; }
.btn-loja-secundaria[data-loja*="Adorama" i] .nome-loja::before { background-color: #8C1515; }
.btn-loja-secundaria[data-loja*="GoPro" i] .nome-loja::before { background-color: #00AEEF; }
.btn-loja-secundaria[data-loja*="DJI" i] .nome-loja::before { background-color: #000000; }
.btn-loja-secundaria[data-loja*="Sweetwater" i] .nome-loja::before { background-color: #F58220; }
.btn-loja-secundaria[data-loja*="Guitar Center" i] .nome-loja::before { background-color: #CC0000; }

/* 4. Casa, Móveis e Ferramentas */
.btn-loja-secundaria[data-loja*="Mobly" i] .nome-loja::before { background-color: #FF5A00; }
.btn-loja-secundaria[data-loja*="MadeiraMadeira" i] .nome-loja::before { background-color: #FF6500; }
.btn-loja-secundaria[data-loja*="Wayfair" i] .nome-loja::before { background-color: #7F187F; }
.btn-loja-secundaria[data-loja*="Leroy" i] .nome-loja::before { background-color: #78C143; }
.btn-loja-secundaria[data-loja*="KitchenAid" i] .nome-loja::before { background-color: #E21B23; }
.btn-loja-secundaria[data-loja*="Emma" i] .nome-loja::before { background-color: #FFA500; }

/* 5. Moda, Esporte e Acessórios */
.btn-loja-secundaria[data-loja*="Netshoes" i] .nome-loja::before { background-color: #5A2D82; }
.btn-loja-secundaria[data-loja*="Centauro" i] .nome-loja::before { background-color: #E3001B; }
.btn-loja-secundaria[data-loja*="Decathlon" i] .nome-loja::before { background-color: #0082C3; }
.btn-loja-secundaria[data-loja*="Nike" i] .nome-loja::before { background-color: #111111; }
.btn-loja-secundaria[data-loja*="Farfetch" i] .nome-loja::before { background-color: #000000; }
.btn-loja-secundaria[data-loja*="Vivara" i] .nome-loja::before { background-color: #E1C28F; }
.btn-loja-secundaria[data-loja*="Garmin" i] .nome-loja::before { background-color: #000000; }
.btn-loja-secundaria[data-loja*="The North Face" i] .nome-loja::before { background-color: #ED1C24; }

/* 6. Pet Shop, Brinquedos e Automotivo */
.btn-loja-secundaria[data-loja*="Petz" i] .nome-loja::before { background-color: #FFD400; }
.btn-loja-secundaria[data-loja*="Cobasi" i] .nome-loja::before { background-color: #263C96; }
.btn-loja-secundaria[data-loja*="LEGO" i] .nome-loja::before { background-color: #D11013; }
.btn-loja-secundaria[data-loja*="PneuStore" i] .nome-loja::before { background-color: #FF5A00; }


/* ==========================================================================
   14. RODAPÉ
   ========================================================================== */

.footer-global {
  margin-top: var(--espaco-16);
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
}

.footer-trust-bar {
  padding-block: var(--espaco-6);
  border-bottom: var(--borda-fina);
  background: var(--cor-superficie-secundaria);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-5);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
}

.trust-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--raio-md);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
  font-size: 1.15rem;
}

.trust-item strong {
  display: block;
  color: var(--cor-texto);
  font-size: var(--texto-sm);
}

.trust-item p {
  margin: 0;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: var(--espaco-12);
}

.footer-coluna {
  min-width: 0;
}

.footer-coluna h2,
.footer-coluna h3 {
  margin-bottom: var(--espaco-4);
  font-size: var(--texto-base);
}

.footer-coluna p {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
  line-height: 1.8;
}

.sobre-coluna {
  max-width: 360px;
}

.footer-logo {
  display: inline-block;
  width: auto;
  max-width: 200px;
  max-height: 64px;
  margin-bottom: var(--espaco-4);
  object-fit: contain;
  object-position: left center;
}

.footer-coluna ul {
  display: grid;
  gap: var(--espaco-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-coluna li {
  margin: 0;
}

.footer-coluna li a {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

.footer-coluna li a:hover {
  color: var(--cor-primaria);
}

.vip-coluna {
  padding: var(--espaco-5);
  border: 1px solid rgb(20 43 73 / 12%);
  border-radius: var(--raio-lg);
  background: var(--gradiente-destaque);
}

.footer-bottom {
  padding: var(--espaco-5) 1rem;
  border-top: var(--borda-fina);
  background: var(--cor-superficie-secundaria);
  text-align: center;
}

.disclaimer-afiliado {
  max-width: 900px;
  margin: 0 auto var(--espaco-3);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  line-height: 1.7;
}

.copyright {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
}


/* ==========================================================================
   15. ÍCONES E REDES SOCIAIS
   ========================================================================== */

.redes-sociais,
.social-links,
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-3);
}

.redes-sociais a,
.social-links a,
.footer-social a {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: var(--cor-texto-secundario);
  transition:
    color var(--duracao-padrao) ease,
    border-color var(--duracao-padrao) ease,
    background var(--duracao-padrao) ease,
    transform var(--duracao-padrao) ease;
}

.redes-sociais a:hover,
.social-links a:hover,
.footer-social a:hover {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
  transform: translateY(-2px);
}

.redes-sociais svg,
.social-links svg,
.footer-social svg {
  width: 20px;
  height: 20px;
}

.icone-social {
  display: inline-flex;
  width: 1.25em;
  height: 1.25em;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}


/* ==========================================================================
   16. CONTROLES FLUTUANTES E NOTIFICAÇÕES
   ========================================================================== */

.btn-flutuante-tema {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: var(--nivel-flutuante);
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-circular);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  box-shadow: var(--sombra-md);
  transition:
    transform var(--duracao-padrao) ease,
    background var(--duracao-padrao) ease;
}

.btn-flutuante-tema:hover {
  background: var(--cor-superficie-secundaria);
  transform: translateY(-2px);
}

.toast-container {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + 58px + env(safe-area-inset-bottom));
  z-index: var(--nivel-toast);
  display: grid;
  width: min(380px, calc(100vw - 2rem));
  gap: var(--espaco-3);
  pointer-events: none;
}

.toast {
  padding: var(--espaco-4);
  border: var(--borda-fina);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--duracao-padrao) ease,
    transform var(--duracao-padrao) ease;
}

.toast.ativo {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ==========================================================================
   17. BANNER DE COOKIES
   ========================================================================== */

.cookie-banner {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: var(--nivel-cookie);
  display: grid;
  width: min(760px, calc(100% - 2rem));
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espaco-5);
  margin-inline: auto;
  padding: var(--espaco-5);
  border: var(--borda-fina);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--duracao-padrao) ease,
    visibility var(--duracao-padrao) ease,
    transform var(--duracao-padrao) ease;
}

.cookie-banner.ativo {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cookie-banner p {
  margin: 0;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

.cookie-banner a {
  color: var(--cor-primaria);
  text-decoration: underline;
}


/* ==========================================================================
   18. MODAIS
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--nivel-modal);
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 1rem;
  background: rgb(25 20 22 / 56%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duracao-padrao) ease,
    visibility var(--duracao-padrao) ease;
}

.modal-overlay.ativo {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  width: min(560px, 100%);
  max-height: min(85vh, 800px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: var(--raio-xl);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  box-shadow: var(--sombra-lg);
  transform: translateY(8px) scale(0.99);
  transition: transform var(--duracao-padrao) var(--curva-suave);
}

.modal-overlay.ativo .modal-content {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  padding: var(--espaco-5) var(--espaco-6);
  border-bottom: var(--borda-fina);
}

.modal-header h2 {
  font-size: var(--texto-lg);
}

.modal-fechar {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-texto-secundario);
}

.modal-fechar:hover {
  border-color: var(--cor-borda);
  background: var(--cor-superficie-secundaria);
  color: var(--cor-texto);
}

.modal-body {
  padding: var(--espaco-6);
}


/* ==========================================================================
   19. PÁGINA 404
   ========================================================================== */

.main-404 {
  display: grid;
  min-height: 65vh;
  place-items: center;
  padding-block: var(--espaco-12);
}

.bloco-404 {
  width: min(100%, 680px);
  padding: clamp(2rem, 6vw, 4rem);
  border: var(--borda-fina);
  border-radius: var(--raio-xl);
  background: var(--cor-superficie);
  text-align: center;
  box-shadow: var(--sombra-md);
}

.erro-numero {
  margin-bottom: var(--espaco-4);
  background: var(--gradiente-primario);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: clamp(5rem, 20vw, 9rem);
  font-weight: var(--peso-extra-bold);
  letter-spacing: -0.08em;
  line-height: 0.95;
}

.bloco-404 h1 {
  margin-bottom: var(--espaco-4);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}

.bloco-404 p {
  max-width: 480px;
  margin: 0 auto var(--espaco-6);
  color: var(--cor-texto-secundario);
}


/* ==========================================================================
   20. ESTADOS GERAIS E FEEDBACK
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: 0.35rem 0.65rem;
  border-radius: var(--raio-circular);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  line-height: 1.3;
}

.badge-sucesso {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
}

.badge-alerta {
  background: var(--cor-alerta-fundo);
  color: var(--cor-alerta);
}

.badge-erro {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
}

.badge-info {
  background: var(--cor-info-fundo);
  color: var(--cor-info);
}

.estado-vazio {
  padding: var(--espaco-12) var(--espaco-5);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  text-align: center;
}

.estado-vazio p {
  color: var(--cor-texto-secundario);
}

[hidden] {
  display: none !important;
}


/* ==========================================================================
   21. MODO ESCURO
   O JavaScript existente deve continuar alternando body.dark-mode.
   ========================================================================== */

body.dark-mode {
  color-scheme: dark;

  --cor-fundo: #0F172A;
  --cor-superficie: #1E293B;
  --cor-superficie-secundaria: #334155;
  --cor-superficie-elevada: #1E293B;

  --cor-texto: #F8FAFC;
  --cor-texto-secundario: #CBD5E1;
  --cor-texto-suave: #94A3B8;
  --cor-texto-invertido: #FFFFFF;

  --cor-borda: #334155;
  --cor-borda-forte: #475569;

  --cor-primaria-clara: #431407;
  --cor-destaque-clara: #0B1727;

  --cor-sucesso-fundo: #064E3B;
  --cor-alerta-fundo: #451A03;
  --cor-erro-fundo: #4C1D95;
  --cor-info-fundo: #1E3A8A;

  --sombra-xs: 0 1px 3px rgb(0 0 0 / 15%);
  --sombra-sm: 0 4px 12px rgb(0 0 0 / 18%);
  --sombra-md: 0 10px 28px rgb(0 0 0 / 25%);
  --sombra-lg: 0 18px 45px rgb(0 0 0 / 35%);
  --sombra-header: 0 3px 16px rgb(0 0 0 / 20%);

  --gradiente-destaque: linear-gradient(
    135deg,
    var(--cor-superficie) 0%,
    var(--cor-primaria-clara) 100%
  );

  --gradiente-superficie: linear-gradient(
    180deg,
    var(--cor-superficie) 0%,
    var(--cor-fundo) 100%
  );
}

body.dark-mode .header-global,
body.dark-mode .nav-global,
body.dark-mode .footer-global,
body.dark-mode .form-busca,
body.dark-mode .card-categoria,
body.dark-mode .card-produto,
body.dark-mode .produto-card,
body.dark-mode .card-vitrine,
body.dark-mode .imagem-principal,
body.dark-mode .miniatura,
body.dark-mode .produto-caixa-preco,
body.dark-mode .bloco-curadoria,
body.dark-mode .bloco-pros-contras,
body.dark-mode .item-outra-loja,
body.dark-mode .modal-content,
body.dark-mode .cookie-banner,
body.dark-mode .toast,
body.dark-mode .bloco-404 {
  background-color: var(--cor-superficie);
}

body.dark-mode .banner-destaque {
  border-color: var(--cor-borda);
  background: var(--gradiente-destaque);
}

body.dark-mode .banner-conteudo h1,
body.dark-mode .banner-conteudo p,
body.dark-mode .produto-titulo-grande,
body.dark-mode .secao-titulo,
body.dark-mode .card-produto-titulo,
body.dark-mode .produto-card-titulo,
body.dark-mode .footer-coluna h2,
body.dark-mode .footer-coluna h3 {
  color: var(--cor-texto);
}

body.dark-mode .badge-desconto {
  border-color: var(--cor-borda);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
}

body.dark-mode .pros {
  border-color: #047857;
  background: var(--cor-sucesso-fundo);
}

body.dark-mode .contras {
  border-color: #B45309;
  background: var(--cor-alerta-fundo);
}

body.dark-mode .btn-secundario,
body.dark-mode .btn-loja-secundaria,
body.dark-mode .btn-flutuante-tema,
body.dark-mode .modal-fechar,
body.dark-mode .btn-menu-mobile {
  border-color: var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

body.dark-mode .input-padrao {
  border-color: var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

body.dark-mode .footer-trust-bar,
body.dark-mode .footer-bottom {
  border-color: var(--cor-borda);
  background: var(--cor-superficie-secundaria);
}

body.dark-mode .nav-global a {
  color: var(--cor-texto-secundario);
}

body.dark-mode .nav-global a:hover,
body.dark-mode .nav-global a[aria-current="page"] {
  color: var(--cor-primaria);
}


/* ==========================================================================
   22. RESPONSIVIDADE — TABLETS
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --altura-header: 70px;
  }

  .header-container {
    grid-template-columns: auto minmax(140px, 1fr) auto;
    gap: var(--espaco-4);
  }

  .grid-produtos,
  #listaProdutosHome {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .banner-destaque {
    min-height: 330px;
    gap: var(--espaco-6);
    padding: var(--espaco-8);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .produto-apresentacao {
    gap: var(--espaco-6);
  }
}


/* ==========================================================================
   23. RESPONSIVIDADE — CELULARES
   ========================================================================== */

@media (max-width: 760px) {
  :root {
    --altura-header: auto;
  }

  .container,
  .container-global,
  .header-container,
  .top-bar-container,
  .footer-grid,
  .main-review,
  .main-404 {
    width: min(calc(100% - 1.25rem), var(--largura-conteudo));
  }

  .top-bar-container {
    justify-content: center;
    text-align: center;
  }

  .top-bar-links {
    display: none;
  }

  .header-container {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--espaco-3);
    padding-block: var(--espaco-3);
  }

  .logo-link {
    max-width: 140px;
  }

  .logo-img {
    max-height: 44px;
  }

  .header-busca {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
  }

  .btn-menu-mobile {
    display: grid;
  }

  .nav-global {
    display: none;
    border-top: var(--borda-fina);
  }

  .nav-global.ativo {
    display: block;
  }

  .nav-global ul {
    width: min(calc(100% - 1.25rem), var(--largura-conteudo));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--espaco-2);
  }

  .nav-global li {
    width: 100%;
  }

  .nav-global a {
    display: flex;
    width: 100%;
    min-height: 46px;
    padding: 0.65rem 0.5rem;
  }

  .nav-global a::after {
    display: none;
  }

  .btn-menu-mobile.aberto {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
  }

  .banner-destaque {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espaco-6);
    padding: clamp(1.25rem, 5vw, 2rem);
    border-radius: var(--raio-lg);
  }

  .banner-conteudo {
    max-width: none;
  }

  .banner-imagem img {
    max-height: 280px;
  }

  .grid-categorias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-3);
  }

  .card-categoria {
    min-height: 125px;
    padding: var(--espaco-3);
  }

  .grid-produtos,
  #listaProdutosHome {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-3);
  }

  .card-produto-conteudo,
  .produto-card-conteudo {
    padding: var(--espaco-3);
  }

  .produto-apresentacao {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espaco-6);
  }

  .imagem-principal {
    min-height: 260px;
  }

  .bloco-pros-contras {
    grid-template-columns: minmax(0, 1fr);
  }

  .trust-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espaco-4);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espaco-6);
    padding-block: var(--espaco-8);
  }

  .sobre-coluna {
    max-width: none;
  }

  .cookie-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espaco-4);
    padding: var(--espaco-4);
  }

  .cookie-banner .btn,
  .cookie-banner button {
    width: 100%;
  }

  .modal-overlay {
    align-items: end;
    padding: 0;
  }

  .modal-content {
    width: 100%;
    max-height: 90vh;
    border-radius: var(--raio-xl) var(--raio-xl) 0 0;
  }

  .modal-header,
  .modal-body {
    padding: var(--espaco-4);
  }

  .secao-cabecalho {
    align-items: flex-start;
  }

  .item-outra-loja {
    align-items: flex-start;
  }
}


/* ==========================================================================
   24. CELULARES ESTREITOS
   ========================================================================== */

@media (max-width: 380px) {
  .header-container {
    gap: var(--espaco-2);
  }

  .logo-link {
    max-width: 112px;
  }

  .grid-produtos,
  #listaProdutosHome {
    gap: var(--espaco-2);
  }

  .card-produto-conteudo,
  .produto-card-conteudo {
    padding: 0.65rem;
  }

  .btn {
    padding-inline: 0.85rem;
  }

  .preco-atual,
  .preco-atual-destaque {
    overflow-wrap: anywhere;
  }
}


/* ==========================================================================
   25. ACESSIBILIDADE E PREFERÊNCIAS DO USUÁRIO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (hover: none) {
  .card-produto:hover,
  .produto-card:hover,
  .card-vitrine:hover,
  .card-categoria:hover,
  .btn:hover {
    transform: none;
  }
}





/* ==========================================================================
   FIM DO ARQUIVO
   ========================================================================== */






/* ==========================================================================
   CORREÇÕES OU IMPLEMENTAÇÕES POSTERIORES
   ========================================================================== */


.btn-whatsapp {
  background-color: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}
.btn-whatsapp:hover {
  background-color: #128C7E;
  border-color: #128C7E;
  color: #FFFFFF;
}

.texto-pre-wrap {
  white-space: pre-wrap;
}

/* Substitui os antigos emojis de ✔️ e ❌ por marcadores minimalistas coloridos */
.pros li::marker {
  content: "✓ ";
  color: var(--cor-sucesso);
  font-weight: bold;
}

.contras li::marker {
  content: "✕ ";
  color: var(--cor-erro);
  font-weight: bold;
}

.fade-in-out {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.modal-aberto {
  overflow: hidden;
}

/* Correções de Alinhamento e Trava Cross-Browser para SVGs (Firefox/Safari) */
.top-bar-texto, .top-bar-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-global a {
  white-space: nowrap;
}

.icone-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Trava absoluta de tamanho para impedir que o Firefox encolha os ícones */
.icone-menu svg,
.icone-social,
.top-bar-texto svg,
.top-bar-links a svg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  display: block;
}

/* Centralizar seletor de categorias na Home */
#outrasCategorias {
  text-align: center;
  margin: 0 auto;
  max-width: 300px;
}


/* ==========================================================================
   CARROSSEL DE FUNDO GLOBAL E TRANSPARÊNCIA
   ========================================================================== */
#bgCarrosselGlobal {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -10;
    background-color: var(--bg-body);
    pointer-events: none;
}

.img-fundo-ativa {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; /* Cobre a tela sem deixar barras vazias */
    opacity: 0.06;
    transition: opacity 1s ease-in-out;
}

body.dark-mode .img-fundo-ativa {
    opacity: 0.03; /* Mais subtil no modo noturno para manter o contraste do texto */
}

.img-fundo-ativa.fade-in {
    opacity: 0;
}

/* ==========================================================================
   CARDS DE CATEGORIA (PÁGINA INICIAL) - IMAGENS DINÂMICAS COM BLEND
   ========================================================================== */
/* Substitua .card-categoria pela classe exata que os seus cards usam no HTML da Home */
.card-categoria {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-card); 
}

/* Película de transparência profissional */
.card-categoria::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-card);
    opacity: 0.82; 
    z-index: 1;
    transition: opacity 0.3s ease;
}

.card-categoria:hover::before {
    opacity: 0.65; /* Revela ligeiramente a imagem ao passar o rato */
}

/* Garante que o texto fique sempre acima da película da imagem */
.card-categoria > * {
    position: relative;
    z-index: 2; 
}

/* Injeção à prova de bugs através de atributos de dados */
.card-categoria[data-img="smartphones"] { background-image: url('../index/imagens/smartphones.jpeg'); }
.card-categoria[data-img="eletrodomesticos"] { background-image: url('../index/imagens/eletrodomesticos.jpeg'); }
.card-categoria[data-img="informatica"] { background-image: url('../index/imagens/informatica.jpeg'); }
.card-categoria[data-img="games"] { background-image: url('../index/imagens/games.jpeg'); }
.card-categoria[data-img="beleza"] { background-image: url('../index/imagens/beleza.jpeg'); }
.card-categoria[data-img="casa-inteligente"] { background-image: url('../index/imagens/casa-inteligente.jpeg'); }