/* Loja Metalpex — partes próprias da loja. Tokens e componentes em ../compartilhado/base.css. */

/* ------------------------------------------------------------------ Cabeçalho da loja */
.faixa { background: var(--grafite); color: var(--texto-inv-2); font-size: var(--t-sm); }
.faixa .container { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); min-height: 40px; }
.faixa a { color: var(--branco); text-decoration: none; font-weight: 500; }
.faixa a { transition: color var(--d-2) var(--ease); }
.faixa a:hover { color: var(--verde-sinal); }
.faixa ul { display: flex; gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
.faixa li { display: flex; align-items: center; gap: 8px; }
.faixa svg { width: 16px; height: 16px; color: var(--verde-sinal); }

.loja-topo .topo__barra { gap: var(--e-3); }
.marca-loja { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca-loja__tag { padding: 3px 10px; border-radius: 999px; background: var(--verde-50); color: var(--verde); font-size: var(--t-sm); font-weight: 500; }
.busca { flex: 1; max-width: 560px; margin-inline: auto; }
.busca .entrada { min-height: 52px; border-radius: 999px; }
.carrinho { position: relative; }
.carrinho .contador { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: var(--verde); color: var(--branco); font-size: 0.78rem; font-weight: 600; box-shadow: 0 0 0 3px var(--branco); }
.carrinho.pulsar .contador { animation: pulsar 450ms var(--ease); }
@keyframes pulsar { 40% { transform: scale(1.35); } }
.categorias-nav { border-top: 1px solid var(--linha); }
.categorias-nav ul { display: flex; gap: 4px; margin: 0; padding: 8px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.categorias-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--texto-2); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.categorias-nav a:hover { background: var(--nevoa); color: var(--texto); }
.categorias-nav a[aria-current="true"] { background: var(--grafite); color: var(--branco); }

/* ------------------------------------------------------------------ Vitrine (banner) */
.vitrine-topo { padding: 8px 8px 0; }
.banner { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--e-4); min-height: 520px; padding: var(--e-5) clamp(24px, 5vw, 72px); background:
  radial-gradient(50% 60% at 75% 50%, var(--verde-50), transparent 75%),
  linear-gradient(var(--nevoa-2) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--nevoa-2) 1px, transparent 1px) 0 0 / 40px 40px, var(--nevoa); }
.banner__texto { display: grid; gap: var(--e-3); justify-items: start; }
.banner__palco { position: relative; height: 460px; }
.banner__visor { position: absolute; inset: 0; }
.dica-giro { position: absolute; left: 50%; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--branco); box-shadow: var(--sombra-1); color: var(--texto-2); font-size: var(--t-sm); transform: translateX(-50%); white-space: nowrap; pointer-events: none; transition: opacity var(--d-3) var(--ease); }
.dica-giro svg { width: 18px; height: 18px; color: var(--verde); animation: balancar 2.4s var(--ease) infinite; }
.dica-giro[data-oculta="true"] { opacity: 0; }
@keyframes balancar { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.etiqueta-preco { position: absolute; right: 0; bottom: 16%; color: var(--texto); text-decoration: none; transition: transform var(--d-3) var(--ease), box-shadow var(--d-3) var(--ease); display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--branco); box-shadow: var(--sombra-2); }
.etiqueta-preco:hover { transform: translateY(-2px); color: var(--texto); }
.etiqueta-preco > span:first-child { color: var(--texto-2); font-size: var(--t-sm); }
.etiqueta-preco .link { min-height: 0; margin-top: 4px; }
.etiqueta-preco strong { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.02em; }

/* ------------------------------------------------------------------ Categorias */
.categorias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.categoria { display: grid; gap: 4px; padding: 12px 12px 20px; border-radius: var(--r-xl); background: var(--nevoa); color: var(--texto); text-decoration: none; transition: background-color var(--d-3) var(--ease), transform var(--d-3) var(--ease); }
.categoria:hover { background: var(--verde-50); color: var(--texto); }
.categoria__visor { height: 190px; margin-bottom: 10px; border-radius: var(--r-lg); background: var(--branco); }
.categoria strong, .categoria span { padding-inline: 10px; }
.categoria strong { font-weight: 500; font-size: var(--t-md); letter-spacing: -0.015em; }
.categoria span { color: var(--texto-2); }

/* ------------------------------------------------------------------ Catálogo */
.catalogo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.filtros { position: sticky; top: calc(var(--topo) + 16px); display: grid; gap: var(--e-3); }
.filtros fieldset { margin: 0; padding: 0 0 var(--e-2); border: 0; border-bottom: 1px solid var(--linha); }
.filtros legend { margin-bottom: 4px; font-weight: 500; }
.ajuda-cartao { display: grid; gap: 10px; padding: var(--e-3); border-radius: var(--r-lg); background: var(--verde-noite); color: var(--branco); }
.ajuda-cartao p { color: var(--verde-100); }
.barra-catalogo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: var(--e-3); }
.barra-catalogo__esq { display: flex; align-items: center; gap: 12px; }
.barra-catalogo .selecao { min-width: 230px; }
.filtrar-movel { display: none !important; }
.grade[data-vitrine] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.vazio { grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; padding: var(--e-6) var(--e-3); border-radius: var(--r-xl); background: var(--nevoa); text-align: center; }
.vazio__visor { width: 220px; height: 180px; }

/* ------------------------------------------------------------------ Cartão de produto */
.produto { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-xl); background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); overflow: hidden; transition: box-shadow var(--d-3) var(--ease), transform var(--d-3) var(--ease); }
.produto:hover { box-shadow: inset 0 0 0 1px var(--verde-100), var(--sombra-2); transform: translateY(-3px); }
.produto__foto { position: relative; display: block; aspect-ratio: 5 / 4; margin: 8px 8px 0; border-radius: var(--r-lg); background: radial-gradient(90% 80% at 50% 45%, var(--branco), var(--nevoa) 75%); }
.produto__foto .visor { position: absolute; inset: 0; }
.produto__foto .selo { position: absolute; left: 10px; top: 10px; }
.produto__corpo { display: grid; gap: 4px; align-content: start; padding: 16px 18px 18px; }
.produto__cat { color: var(--texto-2); font-size: var(--t-sm); }
.produto__nome { font-size: var(--t-md); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.produto__nome a { color: var(--texto); text-decoration: none; }
.produto__nome a::after { content: ""; position: absolute; inset: 0; }
.produto { position: relative; }
.produto__nome a:hover { color: var(--verde); }
.produto__medida { color: var(--texto-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.produto__rodape { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 12px; }
.produto__preco { display: grid; }
.produto__preco strong { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.025em; }
.produto__preco span { color: var(--texto-2); font-size: var(--t-sm); }
.icone-btn--acao { position: relative; z-index: 1; background: var(--verde); color: var(--branco); transition: background-color var(--d-2) var(--ease), transform var(--d-1) var(--ease); }
.icone-btn--acao:hover { background: var(--verde-hover); color: var(--branco); }
.icone-btn--acao:active { transform: scale(0.94); }

/* ------------------------------------------------------------------ Vantagens */
.vantagens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.vantagens li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: var(--nevoa); }
.vantagens svg { width: 48px; height: 48px; padding: 12px; border-radius: 14px; background: var(--branco); color: var(--verde); }
.vantagens strong { display: block; font-weight: 500; }
.vantagens span { color: var(--texto-2); font-size: var(--t-sm); }

/* ------------------------------------------------------------------ Página de produto */
.trilha { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: var(--e-3) 0 var(--e-2); list-style: none; color: var(--texto-2); font-size: var(--t-sm); }
.trilha li + li::before { content: "/"; margin-right: 8px; color: var(--aco); }
.trilha a { color: var(--texto-2); transition: color var(--d-2) var(--ease); }
.trilha a:hover { color: var(--verde); }
.trilha [aria-current="page"] { color: var(--texto); }
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-5); align-items: start; padding-bottom: var(--e-7); }
.galeria { display: grid; gap: 12px; position: sticky; top: calc(var(--topo) + 16px); }
.palco { position: relative; aspect-ratio: 1 / 0.92; border-radius: var(--r-xl); overflow: hidden; background:
  linear-gradient(var(--nevoa-2) 1px, transparent 1px) 0 0 / 36px 36px, linear-gradient(90deg, var(--nevoa-2) 1px, transparent 1px) 0 0 / 36px 36px, var(--nevoa); }
.palco > [data-camada] { position: absolute; inset: 0; }
.foto-vaga { display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; color: var(--texto-2); background: radial-gradient(80% 70% at 50% 45%, var(--branco), var(--nevoa)); }
.foto-vaga svg { width: 48px; height: 48px; color: var(--aco); }
.controles { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.segmentos { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r); background: rgb(255 255 255 / 0.85); backdrop-filter: blur(10px); box-shadow: var(--sombra-1); }
.segmentos button { min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--texto-2); font-weight: 500; font-size: var(--t-sm); cursor: pointer; transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.segmentos button:hover { color: var(--texto); }
.segmentos button[aria-pressed="true"] { background: var(--grafite); color: var(--branco); }
.chave { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 14px 4px 6px; border-radius: var(--r); background: rgb(255 255 255 / 0.85); backdrop-filter: blur(10px); box-shadow: var(--sombra-1); font-size: var(--t-sm); font-weight: 500; cursor: pointer; }
.chave input { appearance: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 99px; background: var(--aco); cursor: pointer; transition: background-color var(--d-2) var(--ease); }
.chave input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--branco); box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform var(--d-2) var(--ease); }
.chave input:checked { background: var(--verde); }
.chave input:checked::after { transform: translateX(18px); }
.chave input:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.palco .dica-giro { top: 14px; bottom: auto; }
.miniaturas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.miniatura { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 14px 8px 8px; border: 0; border-radius: var(--r-lg); background: var(--nevoa); color: var(--texto-2); font-weight: 500; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.miniatura:hover { color: var(--texto); }
.miniatura[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--verde); color: var(--verde); background: var(--verde-50); }
.miniatura svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--branco); flex: none; }

.compra { display: grid; gap: var(--e-3); }
.compra__cabeca { display: grid; gap: 6px; }
.compra__cabeca .titulo-2 { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.3rem); }
.compra__codigo { color: var(--texto-2); font-size: var(--t-sm); }
.compra__preco { display: grid; gap: 4px; padding: var(--e-3); border-radius: var(--r-xl); background: var(--nevoa); }
.compra__preco strong { font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1.1; }
.compra__preco span { color: var(--texto-2); }
.compra__preco .pix { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--verde); font-weight: 500; }
.compra__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.opcoes legend { margin-bottom: 8px; font-weight: 500; }
.opcao-cor { position: relative; }
.opcao-cor input { position: absolute; opacity: 0; }
.opcao-cor span { display: inline-flex; align-items: center; gap: 10px; min-height: var(--alvo); padding: 0 16px 0 10px; border-radius: 999px; border: 1px solid var(--linha); cursor: pointer; transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease); }
.opcao-cor i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.opcao-cor input:checked + span { border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); }
.opcao-cor input:focus-visible + span { outline: 3px solid var(--verde); outline-offset: 3px; }
.compra__botoes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.compra__botoes .btn { min-height: 56px; }
.frete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.frete-resultado { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.frete-resultado li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--nevoa); }
.garantias { display: grid; gap: 10px; margin: 0; padding: var(--e-3) 0 0; list-style: none; border-top: 1px solid var(--linha); }
.garantias li { display: flex; align-items: center; gap: 12px; color: var(--texto-2); }
.garantias svg { width: 22px; height: 22px; color: var(--verde); flex: none; }

.detalhes { padding-block: var(--e-6); }
.especificacoes { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e-5); }
.beneficios { display: grid; gap: 12px; align-content: start; }
.beneficio { padding: var(--e-3); border-radius: var(--r-lg); background: var(--branco); }
.beneficio p { color: var(--texto-2); margin-top: 4px; }
.dimensoes { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
.dimensoes .visor { height: 520px; border-radius: var(--r-xl); background: var(--branco); }
.processo-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.processo-mini li { display: grid; gap: 8px; }
.processo-mini .visor { height: 200px; border-radius: var(--r-lg); background: var(--branco); }
.processo-mini p { color: var(--texto-2); }
.usos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.usos li { padding: var(--e-3); border-radius: var(--r-lg); background: var(--branco); }
.usos p { color: var(--texto-2); margin-top: 4px; }

.barra-compra { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 45; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: var(--r-lg); background: var(--grafite); color: var(--branco); box-shadow: var(--sombra-2); transform: translateY(140%); transition: transform var(--d-3) var(--ease); }
.barra-compra[data-visivel="true"] { transform: none; }
.barra-compra strong { display: block; font-weight: 500; font-size: var(--t-md); }
.barra-compra span { color: var(--texto-inv-2); font-size: var(--t-sm); }

/* ------------------------------------------------------------------ Responsivo */
@media (max-width: 1080px) {
  .banner, .pdp, .especificacoes, .dimensoes { grid-template-columns: minmax(0, 1fr); }
  .banner__palco { height: 360px; }
  .categorias, .vantagens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogo { grid-template-columns: minmax(0, 1fr); }
  .catalogo > .filtros { display: none; }
  .filtrar-movel { display: inline-flex !important; }
  .galeria { position: static; }
  .processo-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra-compra { display: flex; }
}
@media (max-width: 960px) {
  .busca { display: none; }
  .faixa ul li:not(:first-child) { display: none; }
}
@media (max-width: 640px) {
  .vitrine-topo { padding: 0; }
  .banner { border-radius: 0 0 var(--r-xl) var(--r-xl); min-height: 0; padding: var(--e-4) var(--gutter); }
  .banner__palco { height: 300px; }
  .etiqueta-preco { display: none; }
  .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .categoria__visor { height: 120px; }
  .vantagens, .usos { grid-template-columns: minmax(0, 1fr); }
  .barra-catalogo .selecao { min-width: 0; flex: 1 1 100%; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .produto__corpo { padding: 12px; }
  .produto__nome { font-size: var(--t-base); }
  .produto__preco strong { font-size: var(--t-md); }
  .produto__preco span, .produto__medida { display: none; }
  .compra__botoes { grid-template-columns: minmax(0, 1fr); }
  .miniatura { padding: 6px; justify-content: center; font-size: var(--t-sm); }
  .miniatura svg { display: none; }
  .palco { aspect-ratio: 4 / 5; }
  .controles { flex-direction: column; align-items: stretch; }
  .segmentos { justify-content: space-between; }
  .dimensoes .visor { height: 360px; }
  .faixa .container { justify-content: center; }
  .faixa .container > a { display: none; }
}
@media (max-width: 400px) {
  .grade { grid-template-columns: minmax(0, 1fr); }
  .produto__preco span, .produto__medida { display: block; }
}

/* ------------------------------------------------------------------ Produtos vindos do ERP
   Foto real (quando o ERP tem) no lugar do desenho 3D, e esqueleto enquanto a API responde. */
.produto__foto--imagem { overflow: hidden; background: var(--nevoa); }
.produto__foto--imagem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-3) var(--ease); }
.produto:hover .produto__foto--imagem img { transform: scale(1.03); }

@keyframes esqueleto-pulsa { 50% { opacity: 0.55; } }
.produto--esqueleto { pointer-events: none; }
.produto--esqueleto .produto__foto, .produto--esqueleto .produto__corpo span, .esqueleto {
  display: block; border-radius: var(--r); background: var(--nevoa-2); animation: esqueleto-pulsa 1.4s var(--ease) infinite;
}
.produto--esqueleto .produto__corpo span { height: 18px; }
.produto--esqueleto .produto__corpo span:nth-child(2) { width: 80%; height: 24px; }
.produto--esqueleto .produto__corpo span:nth-child(3) { width: 45%; }
.esqueleto { height: 20px; }
.esqueleto--titulo { height: 44px; width: 85%; }
.esqueleto--preco { height: 110px; border-radius: var(--r-xl); }
.esqueleto--palco { aspect-ratio: 1 / 0.92; border-radius: var(--r-xl); }
.pdp--esqueleto { padding-top: var(--e-6); }

.palco__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.palco > .visor { position: absolute; inset: 0; }
.palco__aviso { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.9); color: var(--texto-2); font-size: var(--t-sm); }
.miniaturas--fotos { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.miniatura--foto { padding: 4px; min-height: 0; aspect-ratio: 1 / 0.92; }
.miniatura--foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.descricao { display: grid; gap: var(--e-2); max-width: 46em; color: var(--texto-2); }
.especificacoes > [data-p-specs] { min-width: 0; }