/* ==========================================================================
   Line Express — a página de cada produto (/produtos/<id>/)
   Gerada por ferramentas/build-produtos.py. Depende dos tokens de
   css/style.css e dos cards de css/prods.css (os semelhantes, e os selos da
   foto: .prod__off, .prod__vendido, .prod__em-breve).

   Duas colunas no computador (a foto fica parada enquanto a coluna da
   direita rola), uma no celular, com a foto primeiro e o botão do Whatsapp
   ainda na primeira tela quando o produto não tem muito o que escolher.
   ========================================================================== */

/* a nav é fixa e nasce com a régua de categorias aberta (menu.js: página
   sem #modelos), então o topo precisa de mais respiro que o de uma seção */
.pp-sec{
  /* 132px: a nav com a régua aberta tem ~112; a migalha começa uns 20px
     abaixo dela, e a nav só vira vidro quando ela encosta (js/produto.js) */
  padding:clamp(132px,16vh,156px) 0 clamp(56px,9vh,104px);
}

/* ------------------------------------------------------------- migalha --- */
.migalha ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;
  margin:0 0 clamp(18px,3vh,30px); padding:0;
  list-style:none;
  font-size:12.5px; color:var(--text-dim);
  text-align:left;
}
.migalha li{ display:flex; align-items:center; gap:8px; min-width:0; }
.migalha li + li::before{ content:"›"; color:#4a4a50; }
.migalha a{ color:var(--text-mid); transition:color .2s ease; }
.migalha a:hover{ color:var(--text); }
.migalha [aria-current]{
  max-width:min(60vw,520px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ------------------------------------------------------------ o produto --- */
.pp{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
  text-align:left;
}
.pp__foto{
  position:sticky; top:118px;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1;
  border:1px solid var(--line-soft);
  border-radius:26px;
  background:#101013;
  overflow:hidden;
}
.pp__foto img{ width:100%; height:100%; object-fit:contain; padding:7%; }
.pp__foto .prod__off{ top:18px; right:18px; padding:6px 11px; font-size:11px; }
.pp__foto .prod__em-breve{ top:18px; left:18px; padding:6px 12px; font-size:11px; }
.pp__foto .prod__vendido{ padding:11px 30px; font-size:15px; }
/* sem o `contrast` do card vendido: na foto grande ele clareia o fundo da
   própria imagem e aparece um quadrado dentro do quadro */
.pp.is-vendido .pp__foto img{ filter:saturate(.35); opacity:.72; }

.pp__kicker{
  margin:0 0 14px;
  font-size:11.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent-b);
}
.pp.is-vendido .pp__kicker{ color:var(--text-mid); }
.pp__titulo{
  margin:0 0 22px;
  font-size:clamp(30px,3.5vw,46px); font-weight:600;
  line-height:1.08; letter-spacing:-.035em;
  /* "Seminovo iPhone 15 / PRO" deixava a última palavra sozinha */
  text-wrap:balance;
}
.pp__cfg{
  display:block; margin-top:8px;
  font-size:.48em; font-weight:500; letter-spacing:-.01em; line-height:1.3;
  color:var(--text-mid);
}

/* --------------------------------------------------------------- preço --- */
.pp__preco{
  margin:0 0 24px; padding:0 0 22px;
  border-bottom:1px solid var(--line-soft);
}
.pp__de{
  display:flex; align-items:center; gap:10px;
  margin:0 0 6px;
  font-size:15px; color:var(--text-dim);
}
.pp__de[hidden]{ display:none; }
.pp__de s{ opacity:.75; }
.pp__off{
  padding:4px 9px; border-radius:980px;
  font-size:10.5px; font-weight:600; letter-spacing:.12em; line-height:1;
  background:var(--accent-b); color:#241700;
}
.pp__por{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:0; }
.pp__por b{
  font-size:clamp(34px,3.4vw,44px); font-weight:600;
  letter-spacing:-.035em; line-height:1.05;
}
.pp__por span{ font-size:15px; color:var(--text-mid); }
.pp.is-vendido .pp__por b{ color:var(--text-dim); }
.pp__parc{ margin:6px 0 0; font-size:14.5px; color:var(--text-mid); }

/* ----------------------------------------------------- estado (seminovo) --- */
.pp__estado{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:10px; margin:0 0 24px;
}
.pp__estado div{
  padding:14px 16px;
  border:1px solid var(--line-soft); border-radius:16px;
  background:rgba(255,255,255,.03);
}
.pp__estado b{ display:block; font-size:21px; font-weight:600; letter-spacing:-.02em; }
.pp__estado span{ font-size:12px; color:var(--text-dim); }

/* -------------------------------------------------------------- seletor --- */
.pp__grupo{ margin:0 0 20px; }
.pp__rotulo{ margin:0 0 10px; font-size:13.5px; color:var(--text-dim); }
.pp__rotulo b{ color:var(--text); font-weight:600; }
.pp__opcoes{ display:flex; flex-wrap:wrap; gap:8px; }
.pp__op{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:10px 15px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  font:inherit; font-size:14px; font-weight:500; letter-spacing:-.01em;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, opacity .2s ease;
}
.pp__op:hover{ border-color:rgba(255,255,255,.32); }
.pp__op[aria-pressed="true"],
.pp__op[aria-current="page"]{
  border-color:var(--text);
  background:rgba(255,255,255,.08);
  cursor:default;
}
.pp__op.is-outra{ opacity:.5; }
.pp__op:focus-visible{ outline:2px solid var(--accent-b); outline-offset:2px; }
/* a opção única (a cor da unidade, quando é uma só): marcada, sem clique */
.pp__op.is-unica{
  border-color:var(--text);
  background:rgba(255,255,255,.08);
  cursor:default;
}
.pp__cor{
  width:16px; height:16px; flex:none;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
}
/* as outras configurações do modelo: o rótulo e o preço de cada uma */
.pp__op--cfg{ flex-direction:column; align-items:flex-start; gap:1px; padding:9px 15px; }
.pp__op--cfg small{ font-size:12px; font-weight:400; color:var(--text-dim); }
.pp__op--esgotado span{ color:var(--text-dim); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.3); }

/* VIDRO NOS BOTÕES DE CONFIGURAÇÃO (31/10/2026, pedido dele, à moda do
   Liquid Glass do iOS 26): só Memória e Armazenamento; os de Cor seguem como
   acima. Atrás deles só existe o preto da página, então o vidro aparece como
   borda de luz, volume e o toque que cresce, não como transparência. O
   escolhido mantém a borda branca da Cor ("sim, borda branca": a página
   inteira marca a escolha do mesmo jeito), com o vidro claro por dentro.
   Antes de entrar aqui foi testado em prévia (prints em
   ~/line-express-glass-prototipo/prints/config-*). */
.pp__op--cfg{
  position:relative;
  border-color:transparent; border-radius:16px;
  background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(10px) saturate(180%);
          backdrop-filter:blur(10px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.04),
    inset 0 0 14px rgba(255,255,255,.03),
    0 6px 18px rgba(0,0,0,.35);
  transition:border-color .2s ease, background .25s ease, opacity .2s ease,
             transform .45s cubic-bezier(.2,.9,.3,1.35);
}
/* a borda de luz: mais clara no alto à esquerda e embaixo à direita */
.pp__op--cfg::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,
    rgba(255,255,255,.50), rgba(255,255,255,.10) 30%,
    rgba(255,255,255,.04) 60%, rgba(255,255,255,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:.55; pointer-events:none;
  transition:opacity .25s ease;
}
.pp__op--cfg:hover{ border-color:transparent; background:rgba(255,255,255,.06); }
.pp__op--cfg:hover::before{ opacity:1; }
/* o toque "acende" e cresce, como os botões de vidro do iPhone */
.pp__op--cfg:active{ transform:scale(1.06); background:rgba(255,255,255,.10); }

.pp__op--cfg[aria-pressed="true"],
.pp__op--cfg[aria-current="page"]{
  border-color:var(--text);
  background:rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset 0 0 22px rgba(255,255,255,.08),
    0 10px 28px rgba(0,0,0,.45);
  transform:none;
}
.pp__op--cfg[aria-pressed="true"]::before,
.pp__op--cfg[aria-current="page"]::before{ opacity:0; }

@media (prefers-reduced-transparency:reduce){
  .pp__op--cfg{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,255,255,.06); }
}
@media (prefers-reduced-motion:reduce){
  .pp__op--cfg{ transition-duration:.01ms; }
  .pp__op--cfg:active{ transform:none; }
}

/* ------------------------------------------------------------- Whatsapp --- */
.pp__wa{ width:100%; justify-content:center; margin-top:8px; }
.pp__wa svg{ width:21px; height:21px; }
/* esgotado: o botão pede um semelhante, sem o verde cheio de quem compra */
.pp.is-vendido .pp__wa{
  background:transparent; color:var(--text);
  border:1px solid rgba(37,211,102,.5);
  box-shadow:none;
}
.pp.is-vendido .pp__wa svg{ color:var(--wa); }
.pp__wa-nota{
  margin:12px 0 0;
  font-size:13.5px; line-height:1.5; color:var(--text-dim);
  text-align:center;
}

/* ------------------------------------------------------------- garantias --- */
.pp__lista{
  display:grid; gap:14px;
  margin:26px 0 0; padding:22px 0 0;
  border-top:1px solid var(--line-soft);
  list-style:none;
}
.pp__lista li{
  display:grid; grid-template-columns:22px 1fr; gap:12px;
  font-size:14.5px; line-height:1.45; color:var(--text-mid);
}
.pp__lista svg{ width:21px; height:21px; color:var(--accent-b); }
.pp__lista b{ color:var(--text); font-weight:600; }
.pp__lista a{ border-bottom:1px solid var(--line); transition:border-color .2s ease, color .2s ease; }
.pp__lista a:hover{ color:var(--text); border-bottom-color:var(--accent-b); }
.pp__lista small{ display:block; margin-top:2px; font-size:12.5px; color:var(--text-dim); }

/* ---------------------------------------------------------- semelhantes --- */
.pp-semelhantes{ padding:clamp(64px,10vh,120px) 0; }
.pp__h2{
  margin:0 0 clamp(28px,4vh,44px);
  font-size:clamp(26px,3.6vw,44px); font-weight:600;
  line-height:1.08; letter-spacing:-.035em;
}
.pp__h2 .dim{ color:var(--text-dim); }
/* oito semelhantes: duas fileiras de quatro no computador, de dois no resto */
.pp-semelhantes .prods{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .pp-semelhantes .prods{ grid-template-columns:repeat(2,1fr); } }

/* ------------------------------------------------------------------ blog --- */
.pp-blog{
  display:grid; grid-template-columns:220px 1fr; gap:22px; align-items:center;
  max-width:760px; margin:clamp(40px,6vh,64px) auto 0; padding:14px;
  border:1px solid var(--line-soft); border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  text-align:left;
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.pp-blog:hover{ border-color:rgba(255,255,255,.2); transform:translateY(-2px); }
.pp-blog img{ width:100%; aspect-ratio:1200/630; height:auto; object-fit:cover; border-radius:12px; }
.pp-blog__txt{ display:block; }
.pp-blog small{
  display:block; margin-bottom:6px;
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-b);
}
.pp-blog b{ display:block; font-size:18px; font-weight:600; line-height:1.3; letter-spacing:-.02em; }
.pp-blog__txt > span{ display:block; margin-top:8px; font-size:14px; color:var(--text-mid); }

/* ------------------------------------------------------ barra do celular ---
   O preço do PIX e o Whatsapp presos ao pé da tela quando o botão principal
   está fora de vista (js/produto.js põe `is-visivel`). Só no celular: no
   computador o botão principal está na primeira tela, ao lado da foto. Vidro
   escuro como a nav sólida; o verde é o do botão, o mesmo do bloco de compra. */
.pp-barra{ display:none; }
@media (max-width:860px){
  .pp-barra{
    position:fixed; left:0; right:0; bottom:0; z-index:140;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background:rgba(10,10,12,.72);
    -webkit-backdrop-filter:saturate(180%) blur(26px);
            backdrop-filter:saturate(180%) blur(26px);
    border-top:1px solid var(--line-soft);
    transform:translateY(110%);
    transition:transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .pp-barra.is-visivel{ transform:none; }
  .pp-barra__preco{ margin:0; display:flex; align-items:baseline; gap:6px; min-width:0; }
  .pp-barra__preco b{ font-size:19px; font-weight:600; letter-spacing:-.025em; white-space:nowrap; }
  .pp-barra__preco span{ font-size:12.5px; color:var(--text-mid); }
  .pp-barra__wa{ flex:none; padding:11px 20px; font-size:15px; box-shadow:none; }
  .pp-barra__wa svg{ width:18px; height:18px; }
  /* a barra é o Whatsapp que acompanha a rolagem nesta página */
  .wa-flutuante{ display:none !important; }
  /* o fim do rodapé não fica escondido atrás dela */
  .footer{ padding-bottom:96px; }
}

/* ------------------------------------------------------------- celular --- */
@media (max-width:860px){
  .pp{ grid-template-columns:1fr; gap:22px; }
  .pp__foto{ position:relative; top:auto; width:100%; max-width:520px; margin:0 auto; }
}
@media (max-width:640px){
  .pp-sec{ padding-top:126px; }
  /* mais baixa que larga: o preço sobe para a primeira tela */
  .pp__foto{ aspect-ratio:5/4; border-radius:20px; }
  .pp__foto img{ padding:6%; }
  .pp__titulo{ margin-bottom:18px; font-size:28px; }
  .pp__por b{ font-size:34px; }
  .pp__op{ min-height:42px; padding:9px 13px; font-size:13.5px; }
  .pp-blog{ grid-template-columns:1fr; gap:14px; }
}

/* ------------------------------------------------ ficha técnica (03/11/2026) ---
   dados/fichas.json, só para o novo que tem ficha (build-produtos.bloco_ficha):
   as especificações da página oficial da Apple, com a fonte e a data, e as
   perguntas frequentes. Lista de duas colunas no computador, uma no celular. */
.pp-ficha .wrap{ max-width:880px; text-align:left; }
.pp-ficha .kicker{ text-align:left; padding-left:0; }
.pp-ficha__lista{
  margin:28px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 32px;
}
.pp-ficha__lista div{ padding:14px 0; border-top:1px solid var(--line-soft); }
.pp-ficha__lista dt{
  margin:0 0 4px; font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim);
}
.pp-ficha__lista dd{ margin:0; font-size:15px; line-height:1.5; color:var(--text); }
.pp-ficha__fonte{ margin:22px 0 0; font-size:13px; color:var(--text-dim); }
.pp-ficha__fonte a{ color:var(--text-mid); text-decoration:underline; text-underline-offset:3px; }
.pp-faq__titulo{ margin:48px 0 14px; font-size:22px; font-weight:600; letter-spacing:-.02em; }
.pp-faq__item{ border-top:1px solid var(--line-soft); }
.pp-faq__item:last-child{ border-bottom:1px solid var(--line-soft); }
.pp-faq__item summary{
  padding:16px 0; cursor:pointer; list-style:none;
  font-size:16px; font-weight:600; line-height:1.4; color:var(--text);
}
.pp-faq__item summary::-webkit-details-marker{ display:none; }
.pp-faq__item summary::after{ content:"+"; float:right; margin-left:12px; color:var(--text-dim); }
.pp-faq__item[open] summary::after{ content:"−"; }
.pp-faq__item p{ margin:0 0 16px; font-size:15px; line-height:1.6; color:var(--text-mid); }
@media (max-width:700px){ .pp-ficha__lista{ grid-template-columns:1fr; } }

/* Estoque da loja visível antes da foto, inclusive no celular. */
.pp-local{
  display:flex; flex-direction:column; gap:4px; text-align:left;
  padding:12px 16px; margin:0 0 18px; border:1px solid var(--line-soft);
  border-radius:12px; font-size:13px; line-height:1.4;
}
.pp-local strong{font-size:14px;}
.pp-local a{color:var(--text-mid);text-decoration:underline;}