/* =====================================================================
   css-novo/produto.css
   Pagina de produto da APC Loja.

   TIPOGRAFIA: PILHA DE SISTEMA, ZERO KB.
   Nenhuma fonte web. Fonte externa custa DNS, conexao e download antes
   do primeiro texto pintar -- e o corte mais barato numa pagina que
   precisa ser rapida. E, com uma familia so, todo texto herda a mesma,
   venha de onde vier: e o que resolve a mistura de fontes das abas.

   Nenhum !important. Se algo daqui perder para uma regra antiga, o
   certo e apagar a regra antiga, nao subir a aposta.
   ===================================================================== */

/* =====================================================================
   TIPOGRAFIA: PILHA DE SISTEMA, ZERO KB

   Nenhuma fonte web. Duas razões:

   1. Velocidade. Fonte externa custa DNS + conexão + download antes do
      primeiro texto pintar. Numa página de produto que precisa ser
      rápida, é o corte mais barato que existe.

   2. A mistura de fontes das abas. Hoje o conteúdo vindo do editor da
      admin traz <font> e style="font-family" embutidos. Com uma pilha
      só e o reset de .rich-text lá embaixo, todo texto herda a mesma
      família, venha de onde vier.
   ===================================================================== */
:root{
  --tinta:#1a1a1a;
  --tinta-2:#464c54;
  --tinta-3:#6e757e;
  --fio:#e2e5e9;
  --fio-forte:#c6cbd2;
  --papel:#fff;
  --fundo:#f5f6f8;

  /* AZUL = acao e estado ativo. VERDE = disponibilidade, e so.
     Dois papeis separados: o verde deixa de competir com o botao e
     passa a significar uma coisa so na pagina -- tem estoque.
     Para calibrar o azul da marca, mexa nestas tres linhas. */
  /* AZUL DA MARCA, exato: #42b4e6.
     Sobre ele o texto e ESCURO, nao branco. Branco sobre #42b4e6 da
     2,3:1 de contraste -- metade do minimo de 4,5:1 da WCAG, e some na
     tela de quem esta num galpao ou num monitor barato.
     Texto escuro sobre a mesma cor da 8:1, e a cor continua sendo a
     sua. Se preferir branco, troque --azul por --azul-esc na barra e
     no botao: mesma matiz, escurecida ate passar em contraste. */
  --azul:#42b4e6;
  --azul-esc:#1a7cb0;
  --sobre-azul:#04293b;
  --azul-fraco:#eaf6fd;

  --verde:#3dcd58;
  --verde-fundo:#eefaf0;
  --verde-escuro:#2aa845;

  --alerta:#b45309;
  --alerta-fundo:#fffbeb;
  --alerta-fio:#fcd9a0;

  --texto:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --dados:ui-monospace,SFMono-Regular,"SF Mono",Consolas,monospace;
}
.ap-pdp,.ap-pdp *{box-sizing:border-box}
/* ---------------------------------------------------------------------
   TUDO ESCOPADO EM .ap-pdp

   A versao anterior tinha reset global -- `img,svg{display:block}`,
   `a{text-decoration:none}`, `h1,h2{...}`. Isso vaza para o cabecalho e
   foi o que quebrou o icone do menu: o sprite <svg><use> do header
   recebeu display:block e max-width e perdeu o dimensionamento.

   Folha de pagina nao pode ter seletor de elemento solto num site com
   CSS legado compartilhado. Todo reset agora vive dentro de .ap-pdp.
   --------------------------------------------------------------------- */
.ap-pdp{
  color:var(--tinta);
  font:400 15px/1.65 var(--texto);
  -webkit-font-smoothing:antialiased;
}
.ap-pdp h1,.ap-pdp h2,.ap-pdp h3,.ap-pdp h4{margin:0;line-height:1.18;font-weight:800;letter-spacing:-.012em}
.ap-pdp img,.ap-pdp svg{display:block;max-width:100%}
.ap-pdp a{color:inherit;text-decoration:none}
.ap-pdp :focus-visible{outline:2px solid var(--azul-esc);outline-offset:3px;border-radius:2px}
.ap-env{max-width:1180px;margin:0 auto;padding:0 20px}
.ap-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- topo simplificado (o real vem do cabecalho-novo.asp) ---------- */

/* ---------- trilha ---------- */
.ap-trilha-barra{background:var(--azul)}
.ap-trilha{font-size:12.5px;color:var(--sobre-azul);padding:11px 0}
.ap-trilha ol{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.ap-trilha li+li::before{content:"\203A";margin-right:7px;color:rgba(4,41,59,.45)}
.ap-trilha a{color:white;font-weight:600}
.ap-trilha a:hover{text-decoration:underline}
.ap-trilha [aria-current]{color: white;font-weight:400}

/* ---------- hero ---------- */
.ap-hero{display:grid;grid-template-columns:1fr 400px;gap:44px;padding:20px 0 34px;align-items:start}
.ap-palco{border:1px solid var(--fio);border-radius:10px;background:#fff;padding:26px;display:grid;place-items:center;aspect-ratio:4/3}
.ap-minis{display:flex;gap:9px;margin-top:11px}
.ap-mini{width:60px;height:60px;border:1px solid var(--fio);border-radius:7px;background:#fff;padding:5px;cursor:pointer}
.ap-mini.on{border-color:var(--verde-escuro);box-shadow:inset 0 0 0 1px var(--verde-escuro)}

.ap-compra .ap-marca{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3)}
.ap-compra .ap-marca em{font-style:normal;color:var(--azul-esc)}
.ap-compra h1{font-size:27px;margin:8px 0 0}
.ap-pn{font-family:var(--dados);font-size:13px;color:var(--tinta-2);margin-top:9px}
.ap-pn span{color:var(--tinta-3)}

.ap-caixa{margin-top:18px;border:1px solid var(--fio);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(20,20,20,.04),0 10px 26px rgba(20,20,20,.05)}
.ap-estoque{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--verde-escuro)}
.ap-estoque .ap-pt{width:8px;height:8px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 3px var(--verde-fundo)}
.ap-estoque.cons{color:var(--tinta-3)}
.ap-estoque.cons .ap-pt{background:var(--fio-forte);box-shadow:0 0 0 3px var(--fundo)}
.ap-preco{font-size:33px;font-weight:800;letter-spacing:-.02em;margin:0}
.ap-preco small{display:block;font-size:12.5px;font-weight:400;color:var(--tinta-3);margin-top:5px;letter-spacing:0}
.ap-cta{display:block;width:100%;border:0;border-radius:6px;background:var(--azul);color:white;font:800 15px/1 var(--texto);letter-spacing:.01em;padding:15px;cursor:pointer;transition:background .15s}
.ap-cta:hover{background:var(--azul-esc);color:#fff}
.ap-cta-nota{margin:8px 0 0;font-size:12px;color:var(--tinta-3);text-align:center}
.ap-fiscal{background:var(--fundo);border:1px solid var(--fio);border-radius:7px;padding:11px 12px;font-size:12.5px;color:var(--tinta-2)}
.ap-fiscal b{color:var(--tinta)}
.ap-fiscal p{margin:7px 0 0;padding-top:7px;border-top:1px dashed var(--fio);color:var(--tinta-3);font-size:11.5px}
.ap-entrega{display:grid;gap:7px;font-size:12.5px;color:var(--tinta-3)}
.ap-entrega div{display:flex;gap:8px}
.ap-entrega b{color:var(--tinta);font-weight:600}
.ap-entrega svg{color:var(--verde-escuro);flex:none;margin-top:2px}
.ap-carimbo{margin:0;font-size:11.5px;color:var(--tinta-3)}

/* ---------- sucessor: o elemento de assinatura ----------
   527 produtos, muitos descontinuados. Hoje isso é uma tarja amarela
   com um link de texto. Aqui o sucessor aparece como PRODUTO: foto,
   nome, o que muda. Quem chegou por busca orgânica num item morto sai
   com uma alternativa, não com um aviso. */
.ap-sucessor{
  display:grid;grid-template-columns:76px 1fr auto;gap:16px;align-items:center;
  border:1px solid var(--alerta-fio);background:var(--alerta-fundo);
  border-radius:10px;padding:14px 16px;margin:0 0 22px;
}
.ap-sucessor-img{width:76px;height:76px;background:#fff;border:1px solid var(--alerta-fio);border-radius:8px;display:grid;place-items:center;padding:8px}
.ap-sucessor-tag{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--alerta);margin:0 0 3px}
.ap-sucessor h3{font-size:16px;margin:0 0 3px}
.ap-sucessor p{margin:0;font-size:13px;color:var(--tinta-2)}
.ap-sucessor .ap-btn{border:1px solid var(--tinta);border-radius:6px;padding:10px 16px;font-size:13.5px;font-weight:700;white-space:nowrap}
.ap-sucessor .ap-btn:hover{background:var(--tinta);color:#fff}

/* ---------- índice de seções ---------- */
.ap-indice{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);backdrop-filter:saturate(140%) blur(6px)}
.ap-indice > .ap-env{display:flex;align-items:center;gap:2px;height:50px;overflow-x:auto;scrollbar-width:none}
.ap-indice > .ap-env::-webkit-scrollbar{display:none}
.ap-indice a{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;padding:8px 12px;border-radius:5px;font-size:14px;font-weight:600;color:var(--tinta-2);border-bottom:2px solid transparent}
.ap-indice a:hover{background:var(--fundo);color:var(--tinta)}
.ap-indice .ap-q{font-family:var(--dados);font-size:11px;font-weight:400;color:var(--tinta-3);background:var(--fundo);border:1px solid var(--fio);border-radius:20px;padding:1px 7px}
.ap-indice a.on{color:var(--verde-escuro);border-bottom-color:var(--verde)}
.ap-indice a.on .ap-q{color:var(--verde-escuro);background:var(--verde-fundo);border-color:#bfe8c8}

/* ---------- seções ---------- */
.ap-sec{border-top:1px solid var(--fio);scroll-margin-top:66px}
.ap-sec:first-of-type{border-top:0}
.ap-sec>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:32px 0 0;cursor:default}
.ap-sec>summary::-webkit-details-marker{display:none}
.ap-sec h2{font-size:22px}
.ap-sec .ap-chev{display:none}
.ap-corpo{padding:15px 0 38px}
.ap-cab{display:flex;align-items:baseline;gap:11px}
.ap-cab .ap-n{font-family:var(--dados);font-size:12px;color:var(--tinta-3)}

/* ---------- ficha rápida ---------- */
.ap-resposta{font-size:16.5px;line-height:1.6;color:var(--tinta-2);max-width:74ch;margin:0 0 24px}
.ap-resposta b{color:var(--tinta);font-weight:700}
.ap-ficha{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:2px solid var(--azul-esc);padding-top:3px;margin:0}
.ap-ficha div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--fio)}
.ap-ficha dt{color:var(--tinta-3);font-size:13.5px}
.ap-ficha dd{margin:0;font-family:var(--dados);font-size:13.5px;text-align:right}

/* ---------- texto do editor: a padronização ----------
   Escopo único para todo conteúdo vindo da admin. Tamanhos em px, nunca
   em em encadeado — é o em dentro de em que hoje faz um <strong> dentro
   de <p> ficar quase o dobro do corpo.

   As três últimas regras neutralizam a formatação que o editor antigo
   gravou no banco. Especificidade baixa de propósito: no dia em que o
   HTML estiver limpo, elas saem sem quebrar nada. */
.ap-rich{max-width:74ch;color:var(--tinta-2)}
.ap-rich p{margin:0 0 15px;font-size:15px;line-height:1.65}
.ap-rich h3{font-size:17px;margin:24px 0 8px;color:var(--tinta)}
.ap-rich h4{font-size:15px;margin:20px 0 6px;color:var(--tinta)}
.ap-rich ul,.ap-rich ol{margin:0 0 15px;padding-left:20px}
.ap-rich li{margin-bottom:5px}
.ap-rich strong,.ap-rich b{font-weight:700;color:var(--tinta)}
.ap-rich img{height:auto;border-radius:7px;margin:6px 0 16px}
.ap-rich table{border-collapse:collapse;width:100%;margin:0 0 16px}
.ap-rich td,.ap-rich th{border:1px solid var(--fio);padding:8px 11px;text-align:left;font-size:14px}
.ap-rich font,
.ap-rich [style*="font-family"],
.ap-rich [style*="font-size"],
.ap-rich [style*="color"]{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- especificações ---------- */
.ap-specs{width:100%;border-collapse:collapse;max-width:820px}
.ap-specs caption{text-align:left;font-size:12.5px;color:var(--tinta-3);padding-bottom:10px}
.ap-specs th[scope=rowgroup]{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-esc);text-align:left;padding:22px 0 7px;border-bottom:1px solid var(--fio)}
.ap-specs td{padding:9px 0;border-bottom:1px solid var(--fio);vertical-align:top;font-size:14px}
.ap-specs td:first-child{color:var(--tinta-3);width:44%}
.ap-specs td:last-child{font-family:var(--dados);font-size:13.5px}

/* ---------- documentos ---------- */
.ap-docs{display:grid;gap:11px;max-width:720px}
.ap-doc{display:flex;gap:15px;align-items:center;padding:12px;border:1px solid var(--fio);border-radius:9px;transition:border-color .15s,box-shadow .15s}
.ap-doc:hover{border-color:var(--fio-forte);box-shadow:0 6px 16px rgba(20,20,20,.06)}
.ap-doc-capa{width:54px;height:70px;flex:none;border:1px solid var(--fio);border-radius:4px;overflow:hidden;background:var(--fundo)}
.ap-doc b{display:block;font-size:14.5px;font-weight:600}
.ap-doc span{font-family:var(--dados);font-size:11.5px;color:var(--tinta-3)}
.ap-doc .ap-seta{margin-left:auto;color:var(--tinta-3)}
.ap-doc:hover .ap-seta{color:var(--azul-esc)}

/* ---------- serviços ---------- */
.ap-servs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:900px}
.ap-serv{border:1px solid var(--fio);border-radius:9px;padding:16px;display:flex;flex-direction:column;gap:6px;transition:border-color .15s,box-shadow .15s}
.ap-serv:hover{border-color:var(--azul-esc);box-shadow:0 6px 16px rgba(20,20,20,.06)}
.ap-serv svg{color:var(--azul-esc)}
.ap-serv b{font-size:14.5px;font-weight:700;margin-top:4px}
.ap-serv p{margin:0;font-size:13px;color:var(--tinta-3);line-height:1.5}

/* ---------- cartões de produto ---------- */
.ap-prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ap-prod{border:1px solid var(--fio);border-radius:9px;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.ap-prod:hover{border-color:var(--fio-forte);box-shadow:0 6px 16px rgba(20,20,20,.06)}
.ap-prod-img{aspect-ratio:1;padding:15px;display:grid;place-items:center;border-bottom:1px solid var(--fio)}
.ap-prod-txt{padding:12px 13px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.ap-prod .ap-nome{font-size:13.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ap-prod .ap-sku{font-family:var(--dados);font-size:11px;color:var(--tinta-3)}
.ap-prod .ap-val{margin-top:auto;padding-top:7px;font-size:16px;font-weight:800}
.ap-prod .ap-val.cons{font-size:13px;font-weight:600;color:var(--tinta-3)}

/* ---------- avaliações ---------- */
.ap-av-topo{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;margin-bottom:22px}
.ap-av-nota{font-size:48px;font-weight:800;line-height:1;letter-spacing:-.03em;margin:0}
.ap-estrelas{color:#e0a800;letter-spacing:1px}
.ap-av{padding:18px 0;border-top:1px solid var(--fio);max-width:740px}
.ap-av-cab{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.ap-av-ava{width:34px;height:34px;border-radius:50%;background:var(--azul-fraco);color:var(--azul-esc);display:grid;place-items:center;font-size:12.5px;font-weight:700}
.ap-av-cab b{font-size:14px}
.ap-av-cab time{font-family:var(--dados);font-size:11.5px;color:var(--tinta-3)}
.ap-av p{margin:8px 0 0;font-size:14.5px;color:var(--tinta-2)}
.ap-vazio{color:var(--tinta-3);font-size:14.5px;max-width:60ch;margin:0 0 16px}
.ap-btn-linha{margin-top:18px;display:inline-block;border:1px solid var(--fio-forte);border-radius:6px;padding:11px 17px;font-size:14px;font-weight:600;cursor:pointer;background:#fff}
.ap-btn-linha:hover{border-color:var(--azul-esc);color:var(--azul-esc)}

/* ---------- estados (só no mockup) ---------- */

@media (max-width:980px){
  .ap-hero{grid-template-columns:1fr;gap:24px}
  .ap-prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-servs{grid-template-columns:1fr}
  .ap-ficha{grid-template-columns:1fr;gap:0}
  .topo nav{display:none}
}
@media (max-width:860px){
  .ap-sec>summary{cursor:pointer;padding:20px 0}
  .ap-sec .ap-chev{display:block;color:var(--tinta-3);transition:transform .18s}
  .ap-sec[open] .ap-chev{transform:rotate(180deg)}
  .ap-corpo{padding:2px 0 26px}
  .ap-sec h2{font-size:19px}
  .ap-compra h1{font-size:22px}
  .ap-preco{font-size:28px}
  .ap-sucessor{grid-template-columns:60px 1fr;gap:12px}
  .ap-sucessor .ap-btn{grid-column:1/-1;text-align:center}
}
@media (max-width:520px){ .ap-prods{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} }
html{scroll-behavior:smooth}

/* =====================================================================
   CONTEUDO VINDO DO EDITOR DA ADMIN

   Aqui o !important e necessario, nao preguica: estilo INLINE
   (style="font-family:Verdana") so perde para !important. Nenhum
   seletor, por mais especifico, ganha de um atributo style.

   O que se neutraliza e so aparencia -- familia, corpo, cor, italico,
   alinhamento. Estrutura (paragrafo, lista, tabela, imagem) continua
   valendo, porque isso e conteudo.

   No dia em que o HTML do banco estiver limpo, este bloco sai inteiro
   e nada muda na tela.
   ===================================================================== */
.ap-rich [style]{
  font-family:inherit!important;
  font-size:inherit!important;
  line-height:inherit!important;
  letter-spacing:normal!important;
  color:inherit!important;
  background:transparent!important;
}
.ap-rich font{font-family:inherit;font-size:inherit;color:inherit}

/* O editor antigo usava italico como enfeite, nao como enfase -- na
   pagina do SMX3000 a descricao inteira sai em italico. Volta ao normal;
   <strong> continua marcando o que importa. */
.ap-rich i,.ap-rich em,.ap-rich [style*="italic"]{font-style:normal!important}

.ap-rich [align],.ap-rich [style*="text-align"]{text-align:inherit!important}
.ap-rich center{text-align:inherit!important;display:block}

/* Link continua parecendo link: a regra acima zera a cor de tudo que
   tem style inline, inclusive de <a>. Esta devolve. */
.ap-rich a,.ap-rich a[style]{color:var(--azul-esc)!important;text-decoration:underline}

/* Largura fixa vinda do editor estoura o layout no celular. */
.ap-rich img,.ap-rich table,.ap-rich iframe{max-width:100%!important;height:auto}
.ap-rich [width]{width:auto!important;max-width:100%}