/* Cartão de produto: sem moldura.

   Antes era caixa branca com borda e sombra difusa — o arranjo padrão de
   e-commerce gerado. Agora o produto assenta direto no fundo e só o fio
   da grade separa um do outro; a cor entra no hover. */

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--papel);
  transition: background .18s;
}
.card:hover { background: #fff; }

.card-abrir {
  display: flex; flex-direction: column; flex: 1;
  border: 0; padding: 0; background: none; text-align: left;
}

/* 4/3 em vez de quadrado. A foto quadrada ocupava 57% da altura do
   card — proporcao de catalogo impresso. Loja inverte: foto que baste
   para reconhecer, e o resto do espaco para decidir. */
.card-foto {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; padding: 12px;
  overflow: hidden; min-height: 0;
}
.card-foto img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card-foto img { transform: scale(1.06); }

.card-corpo { display: grid; gap: 5px; padding: 0 12px 10px; flex: 1; align-content: start; }
.card-linha {
  font-size: .66rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-fraco);
}
.card-nome { font-size: .9rem; font-weight: 600; line-height: 1.32; }

/* Sem o codigo, 47 produtos se chamam "Serra Copo Bimetalica" e nada os
   distingue no card. */
.card-sku-linha {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

/* Subcategoria: diz de que tipo e a peca sem depender do nome, que na
   linha Dewalt costuma ser generico ("Serra Copo Bimetalica"). */
.card-subcat {
  align-self: start;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-medio);
  background: var(--nuvem);
  padding: 3px 8px;
}

.card-medidas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.medida {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px;
  background: var(--laranja-fraco); color: var(--laranja-forte);
}
.medida-mais { background: var(--nuvem); color: var(--texto-medio); }

/* Pe do cartao: o bloco comercial.

   O botao ficava com opacity 0 ate o hover. Era escolha deliberada, com
   fallback correto para toque — mas esconder a acao e o sinal mais forte
   de vitrine que existe: vitrine se olha, loja se opera. Agora ele fica,
   e e cheio em vez de contornado, porque contorno lê como opcao
   secundaria ao lado de um preco. */
.card-pe {
  display: grid; gap: 7px;
  margin-top: auto; padding: 10px 12px 12px;
  border-top: 1px solid var(--linha);
}

/* O lugar onde mora o preco na loja. Vazio, o olho registra a falta
   mesmo sem saber do que — entao recebe a condicao de venda. */
.card-valor {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-medio);
}

.card-add {
  height: 38px; width: 100%;
  border: 0; background: var(--grafite); color: #fff;
  font-variation-settings: "wdth" 112; font-weight: 700;
  font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
  transition: background .16s;
}
.card-add:hover { background: var(--laranja); }

/* Quantidade: aparece no lugar do botao depois que o item entra na
   lista. Um estado de cada vez — mostrar os dois obrigaria o cliente a
   entender a diferenca entre adicionar e aumentar, que e distincao
   nossa, nao dele. */
/* [hidden] do navegador e display:none sem classe, entao qualquer regra
   de classe com display o vence. Sem esta linha o seletor aparecia junto
   com o botao, e o card mostrava os dois estados ao mesmo tempo. */
.card-qtd[hidden] { display: none; }

.card-qtd {
  display: grid; grid-template-columns: 34px 1fr 34px;
  height: 38px;
  border: 1.5px solid var(--laranja);
}
.card-qtd button {
  border: 0; background: var(--laranja-fraco); color: var(--laranja-forte);
  font-size: 1.05rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.card-qtd button:hover { background: var(--laranja); color: #fff; }
.card-qtd input {
  border: 0; background: none; text-align: center;
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--texto);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.card-qtd input:focus-visible { outline: 2px solid var(--laranja); outline-offset: -2px; }

/* Produto sem foto (a linha Dewalt ainda aguarda o pacote de imagens do
   fabricante): em vez de moldura vazia, um bloco técnico com o código. */
.card-sku {
  display: grid; place-content: center; gap: 6px;
  aspect-ratio: 1 / 1; padding: 18px;
  background: var(--preto); color: var(--claro-fraco); text-align: center;
}
.card-sku b {
  font-variation-settings: "wdth" 118; font-weight: 900;
  font-size: 1.15rem; letter-spacing: -.01em; color: var(--laranja);
  word-break: break-all; line-height: 1.05;
}
.card-sku span {
  font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}

/* .card-abrir virou <a>: precisa desfazer o que o navegador poe em link. */
.card-abrir { color: inherit; text-decoration: none; }

/* Produto sem foto E sem código: a subcategoria ocupa o lugar do código.
   Ela é rótulo, não número — então vem menor e em maiúsculas espaçadas,
   sem o corpo do código, que grita porque é o que se dita no balcão. */
.card-sku b.sem-codigo,
.painel-sku b.sem-codigo {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--claro-medio); font-variation-settings: "wdth" 100; font-weight: 700;
  word-break: normal;
}