/* LUMIÈRE · largo.css (641 px ou mais: tablet e computador)
 * Desde a direção nova (30/10/2026) as peças comuns (barra de vantagens, cabeçalho, busca, menu, sacola,
 * aviso, rodapé e cartão de produto) estão em comum.css, para todas as larguras. Aqui ficam só as medidas
 * da página no largo e as peças que as páginas internas ainda usam até ganharem o layout novo (etiqueta,
 * ficha). O desenho de cada página vai no CSS da página, carregado só nela. */

/* ---------- medidas do largo ---------- */
:root {
  --sangria: 36px;                    /* em 1440 px: conteúdo de 1368 px */
  --conteudo: 1368px;
  --vao: 24px;
  --altura-cabecalho: 96px;
  --altura-cabecalho-compacto: 96px;
  --largura-util: min(100vw - 2 * var(--sangria), var(--conteudo));
}
@media (max-width: 1199px) {
  :root { --sangria: 32px; --vao: 20px; --gaveta-sacola: 400px; }
}

html { scroll-padding-top: 140px; }
/* sacola aberta: a página não rola; a largura da barra de rolagem vira margem (sem empurrar a página) */
html.trava { overflow: hidden; padding-right: var(--barra-rolagem, 0px); }
.conteudo { width: min(100% - 2 * var(--sangria), var(--conteudo)); margin-inline: auto; }
/* peça que só existe no celular (menu em folha, barra de compra...): celular.css */
.so-celular { display: none !important; }

/* ---------- etiqueta presa por fio (páginas internas da loja editorial, até o layout novo delas) ---------- */
.etiqueta { position: absolute; left: var(--x); top: var(--y); z-index: 4; width: 0; height: 0; pointer-events: none; }
.etiqueta__fio { position: absolute; left: 0; top: 0; max-width: none; overflow: visible; }
.etiqueta__fio line { stroke: var(--fio, var(--tinta)); stroke-width: 1; }
.etiqueta__fio circle { fill: var(--fio, var(--tinta)); }
.etiqueta__papel {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  translate: -50% -100%;
  padding: 6px 10px 7px;
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta);
  font: 500 var(--t-micro-2) / 1.2 var(--f-texto);
  white-space: nowrap;
}

/* ---------- ficha técnica ---------- */
.ficha {
  display: grid;
  grid-template-columns: minmax(96px, 32%) 1fr;
  margin: 0;
  border-bottom: 1px solid var(--linha);
  font: 400 var(--t-mono) / 1.5 var(--f-texto);
  font-variant-numeric: tabular-nums lining-nums;
}
.ficha div { display: contents; }
.ficha dt, .ficha dd { margin: 0; padding: 11px 0; border-top: 1px solid var(--linha); }
.ficha dt { padding-right: 16px; color: var(--tinta-2); }
.ficha a { color: inherit; text-decoration-color: var(--cobre); text-underline-offset: 4px; }
.ficha__cabeca { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 600 13px / 1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; }
.ficha__marca { width: 8px; height: 8px; border-radius: 50%; background: var(--cobre); }
.ficha__preco { font: 700 var(--t-preco) / 1 var(--f-texto); letter-spacing: 0; }