/* A ficha do produto, em pagina.

   Vem da ficha do Mercado Livre (/p/MLB21600735), com duas diferencas
   que valem escrever.

   A PRIMEIRA E A LATERAL. A ficha deles nao tem nenhuma: ali ela e o fim
   do caminho, e quem quiser outra coisa volta para a busca — faz sentido
   num marketplace, onde a busca e a porta de tudo. Aqui o catalogo tem
   1.305 itens em quatorze linhas e boa parte da visita e gente olhando o
   que existe, entao a ficha tambem precisa ser um lugar de onde se
   continua andando. Foi decisao do Edison, e esta certa.

   A SEGUNDA E O QUE OCUPA A COLUNA DA DIREITA. La e a caixa de compra:
   preco, parcelamento, frete, estoque, vendedor, reputacao. Aqui nao ha
   nada disso — ha "manda a lista que a gente orca". A caixa e menor e
   diz outra coisa, mas fica no mesmo lugar, porque o lugar e o certo:
   e para onde o olho vai depois da foto. */

.ficha-pagina { padding-block: 16px 40px; }

.migalha {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: .78rem; color: var(--texto-fraco);
}
.migalha a { color: var(--acao); }
.migalha a:hover { text-decoration: underline; }
.migalha b { font-weight: 600; color: var(--texto-medio); }

/* Mesma inversao da listagem: a lateral e a primeira coluna e o
   segundo filho, para o h1 do produto vir antes dos titulos do menu. */
.ficha-corpo {
  display: grid; grid-template-columns: 232px 1fr; gap: 26px;
  align-items: start;
}
.ficha-corpo > .nav-lateral { grid-column: 1; grid-row: 1; }
.ficha-corpo > .ficha { grid-column: 2; grid-row: 1; }


/* ── Lateral de navegacao ─────────────────────────────────────────── */

.nav-lateral { position: sticky; top: 14px; display: grid; gap: 20px; }
.nav-fechar { display: none; justify-self: end; padding: 4px; }
.nav-fechar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.nav-bloco { display: grid; gap: 6px; }
.nav-bloco h2 {
  font-size: .7rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-fraco);
  margin-bottom: 2px;
}
.nav-bloco a {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px;
  border-radius: var(--canto);
  font-size: .82rem; color: var(--texto-medio);
  transition: background .14s, color .14s;
}
.nav-bloco a:hover { background: var(--chao); color: var(--texto); }
.nav-bloco a[aria-current="page"] {
  background: var(--laranja-fraco);
  color: var(--laranja-forte); font-weight: 700;
}
.nav-bloco a i { margin-left: auto; font-style: normal; font-size: .72rem; color: var(--texto-fraco); }

/* Os itens vizinhos, com miniatura. E o que responde "o que mais tem
   parecido com isto?" sem obrigar a voltar para a listagem. */
.nav-item { align-items: flex-start !important; gap: 9px !important; padding: 6px 7px !important; }
.nav-item span {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--linha); border-radius: var(--canto);
  overflow: hidden;
}
.nav-item span img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.nav-item b {
  font-size: .76rem; font-weight: 500; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nav-item[aria-current="page"] b { font-weight: 700; }

.nav-ver {
  padding: 5px 7px;
  font-size: .76rem; font-weight: 700; color: var(--acao);
}
.nav-ver:hover { text-decoration: underline; }


/* ── A ficha ──────────────────────────────────────────────────────── */

.ficha { display: grid; gap: 22px; }

.ficha-alto {
  display: grid; grid-template-columns: 1fr 300px; gap: 24px;
  align-items: start;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--canto);
}

.ficha-principal {
  display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, 1.15fr);
  gap: 20px; align-items: start;
}

.ficha-foto {
  display: grid; place-items: center;
  aspect-ratio: 1; padding: 16px;
  background: #fff;
  border-radius: var(--canto);
  overflow: hidden;
}
.ficha-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ficha-sem-foto {
  display: grid; place-items: center; align-content: center; gap: 6px;
  aspect-ratio: 1; padding: 20px; text-align: center;
  background: var(--chao); border-radius: var(--canto);
}
.ficha-sem-foto span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); }
.ficha-sem-foto b { font-size: 1.4rem; font-weight: 800; color: var(--laranja-forte); overflow-wrap: anywhere; }

.ficha-dados { display: grid; gap: 10px; align-content: start; }
.ficha-linha { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-fraco); }
.ficha-dados h1 { font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 800; letter-spacing: -.018em; line-height: 1.22; }
.ficha-codigo { font-size: .8rem; color: var(--texto-fraco); }

.ficha-saber { display: grid; gap: 7px; margin-top: 4px; }
.ficha-saber h2 { font-size: .88rem; font-weight: 700; }
.ficha-saber p { font-size: .86rem; color: var(--texto-medio); }
.ficha-saber ul { display: grid; gap: 5px; padding-left: 17px; list-style: disc; }
.ficha-saber li { font-size: .85rem; color: var(--texto-medio); }

.ficha-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-tags span {
  padding: 3px 10px;
  background: var(--chao); border-radius: 999px;
  font-size: .75rem; font-weight: 600; color: var(--texto-medio);
}


/* ── Caixa de contato ─────────────────────────────────────────────────
   O lugar que no marketplace e a caixa de compra. Aqui nao ha preco,
   frete nem estoque — ha a unica coisa que a loja de fato oferece pela
   tela: resposta rapida de um vendedor. */

.caixa {
  position: sticky; top: 14px;
  display: grid; gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--canto);
  box-shadow: var(--sombra);
}
.caixa-consulta { display: grid; gap: 2px; }
.caixa-consulta b { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.caixa-consulta span { font-size: .78rem; color: var(--texto-medio); }

.caixa-campo { display: grid; gap: 6px; }
.caixa-campo h3 { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-fraco); }

.escolhas { display: flex; flex-wrap: wrap; gap: 6px; }
.escolha {
  padding: 6px 11px;
  background: #fff;
  border: 1px solid var(--linha-forte); border-radius: var(--canto);
  font-size: .78rem; font-weight: 600;
  transition: border-color .14s, background .14s;
}
.escolha:hover { border-color: var(--laranja); }
.escolha[aria-pressed="true"] {
  background: var(--laranja-fraco); border-color: var(--laranja);
  color: var(--laranja-forte); font-weight: 800;
}

.qtd { display: inline-flex; align-items: center; }
.qtd button {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--linha-forte);
  font-size: 1rem; font-weight: 700;
}
.qtd button:first-child { border-radius: var(--canto) 0 0 var(--canto); }
.qtd button:last-child { border-radius: 0 var(--canto) var(--canto) 0; }
.qtd button:hover { background: var(--chao); }
.qtd input {
  width: 54px; height: 34px;
  border: 1px solid var(--linha-forte); border-inline: 0;
  text-align: center; font: inherit; font-weight: 700;
  /* As setinhas do campo numerico tem 10px de alvo e ficam coladas uma
     na outra — os botoes ao lado existem justamente para substitui-las. */
  -moz-appearance: textfield;
}
.qtd input::-webkit-outer-spin-button,
.qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.caixa .botao { width: 100%; }
.caixa-acoes { display: grid; gap: 7px; }
.caixa .esta-na-lista {
  background: var(--laranja-fraco); border-color: var(--laranja); color: var(--laranja-forte);
}

.caixa-notas { display: grid; gap: 8px; padding-top: 4px; border-top: 1px solid var(--linha); }
.caixa-nota { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; color: var(--texto-medio); }
.caixa-nota svg { width: 15px; height: 15px; flex: none; margin-top: 2px; fill: none; stroke: var(--laranja-forte); stroke-width: 1.8; }
.caixa-nota b { font-weight: 700; color: var(--texto); }


/* ── Ficha tecnica ────────────────────────────────────────────────────
   Duas colunas, como as "Caracteristicas do produto" deles. A da Dewalt
   tem vinte linhas: em coluna unica ela empurra tudo que vem depois para
   fora da tela. */

.ficha-tecnica {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--canto);
}
.ficha-tecnica h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; }
.ficha-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.ficha-par {
  display: flex; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
  font-size: .82rem;
}
.ficha-par dt { flex: 0 0 45%; color: var(--texto-fraco); overflow-wrap: anywhere; }
.ficha-par dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; }


/* ── Telas estreitas ──────────────────────────────────────────────── */

.veu { position: fixed; inset: 0; z-index: 94; background: rgba(0, 0, 0, .45); }
.veu[hidden] { display: none; }

.abrir-nav {
  display: none; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; margin-bottom: 12px;
  border: 1px solid var(--linha-forte); border-radius: var(--canto);
  font-size: .8rem; font-weight: 700;
}
.abrir-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 1080px) {
  .ficha-alto { grid-template-columns: 1fr; }
  .caixa { position: static; }
}

@media (max-width: 620px) {
  .ficha-principal { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .ficha-corpo { grid-template-columns: 1fr; }
  .ficha-corpo > .ficha { grid-column: 1; }
  .abrir-nav { display: inline-flex; }
  .nav-fechar { display: block; }
  .nav-lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 95;
    width: min(320px, 86vw);
    padding: 16px;
    background: #fff;
    box-shadow: var(--sombra-alta);
    overflow-y: auto;
    translate: -100% 0;
    transition: translate .22s cubic-bezier(.3, .8, .3, 1);
  }
  .nav-lateral[data-aberta="true"] { translate: 0 0; }
}


/* ── Coluna da direita ────────────────────────────────────────────────
   Caixa de contato e cartao da loja empilhados, como a caixa de compra
   e o cartao do vendedor na ficha deles. */

.coluna-direita { display: grid; gap: 12px; position: sticky; top: 14px; }
/* O sticky passou para o invólucro: deixado na caixa, as duas peças se
   prendiam separado e o cartao da loja subia por cima dela ao rolar. */
.coluna-direita .caixa { position: static; }

.loja {
  display: grid; gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--canto);
}
.loja-topo { display: flex; align-items: center; gap: 10px; }
/* Logo inteiro, como no cabecalho: o nome faz parte da marca. */
.loja-marca { flex: none; display: block; height: 42px; }
.loja-marca img { height: 100%; width: auto; display: block; }
.loja-topo b { display: block; font-size: .88rem; font-weight: 800; letter-spacing: -.01em; }
.loja-nota { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--texto-fraco); }
.loja-nota svg { width: 12px; height: 12px; fill: var(--laranja); }

.loja-dados { display: grid; gap: 9px; margin: 0; }
.loja-dados > div { display: grid; gap: 1px; }
.loja-dados dt { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); }
.loja-dados dd { margin: 0; font-size: .8rem; color: var(--texto-medio); line-height: 1.4; }
.loja-dados dd a { color: var(--acao); font-weight: 600; }
.loja-dados dd a:hover { text-decoration: underline; }

.loja-rota { font-size: .8rem; font-weight: 700; color: var(--acao); }
.loja-rota:hover { text-decoration: underline; }

@media (max-width: 1080px) { .coluna-direita { position: static; } }


/* ── Vista explodida ──────────────────────────────────────────────────
   O desenho com as pecas numeradas, que e o que quem conserta a
   ferramenta procura. Quase nenhum concorrente publica isso, entao ele
   nao e uma nota de rodape: e um bloco proprio, com borda laranja, logo
   acima das notas de entrega.

   So aparece quando o produto tem o arquivo — hoje 18 dos 65 da PDR. */
.caixa-vista {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px;
  background: var(--laranja-fraco);
  border: 1px solid var(--laranja);
  border-radius: var(--canto);
  transition: background .15s;
}
.caixa-vista:hover { background: #fff; }
.caixa-vista svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--laranja-forte); stroke-width: 1.7; }
.caixa-vista span { display: grid; gap: 1px; font-size: .76rem; color: var(--texto-medio); }
.caixa-vista b { font-size: .84rem; font-weight: 800; color: var(--laranja-forte); }

/* O involucro da foto com as miniaturas.

   Existe porque .ficha-principal e grade de duas colunas, e um terceiro
   filho cai na coluna errada — o mesmo motivo pelo qual .ficha-alto
   agrupa foto e dados. Aqui as duas partes empilham. */
.ficha-fotos { display: grid; gap: 0; align-content: start; }

/* ── Miniaturas da ficha ──────────────────────────────────────────────

   So aparecem quando ha mais de uma foto. Com uma, a fileira seria
   enfeite: ocupa espaco e nao oferece escolha nenhuma.

   Rolam de lado em vez de quebrar linha. A foto grande e a informacao;
   empurra-la para fora da tela porque chegaram oito miniaturas seria
   trocar o principal pelo acessorio. */
.ficha-miniaturas {
  display: flex; gap: 8px; margin-top: 10px;
  overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximate;
}

.ficha-miniatura {
  flex: none; width: 64px; height: 64px; padding: 4px;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--canto);
  cursor: pointer; scroll-snap-align: start;
  transition: border-color .12s;
}
.ficha-miniatura:hover { border-color: var(--linha-forte); }

/* A que esta valendo tem a borda laranja e nao reage ao hover: o estado
   vem do aria-pressed, e nao de uma classe — assim quem le a tela e
   quem ve a tela recebem a mesma informacao, de uma fonte so. */
.ficha-miniatura[aria-pressed="true"] { border-color: var(--laranja); border-width: 2px; padding: 3px; }

.ficha-miniatura img {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply;
}