/* Cores e fontes: troque aqui para mudar o visual do site inteiro */
:root{
  --azul:#35418F;
  --aco:#F0F2F7;
  --linha:#D6DAE5;
  --texto:#1B2140;
  --suave:#5A6070;
  --destaque:#DE3030;
  --destaque-escuro:#B82424;
  --branco:#fff;
  --titulo:'Barlow Condensed',Impact,sans-serif;
  --corpo:'Barlow',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
body{font-family:var(--corpo);color:var(--texto);background:var(--aco);line-height:1.5}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--destaque);outline-offset:2px}

/* Topo */
.topo{background:var(--branco);border-bottom:1px solid var(--linha)}
.topo-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.marca{display:block;line-height:0}
.marca img{height:84px;width:auto;display:block}
.pular{position:absolute;left:-999px;top:8px;background:var(--branco);color:var(--azul);padding:10px 14px;border-radius:8px;font-weight:600;z-index:10}
.pular:focus{left:8px}
.contato{display:flex;gap:20px}
.contato a{color:var(--azul);text-decoration:none;font-weight:600}
.contato a:hover{color:var(--destaque)}

/* Hero */
.hero{background:var(--azul);color:var(--branco);padding:36px 0 44px;border-top:4px solid var(--destaque)}
.hero h1{font-family:var(--titulo);font-weight:700;font-size:clamp(2.4rem,7vw,4.4rem);line-height:1;max-width:16ch}
.hero p{margin-top:14px;max-width:52ch;color:#D5DBF0}
.hero .horario{color:var(--branco);font-weight:600;border-left:4px solid var(--destaque);padding-left:10px}

/* Filtros */
.filtros{padding:28px 0 20px;display:grid;gap:14px}
.busca input{width:100%;font:inherit;padding:14px 16px;border:2px solid var(--linha);border-radius:10px;background:var(--branco)}
.busca input:focus{border-color:var(--destaque);outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-weight:600;padding:8px 16px;border-radius:8px;border:2px solid var(--azul);background:transparent;color:var(--azul);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--azul);color:var(--branco)}

/* Grade de produtos */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;padding-bottom:32px}
.card{background:var(--branco);border:2px solid var(--linha);border-radius:10px;overflow:hidden;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:0;display:flex;flex-direction:column}
.card:hover{border-color:var(--destaque)}
.thumb{aspect-ratio:4/3;display:grid;place-items:center;font-family:var(--titulo);font-weight:600;font-size:1.2rem;color:var(--azul);background:linear-gradient(160deg,#F6F7FB,#E6E9F2)}
.thumb{position:relative;overflow:hidden}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px;background:var(--branco);display:block;z-index:1}
.info{padding:14px 16px 18px;display:grid;gap:2px}
.info .cat{font-size:.85rem;color:var(--suave)}
.info h2{font-family:var(--titulo);font-size:1.35rem;line-height:1.15}
.info .preco{font-weight:600;margin-top:6px}
.vazio{padding:24px 0;color:var(--suave)}
.total{color:var(--suave);font-size:.95rem;margin:0 0 12px}
.mais{display:block;margin:0 auto 64px;font:inherit;font-weight:600;padding:14px 28px;border-radius:10px;border:2px solid var(--azul);background:var(--branco);color:var(--azul);cursor:pointer}
.mais:hover{background:var(--azul);color:var(--branco)}

/* Janela de detalhes */
dialog{border:0;border-radius:14px;padding:0;max-width:780px;width:calc(100% - 32px);background:var(--branco);color:var(--texto);margin:auto;position:fixed}
dialog::backdrop{background:rgba(20,24,27,.65)}
.det{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.det .thumb{aspect-ratio:auto;min-height:320px;overflow:hidden}
.det-body{padding:28px;display:flex;flex-direction:column;gap:10px;min-height:0}
.det-body h2{font-family:var(--titulo);font-size:2rem;line-height:1.05}
.compat{color:var(--suave);font-size:.95rem}
.det-body .preco{font-weight:700;font-size:1.3rem}
.desc{color:var(--suave);white-space:pre-line;overflow-y:auto;flex:1 1 auto;min-height:0}
.zap{flex:none;margin-top:auto;display:block;text-align:center;text-decoration:none;font-weight:600;background:var(--destaque);color:var(--branco);padding:15px 18px;border-radius:10px}
.zap:hover{background:var(--destaque-escuro);color:var(--branco)}
.fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:var(--aco);font-size:1.4rem;cursor:pointer;z-index:3}

/* Rodapé */
.rodape{background:var(--azul);color:#D5DBF0;padding:24px 0 88px}
.rodape .wrap{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:baseline}
.rodape strong{color:var(--branco);font-family:var(--titulo);font-size:1.3rem}

@media (max-width:640px){
  .det{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .det .thumb{min-height:0;height:180px;aspect-ratio:auto}
  .det-body{padding:20px}
}

/* Extras */
.rodape .aviso{width:100%;font-size:.9rem;opacity:.85}
.link-copiar{flex:none;font:inherit;font-weight:600;background:transparent;border:2px solid var(--azul);color:var(--azul);padding:10px 14px;border-radius:10px;cursor:pointer}
.link-copiar:hover{background:var(--azul);color:var(--branco)}
.flutuante{position:fixed;right:16px;bottom:16px;z-index:5;display:flex;align-items:center;gap:8px;background:#25A244;color:#fff;text-decoration:none;font-weight:600;padding:12px 16px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.flutuante:hover{background:#1E8A39}
.topo-btn{position:fixed;left:16px;bottom:16px;z-index:5;width:44px;height:44px;border-radius:50%;border:2px solid var(--azul);background:var(--branco);color:var(--azul);font-size:1.3rem;cursor:pointer}
.topo-btn[hidden]{display:none}
.ph{padding:52px 10px 8px;text-align:center;line-height:1.15;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40' fill='none' stroke='%2335418F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='.38'%3E%3Cpath d='M15 16l4-8.5C20 5.5 21.8 4.5 24 4.5h16c2.2 0 4 1 5 3L49 16'/%3E%3Cpath d='M8 21c0-2.8 2.2-5 5-5h38c2.8 0 5 2.2 5 5v8.5H8z'/%3E%3Cpath d='M11 29.5V35h7v-5.5M46 29.5V35h7v-5.5'/%3E%3Ccircle cx='16' cy='22.5' r='2.6'/%3E%3Ccircle cx='48' cy='22.5' r='2.6'/%3E%3Cpath d='M26 24h12'/%3E%3C/svg%3E") no-repeat center 4px/56px auto}
@media (max-width:640px){.flutuante span{display:none}.flutuante{padding:14px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.sistema{font-size:.8rem;color:var(--suave);opacity:.8}

/* Celular: 2 peças por linha */
@media (max-width:640px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .info{padding:10px 10px 12px}
  .info h2{font-size:1.05rem;overflow-wrap:anywhere}
  .info .cat{font-size:.75rem}
  .thumb{font-size:1.1rem}
}

/* Opções de lado/fabricante dentro do produto */
.opcoes-t{font-size:.9rem;color:var(--suave);flex:none}
.opcoes{flex:none;display:flex;flex-wrap:wrap;gap:6px;max-height:30vh;overflow-y:auto;padding:2px}
.opc{font:inherit;font-size:.85rem;text-align:left;background:var(--branco);border:2px solid var(--linha);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--texto);display:grid;line-height:1.2}
.opc small{color:var(--suave)}
.opc:hover{border-color:var(--azul)}
.opc[aria-checked="true"]{border-color:var(--destaque);background:#FFF1F1}
.opcoes[hidden],.opcoes-t[hidden]{display:none}

/* Janela da peça em telas baixas: o conteúdo rola e o botão do WhatsApp fica sempre visível */
.det-body{overflow-y:auto}
.zap{position:sticky;bottom:0;z-index:2;box-shadow:0 -10px 12px -6px var(--branco)}
@media (max-width:640px){
  .det .thumb{height:130px;height:clamp(130px,30vh,200px);height:clamp(130px,30dvh,200px)}
  .opcoes{max-height:24vh}
  .det-body h2{font-size:1.5rem}
}

.selo-repo{position:absolute;top:8px;left:8px;z-index:2;background:#B45309;color:#fff;font:600 .72rem/1 var(--corpo,inherit);padding:5px 8px;border-radius:999px;letter-spacing:.2px}
.repo-aviso{background:#FFF7E6;border:1px solid #F5D08A;color:#7A4A00;border-radius:8px;padding:8px 10px;font-size:.88rem;margin:4px 0}
.rodape .email a{color:#fff;text-decoration:underline}

/* Página 404: botão "Ver o catálogo" (só ali; não muda o botão do WhatsApp da janela da peça) */
.zap.zap-voltar{display:inline-block;margin-top:8px;padding:12px 22px}

/* Crédito do desenvolvedor no rodapé (o link só aparece quando o script.js tiver o endereço) */
.rodape .credito{width:100%;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-size:.85rem;line-height:1.6;color:#C3C9E6}
.rodape .credito strong{font-family:var(--corpo);font-size:inherit;font-weight:600;color:var(--branco)}
.credito-link{padding:12px 0;color:#FFAB8A;font-weight:600;text-decoration:none;white-space:nowrap}
.credito-link:hover{color:var(--branco);text-decoration:underline;text-underline-offset:3px}
.credito-link[hidden]{display:none}
.rodape a:focus-visible{outline-color:var(--branco)}
@supports ((-webkit-mask:none) or (mask:none)){
  .credito-link::after{content:"";display:inline-block;width:.95em;height:.95em;margin-left:5px;vertical-align:-.1em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat}
}