/* ============================================================
   FATIA E-10 · Direção B — CSS único das 5 telas
   Regra: cores/tamanhos SÓ via tokens (../tokens.css)
   Breakpoints: ~640 e ~1024 (e 1440 p/ grade 5 col)
   ============================================================ */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: var(--brand); }
button { font-family: inherit; font-size: inherit; }

/* foco visível em tudo (blueprint §6) */
:focus-visible {
  outline: var(--focus-w) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

/* pular para conteúdo (teclado) */
.skip {
  position: absolute; left: var(--sp-2); top: calc(-1 * var(--sp-16));
  background: var(--surface); color: var(--brand);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-m);
  z-index: 60; transition: top var(--ease);
}
.skip:focus { top: var(--sp-2); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-4); }
/* E-27: reserva altura da área principal para o rodapé (renderizado por JS)
   nascer abaixo da dobra e não empurrar o conteúdo ao carregar (corta CLS) */
#main { min-height: 82vh; }

/* números tabulares em TODO preço */
.money, .price-usd, .price-brl, .selo, .cambio-bar, .tot {
  font-feature-settings: var(--price-font-feat);
  font-variant-numeric: tabular-nums;
}

/* ---------- header comum ---------- */
.hdr { background: var(--header-bg); border-bottom: 1px solid var(--line); }
/* só a linha de busca gruda no topo; promo/câmbio/trust rolam normalmente.
   (E-27: hero/câmbio/trust passaram para DENTRO do <header> — landmark banner —
   para satisfazer a regra de acessibilidade "todo conteúdo em landmark") */
.hdr-in { position: sticky; top: 0; z-index: 40; background: var(--header-bg); }
.hdr-in {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); max-width: 1280px; margin: 0 auto;
  flex-wrap: wrap;
}
.logo {
  font-weight: var(--fw-bold); font-size: var(--fs-l); color: var(--brand);
  text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center;
  min-height: var(--tap-min);
}
.logo .stag {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--warn);
  background: var(--warn-bg); border-radius: var(--r-s);
  padding: 0 var(--sp-1); margin-left: var(--sp-2); letter-spacing: .06em;
}
.busca { flex: 1 1 200px; display: flex; min-width: 140px; }
.busca input {
  flex: 1; height: var(--field-h); border: 1px solid var(--field-border);
  border-radius: var(--field-r) 0 0 var(--field-r); padding: 0 var(--sp-3);
  font-size: var(--fs-base); background: var(--surface); color: var(--ink); min-width: 0;
}
.busca input:focus { border-color: var(--field-border-focus); outline: none; box-shadow: 0 0 0 var(--focus-w) var(--focus-ring); }
.busca button {
  min-width: var(--tap-min); height: var(--btn-h); border: 1px solid var(--brand);
  background: var(--btn-pri-bg); color: var(--btn-pri-ink);
  border-radius: 0 var(--btn-r) var(--btn-r) 0; cursor: pointer;
}
.hdr-acts { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.lang {
  min-height: var(--tap-min); min-width: var(--tap-min);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--r-m); cursor: pointer; padding: 0 var(--sp-2);
  font-size: var(--fs-s); font-weight: var(--fw-semi);
}
.lang .on { color: var(--brand); }
.cart-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 var(--sp-2);
  text-decoration: none; color: var(--ink); font-size: var(--fs-m); position: relative;
}
.cart-count {
  background: var(--brand); color: var(--brand-ink);
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  min-width: var(--sp-5); height: var(--sp-5); line-height: var(--sp-5); text-align: center;
  padding: 0 var(--sp-1);
}

/* barra de câmbio carimbada */
.cambio-bar {
  background: var(--cambio-bg); color: var(--cambio-ink);
  font-size: var(--fs-s); text-align: center; padding: var(--sp-1) var(--sp-4);
}
.cambio-bar.err { background: var(--warn-bg); color: var(--warn); }

/* trust bar */
.trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-6);
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-s); color: var(--muted);
}
.trust span { white-space: nowrap; }

/* footer */
.foot {
  margin-top: var(--sp-16); background: var(--surface); border-top: 1px solid var(--line);
  padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--muted); font-size: var(--fs-s);
}

/* ---------- botões (reuso) ---------- */
.btn, .btn-sec, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--btn-h); padding: 0 var(--sp-5); border-radius: var(--btn-r);
  font-size: var(--fs-base); font-weight: var(--fw-semi); cursor: pointer;
  text-decoration: none; transition: background var(--ease), color var(--ease);
}
.btn { background: var(--btn-pri-bg); color: var(--btn-pri-ink); border: 1px solid var(--btn-pri-bg); }
.btn:hover { background: var(--btn-pri-bg-hover); border-color: var(--btn-pri-bg-hover); }
.btn-sec { background: var(--surface); color: var(--btn-sec-ink); border: 1px solid var(--btn-sec-border); }
.btn-sec:hover { background: var(--brand-soft); }
.btn-ghost { background: none; border: 1px solid var(--line); color: var(--ink); }
.btn[disabled], .btn-sec[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-block { width: 100%; }

/* ---------- campos (reuso) ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field label { font-size: var(--fs-s); font-weight: var(--fw-med); color: var(--ink); }
.field input, .field select {
  height: var(--field-h); border: 1px solid var(--field-border); border-radius: var(--field-r);
  padding: 0 var(--sp-3); font-size: var(--fs-base); font-family: inherit;
  background: var(--surface); color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus {
  border-color: var(--field-border-focus); outline: none;
  box-shadow: 0 0 0 var(--focus-w) var(--focus-ring);
}
.field.err input, .field.err select { border-color: var(--field-border-err); }
.field .msg-err { color: var(--err); font-size: var(--fs-s); min-height: var(--sp-4); }
.field .hint { color: var(--muted); font-size: var(--fs-xs); }

/* ---------- badges / selos / stock (reuso) ---------- */
.badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  border-radius: var(--r-s); padding: var(--sp-1) var(--sp-2); line-height: var(--lh-tight);
}
.badge-cond { background: var(--brand-soft); color: var(--brand); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-err { background: var(--err-bg); color: var(--err); }
.selo {
  display: inline-block; background: var(--selo-bg); color: var(--selo-ink);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  border-radius: var(--r-s); padding: var(--sp-1) var(--sp-2);
}
.stock { font-size: var(--fs-s); font-weight: var(--fw-med); }
.stock-ok { color: var(--stock-ok-ink); }
.stock-err { color: var(--stock-err-ink); }

/* preço duplo — US$ âncora + R$ carimbado */
.price-usd { font-size: var(--price-usd-size); color: var(--price-usd-color); font-weight: var(--fw-bold); }
.price-brl { font-size: var(--price-brl-size); color: var(--price-brl-color); }

/* ---------- card de produto (reuso) ---------- */
.card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-r);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: box-shadow var(--ease);
}
.card:hover { box-shadow: var(--shadow-raise); }
.card a.card-link { position: absolute; inset: 0; z-index: 1; }
.card .card-img { aspect-ratio: 1; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.card .card-img img { width: 100%; height: 100%; object-fit: contain; }
.card .card-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.card .card-nome {
  font-size: var(--fs-s); color: var(--ink); margin: 0; font-weight: var(--fw-reg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * var(--fs-s) * var(--lh-base));
}
.card .card-marca { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.card .card-cod { font-size: var(--fs-xs); color: var(--muted); }
.card .price-usd { font-size: var(--fs-l); }
.card .badges { display: flex; gap: var(--sp-1); flex-wrap: wrap; min-height: var(--sp-5); }

/* grade de cards: 2 / 3 / 4 / 5 colunas */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1440px) { .grid { grid-template-columns: repeat(5, 1fr); } }

/* skeleton loading */
@keyframes sk { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }
.sk { animation: sk 1.2s infinite; background: var(--line); border-radius: var(--r-s); }
.sk-card { height: 280px; border-radius: var(--card-r); }

/* estados vazio / erro */
.estado {
  text-align: center; padding: var(--sp-12) var(--sp-4); color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
}
.estado .ico { font-size: var(--fs-xxl); }
.estado h2 { color: var(--ink); font-size: var(--fs-l); margin: 0; }
/* E-36 · vazio de SEÇÃO (PDP reseñas/preguntas). O .estado acima é o vazio de
   PÁGINA: usado dentro da seção abria ~200px de vão com dois emoji soltos.
   Variante própria — o .estado global segue intocado para listado/carrito. */
.vacio-fase {
  border: 1px solid var(--line); border-radius: var(--card-r);
  background: var(--card-bg); padding: 0 var(--sp-5);
}
.vacio-fase-linha {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) 0; color: var(--muted);
  font-size: var(--fs-base); line-height: 1.5;
}
.vacio-fase-linha + .vacio-fase-linha { border-top: 1px solid var(--line); }
.vacio-fase-linha p { margin: 0; max-width: 62ch; text-wrap: pretty; }
.vacio-fase-ico { flex: 0 0 auto; margin-top: 2px; color: var(--muted); opacity: .75; }
@media (min-width: 1024px) {
  .vacio-fase { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); padding: var(--sp-1) var(--sp-5); }
  .vacio-fase-linha { padding: var(--sp-5) 0; }
  .vacio-fase-linha + .vacio-fase-linha { border-top: 0; border-left: 1px solid var(--line); padding-left: var(--sp-6); }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes vacioFaseSobe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .vacio-fase-linha { animation: vacioFaseSobe .45s cubic-bezier(.16, 1, .3, 1) both; }
  .vacio-fase-linha + .vacio-fase-linha { animation-delay: 70ms; }
}

.alert { border-radius: var(--r-m); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-s); margin: var(--sp-3) 0; }
.alert-err { background: var(--err-bg); color: var(--err); }
.alert-warn { background: var(--warn-bg); color: var(--warn); }
.alert-ok { background: var(--ok-bg); color: var(--ok); }

/* ---------- LISTAGEM ---------- */
.list-wrap { display: block; padding-top: var(--sp-4); }
@media (min-width: 1024px) {
  .list-wrap { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-6); align-items: start; }
}
.list-top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
/* E-27: reserva a linha do título (preenchido por JS após carregar o catálogo)
   para não empurrar a linha de contagem/ordenação ao aparecer (corta CLS) */
.list-top h1 { font-size: var(--fs-xl); margin: 0; flex: 1 1 100%; min-height: 1.25em; }
.res-count { color: var(--muted); font-size: var(--fs-s); }
.orden { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); }
.orden select {
  height: var(--field-h); border: 1px solid var(--field-border); border-radius: var(--field-r);
  background: var(--surface); color: var(--ink); padding: 0 var(--sp-2); font-size: var(--fs-s);
}
.btn-filtros { display: inline-flex; }
@media (min-width: 1024px) { .btn-filtros { display: none; } }

/* facetas: sidebar desktop / gaveta mobile */
.facetas {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--sp-4);
}
@media (max-width: 1023.98px) {
  .facetas {
    position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); z-index: 55;
    transform: translateX(-105%); transition: transform var(--ease);
    overflow-y: auto; border-radius: 0; border: none; box-shadow: var(--shadow-raise);
  }
  .facetas.open { transform: translateX(0); }
}
.facetas h2 { font-size: var(--fs-m); margin: 0 0 var(--sp-3); display: flex; justify-content: space-between; align-items: center; }
.faceta { border-top: 1px solid var(--line); padding: var(--sp-3) 0; }
.faceta > h3 { font-size: var(--fs-s); margin: 0 0 var(--sp-2); font-weight: var(--fw-semi); }
.faceta label.chk {
  display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s);
  min-height: calc(var(--tap-min) - var(--sp-4)); cursor: pointer; color: var(--ink);
}
.faceta label.chk .n { color: var(--muted); margin-left: auto; font-size: var(--fs-xs); }
.faceta input[type="checkbox"], .faceta input[type="radio"] { width: var(--sp-4); height: var(--sp-4); accent-color: var(--brand); }
.faceta .precio-mm { display: flex; gap: var(--sp-2); align-items: center; }
.faceta .precio-mm input {
  width: 100%; height: var(--field-h); border: 1px solid var(--field-border);
  border-radius: var(--field-r); padding: 0 var(--sp-2); font-size: var(--fs-s);
  background: var(--surface); color: var(--ink);
}
.faceta .buscar-marca {
  width: 100%; height: var(--field-h); border: 1px solid var(--field-border);
  border-radius: var(--field-r); padding: 0 var(--sp-2); font-size: var(--fs-s); margin-bottom: var(--sp-2);
  background: var(--surface); color: var(--ink);
}
.backdrop {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}
.backdrop.on { display: block; }
.mostrar-mas { display: flex; justify-content: center; margin: var(--sp-8) 0; }

/* ---------- PDP ---------- */
.pdp { display: block; padding-top: var(--sp-4); }
@media (min-width: 1024px) {
  .pdp { display: grid; grid-template-columns: 1fr 420px; gap: var(--sp-8); align-items: start; }
}
.galeria { position: sticky; top: var(--sp-16); }
.galeria-main {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  overflow: hidden; aspect-ratio: 1; display: flex; scroll-snap-type: x mandatory;
  overflow-x: auto; scrollbar-width: none;
}
.galeria-main figure { margin: 0; flex: 0 0 100%; scroll-snap-align: center; cursor: zoom-in; overflow: hidden; }
.galeria-main img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--ease); }
.galeria-main figure.zoom { cursor: zoom-out; }
.galeria-main figure.zoom img { transform: scale(2); }
.galeria-thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.galeria-thumbs button {
  width: var(--sp-16); height: var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); padding: var(--sp-1); cursor: pointer;
}
.galeria-thumbs button[aria-current="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.galeria-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.compra { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
@media (min-width: 1024px) { .compra { margin-top: 0; } }
.pdp h1 { font-size: var(--fs-xl); line-height: var(--lh-tight); margin: 0; }
.prova { color: var(--muted); font-size: var(--fs-s); }

.bloco-precio {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
}
.precio-mercado { font-size: var(--fs-s); color: var(--muted); }
.precio-mercado .tachado { text-decoration: line-through; }
.bloco-precio .price-usd { font-size: var(--fs-xxl); }
.cuotas-line { font-size: var(--fs-s); color: var(--ok); font-weight: var(--fw-med); }

.frete-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4); }
.frete-box h2 { font-size: var(--fs-base); margin: 0 0 var(--sp-2); }
.frete-form { display: flex; gap: var(--sp-2); }
.frete-form input {
  flex: 1; height: var(--field-h); border: 1px solid var(--field-border); border-radius: var(--field-r);
  padding: 0 var(--sp-3); font-size: var(--fs-base); background: var(--surface); color: var(--ink); min-width: 0;
}
.frete-opts { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.frete-opt {
  border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-3);
  display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-s);
  align-items: center; cursor: pointer;
}
.frete-opt.sel { border-color: var(--brand); background: var(--brand-soft); }
.frete-opt .servico { font-weight: var(--fw-semi); }
.frete-opt .llega { color: var(--muted); }
.frete-opt .val { font-weight: var(--fw-bold); white-space: nowrap; }
.frete-opt .val.gratis { color: var(--ok); }
.ahorro { color: var(--ok); font-size: var(--fs-s); font-weight: var(--fw-med); margin-top: var(--sp-2); }

.vendido { font-size: var(--fs-s); color: var(--muted); display: flex; flex-direction: column; gap: var(--sp-1); }
.vendido b { color: var(--ink); }

.cta-duo { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (min-width: 640px) { .cta-duo { flex-direction: row; } .cta-duo > * { flex: 1; } }
/* barra fixa mobile */
.cta-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4); display: flex; gap: var(--sp-2);
  box-shadow: var(--shadow-raise);
}
.cta-sticky > * { flex: 1; }
@media (min-width: 1024px) { .cta-sticky { display: none; } }
body.has-sticky { padding-bottom: calc(var(--btn-h) + var(--sp-6)); }
@media (min-width: 1024px) { body.has-sticky { padding-bottom: 0; } }

.bullets { margin: 0; padding-left: var(--sp-5); font-size: var(--fs-s); color: var(--ink); display: flex; flex-direction: column; gap: var(--sp-1); }
.specs { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.specs th, .specs td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { color: var(--muted); font-weight: var(--fw-med); width: 40%; }
.pdp-sec { margin-top: var(--sp-10); }
.pdp-sec h2 { font-size: var(--fs-l); margin: 0 0 var(--sp-4); }

/* ---------- CARRITO ---------- */
.cart-wrap { display: block; padding-top: var(--sp-4); }
@media (min-width: 1024px) { .cart-wrap { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-6); align-items: start; } }
.grupo-vendedor { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.grupo-vendedor > h2 { font-size: var(--fs-base); margin: 0; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--brand-soft); }
.cart-item { display: grid; grid-template-columns: var(--sp-16) 1fr auto; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line); align-items: center; }
.cart-item:last-child { border-bottom: none; }
.cart-item img { width: var(--sp-16); height: var(--sp-16); object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.cart-item .nm { font-size: var(--fs-s); }
.cart-item .nm a { color: var(--ink); text-decoration: none; }
.cart-item .nm a:hover { text-decoration: underline; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.qty button { width: var(--tap-min); height: calc(var(--tap-min) - var(--sp-2)); border: none; background: var(--surface); cursor: pointer; font-size: var(--fs-m); color: var(--brand); }
.qty input { width: var(--sp-12); height: calc(var(--tap-min) - var(--sp-2)); border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-size: var(--fs-base); background: var(--surface); color: var(--ink); }
.rm { background: none; border: none; color: var(--muted); font-size: var(--fs-s); cursor: pointer; min-height: var(--tap-min); text-decoration: underline; }
.rm:hover { color: var(--err); }

.progress-399 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.progress-399 .txt { font-size: var(--fs-s); margin-bottom: var(--sp-2); }
.progress-399 .txt.ok { color: var(--ok); font-weight: var(--fw-semi); }
.barra { height: var(--sp-2); background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.barra > div { height: 100%; background: var(--ok); border-radius: var(--r-pill); transition: width var(--ease); }

.resumo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4); margin-top: var(--sp-4); }
@media (min-width: 1024px) { .resumo { margin-top: 0; position: sticky; top: var(--sp-16); } }
.resumo h2 { font-size: var(--fs-m); margin: 0 0 var(--sp-3); }
.linha-tot { display: flex; justify-content: space-between; font-size: var(--fs-s); padding: var(--sp-1) 0; }
.linha-tot.tot { font-size: var(--fs-m); font-weight: var(--fw-bold); border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: var(--sp-3); }

/* ---------- CHECKOUT ---------- */
.chk-wrap { display: block; padding-top: var(--sp-4); }
@media (min-width: 1024px) { .chk-wrap { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-6); align-items: start; } }
.pasos { display: flex; gap: var(--sp-1); list-style: none; padding: 0; margin: 0 0 var(--sp-6); counter-reset: paso; flex-wrap: wrap; }
.pasos li {
  counter-increment: paso; flex: 1 1 auto; text-align: center; font-size: var(--fs-xs);
  color: var(--muted); padding: var(--sp-2) var(--sp-1); border-bottom: var(--focus-w) solid var(--line);
  min-width: var(--sp-16);
}
.pasos li::before { content: counter(paso) ". "; font-weight: var(--fw-bold); }
.pasos li[aria-current="step"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: var(--fw-semi); }
.pasos li.done { color: var(--ok); border-bottom-color: var(--ok); }
.paso-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-6) var(--sp-4); }
.paso-panel h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-l); }
.paso-nav { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.paso-nav .btn { flex: 1; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-3); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } .form-row.r31 { grid-template-columns: 2fr 1fr; } }

/* tabs de pago */
.tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.tabs [role="tab"] {
  flex: 1; min-height: var(--tap-min); border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface); cursor: pointer; font-weight: var(--fw-semi); color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.tabs [role="tab"][aria-selected="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.pix-off { font-size: var(--fs-xs); background: var(--ok-bg); color: var(--ok); border-radius: var(--r-s); padding: 0 var(--sp-1); font-weight: var(--fw-bold); }

/* resumo colapsável no mobile */
.chk-resumo summary {
  cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center;
  gap: var(--sp-2); font-weight: var(--fw-semi); padding: var(--sp-2) 0;
}
@media (min-width: 1024px) { .chk-resumo summary { pointer-events: none; } .chk-resumo summary .chev { display: none; } }
.mini-item { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-s); padding: var(--sp-1) 0; }
.mini-item img { width: var(--sp-10); height: var(--sp-10); object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-s); }
.mini-item .q { color: var(--muted); }
.mini-item .v { margin-left: auto; white-space: nowrap; }

.cambio-frozen { background: var(--brand-soft); border-radius: var(--r-m); padding: var(--sp-3); font-size: var(--fs-s); margin: var(--sp-3) 0; }

/* revisão */
.rev-bloco { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); font-size: var(--fs-s); }
.rev-bloco h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-s); color: var(--muted); display: flex; justify-content: space-between; }
.rev-bloco h3 button { background: none; border: none; color: var(--brand); cursor: pointer; text-decoration: underline; font-size: var(--fs-xs); min-height: auto; }

/* PIX QR */
.pix-box { text-align: center; padding: var(--sp-4); }
.pix-box img.qr { width: 200px; height: 200px; margin: 0 auto var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-m); image-rendering: pixelated; }
.pix-copia {
  display: flex; gap: var(--sp-2); margin-top: var(--sp-3);
}
.pix-copia input {
  flex: 1; height: var(--field-h); border: 1px solid var(--field-border); border-radius: var(--field-r);
  padding: 0 var(--sp-2); font-size: var(--fs-xs); background: var(--bg); color: var(--muted); min-width: 0;
}

/* ---------- CONFIRMACION ---------- */
.conf-box { max-width: 640px; margin: var(--sp-8) auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-8) var(--sp-6); text-align: center; }
.conf-box .ico { font-size: var(--fs-xxl); }
.conf-box h1 { font-size: var(--fs-xl); margin: var(--sp-2) 0; }
.conf-box .num { font-size: var(--fs-l); font-weight: var(--fw-bold); color: var(--brand); }
.conf-det { text-align: left; margin-top: var(--sp-6); }

/* util */
.solo-mobile { display: inline-flex; }
@media (min-width: 1024px) { .solo-mobile { display: none !important; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-s); }

/* ============================================================
   E-12 · site completo em staging (Direção B, sem ajustes finos)
   ============================================================ */

/* banner frete grátis US$ 399 — fixo e fino, topo de todas as telas */
.hero-banner {
  background: var(--brand); color: var(--brand-ink); text-align: center;
  font-size: var(--fs-s); padding: var(--sp-1) var(--sp-3);
}
.hero-banner b { font-weight: var(--fw-bold); }

/* header: link da conta */
.cuenta-link { font-size: var(--fs-l); text-decoration: none; padding: var(--sp-1); }

/* autocomplete da busca */
.busca { position: relative; }
.sug {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: var(--shadow-raise); max-height: 70vh; overflow: auto; text-align: left;
}
.sug-h { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted);
  text-transform: uppercase; padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.sug-it {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); text-decoration: none; color: var(--ink);
  font-size: var(--fs-s); min-height: var(--tap-min);
}
.sug-it:hover, .sug-it.on { background: var(--brand-soft); }
.sug-it .n { margin-left: auto; color: var(--muted); }
.sug-prod img { width: 36px; height: 36px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; }
.sug-prod .sug-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-prod .sug-precio { margin-left: auto; font-weight: var(--fw-semi); white-space: nowrap; }
.sug-corr { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--warn); background: var(--warn-bg); }
.sug-todo { color: var(--brand); font-weight: var(--fw-semi); border-top: 1px solid var(--line); }
.sug-corr-line { font-size: var(--fs-s); color: var(--warn); margin: 0 0 var(--sp-3); }

/* home */
.home-sec { margin: var(--sp-8) 0; }
.home-sec h2 { font-size: var(--fs-l); margin: 0 0 var(--sp-4); }
.home-sec-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.ver-todo { color: var(--brand); text-decoration: none; font-size: var(--fs-s); font-weight: var(--fw-semi); white-space: nowrap; }
.carrusel {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 220px);
  gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2);
  scroll-snap-type: x proximity;
}
.carrusel .card { scroll-snap-align: start; }
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-r);
  padding: var(--sp-4); text-decoration: none; color: var(--ink); text-align: center;
  transition: box-shadow var(--ease);
}
.cat-card:hover { box-shadow: var(--shadow-raise); }
.cat-img { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xxl); }
.cat-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-nome { font-size: var(--fs-s); font-weight: var(--fw-semi); }
.cat-n { font-size: var(--fs-xs); color: var(--muted); }
.como { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-6); text-align: center; }
.como-pasos { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-6); }
@media (min-width: 640px) { .como-pasos { grid-template-columns: repeat(3, 1fr); } }
.como .paso .ico { font-size: var(--fs-xxl); }
.como .paso h3 { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-m); }
.como .paso p { margin: 0; color: var(--muted); font-size: var(--fs-s); }

/* rodapé institucional */
.foot { text-align: left; }
.foot-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); max-width: 720px; margin: 0 auto var(--sp-6); }
.foot-cols h3 { font-size: var(--fs-s); text-transform: uppercase; color: var(--ink); margin: 0 0 var(--sp-2); }
.foot-cols a { display: block; color: var(--muted); text-decoration: none; padding: var(--sp-1) 0; min-height: auto; }
.foot-cols a:hover { color: var(--brand); text-decoration: underline; }
.foot-emp, .foot-stag { text-align: center; margin: var(--sp-1) 0; }

/* breadcrumb PDP */
.miga { font-size: var(--fs-s); color: var(--muted); margin-bottom: var(--sp-3); }
.miga a { color: var(--muted); text-decoration: none; }
.miga a:hover { color: var(--brand); text-decoration: underline; }

/* baixa disponibilidade (regra 4 — texto + cor, WhatsApp protagonista) */
.stock-warn { color: var(--stock-warn-ink); background: var(--stock-warn-bg); border-radius: var(--r-s); padding: 0 var(--sp-2); display: inline-block; }
.card-baja .card-img img { filter: grayscale(35%); opacity: .9; }
.card-baja-cta { font-size: var(--fs-xs); color: var(--brand); font-weight: var(--fw-semi); }
.baja-box { background: var(--warn-bg); border: 1px solid var(--warn); border-radius: var(--r-m); padding: var(--sp-4); margin: var(--sp-4) 0; }
.baja-box p { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-s); }
.btn-wa { background: #1faa53; border-color: #1faa53; }
.btn-wa:hover { background: #178a43; border-color: #178a43; }

/* variantes (matriz visual — renderiza só com dados reais) */
.var-matriz { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); }
.var-opt {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min);
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface);
  padding: var(--sp-1) var(--sp-3); cursor: pointer; font-size: var(--fs-s);
}
.var-opt img { width: 28px; height: 28px; object-fit: contain; }
.var-opt.sel { border-color: var(--brand); background: var(--brand-soft); }
.var-opt.off { opacity: .45; text-decoration: line-through; }

/* zero resultados: sugestões */
.zero-cats { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

/* conta sem senha */
.cta-box { max-width: 480px; margin: var(--sp-8) auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-6); }
.cta-box h1 { font-size: var(--fs-xl); margin: 0 0 var(--sp-2); }
.demo-cod {
  background: var(--warn-bg); border: 1px dashed var(--warn); border-radius: var(--r-m);
  padding: var(--sp-4); text-align: center; margin: var(--sp-4) 0; font-size: var(--fs-s);
}
.demo-cod .cod { display: block; font-size: var(--fs-xxl); font-weight: var(--fw-bold); letter-spacing: .2em; margin-top: var(--sp-2); }
.pedidos-lista { display: flex; flex-direction: column; gap: var(--sp-3); }
.pedido-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4); }
.pedido-item .top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pedido-item .num { font-weight: var(--fw-bold); color: var(--brand); }
.pedido-item .fecha { color: var(--muted); font-size: var(--fs-s); }
.pedido-item .rastreio { margin-top: var(--sp-2); font-size: var(--fs-s); }
.cta-header { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-6) 0 var(--sp-4); }

/* páginas institucionais (ES padrão + toggle PT via html[lang]) */
.inst { max-width: 760px; margin: 0 auto; }
.inst h1 { font-size: var(--fs-xxl); margin: var(--sp-6) 0 var(--sp-4); }
.inst h2 { font-size: var(--fs-l); margin: var(--sp-6) 0 var(--sp-2); }
.inst p, .inst li { line-height: var(--lh-base); }
.inst .bloque { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0; }
html[lang="es"] [data-lang="pt"], html[lang="es"] [data-lang="en"] { display: none; }
html[lang="pt"] [data-lang="es"], html[lang="pt"] [data-lang="en"] { display: none; }
html[lang="en"] [data-lang="es"], html[lang="en"] [data-lang="pt"] { display: none; }
.landing-dupla { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 768px) { .landing-dupla { grid-template-columns: 1fr 1fr; } }
.landing-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-6); }
.landing-card h2 { margin-top: 0; }
.landing-card ul { padding-left: var(--sp-5); }
.landing-card .btn { margin-top: var(--sp-3); }
[hidden] { display: none !important; }