/* Achados Mais Vendidos: cabeçalho fixo, vitrine dos mais baratos, capa da data, seções por categoria.
   Cada data tem a sua paleta (bloco [data-tema]); o tema "casa" é o do dia comum. */
:root, [data-tema="casa"] {
  --bg:#f6f7f5; --fg:#16201d; --mut:#5b6763; --card:#ffffff; --line:#dfe4e1;
  --ac:#0e6b5c; --ac-fg:#ffffff; --tag:#e8553a;
  --capa-bg:#0e6b5c; --capa-fg:#f3fbf8; --capa-mut:#bfe3da; --capa-ac:#f3fbf8; --capa-ac-fg:#0e6b5c; --destaque:#ffd9a8;
  --f-disp:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
[data-tema="black-friday"] { --bg:#0b0a0f; --fg:#f4f1fa; --mut:#a59fb5; --card:#17151f; --line:#2b2838; --ac:#ff2e88; --ac-fg:#fff; --tag:#ff2e88;
  --capa-bg:#0b0a0f; --capa-fg:#fff; --capa-mut:#b9b2cc; --capa-ac:#ff2e88; --capa-ac-fg:#fff; --destaque:#ff2e88; color-scheme:dark }
[data-tema="natal"] { --bg:#f7f3ee; --fg:#1d1a17; --mut:#6b625a; --card:#fff; --line:#e8e0d6; --ac:#b3122e; --ac-fg:#fff; --tag:#b3122e;
  --capa-bg:#123d2c; --capa-fg:#fbf6ea; --capa-mut:#c9dccf; --capa-ac:#b3122e; --capa-ac-fg:#fff; --destaque:#e9c46a }
[data-tema="verao"] { --bg:#f2f8fb; --fg:#10283a; --mut:#4f6b7d; --card:#fff; --line:#d6e6ef; --ac:#0077b6; --ac-fg:#fff; --tag:#e08a00;
  --capa-bg:#0a6fa8; --capa-fg:#fff; --capa-mut:#cde8f6; --capa-ac:#ffc93c; --capa-ac-fg:#10283a; --destaque:#ffc93c }
[data-tema="volta-as-aulas"] { --bg:#f6f6ef; --fg:#1f2a44; --mut:#5d6578; --card:#fff; --line:#e1e1d6; --ac:#2d5bd3; --ac-fg:#fff; --tag:#e63946;
  --capa-bg:#fffdf3; --capa-fg:#1f2a44; --capa-mut:#5d6578; --capa-ac:#2d5bd3; --capa-ac-fg:#fff; --destaque:#e63946 }
[data-tema="pascoa"] { --bg:#fbf7f2; --fg:#3b2418; --mut:#7a5f50; --card:#fff; --line:#eee1d4; --ac:#6b3e26; --ac-fg:#fff; --tag:#c9567a;
  --capa-bg:#4a2b1c; --capa-fg:#fbeee0; --capa-mut:#e6c9b0; --capa-ac:#f2a7bd; --capa-ac-fg:#3b2418; --destaque:#f2a7bd }
[data-tema="dia-das-maes"] { --bg:#fdf5f6; --fg:#3a1d2a; --mut:#7b5b68; --card:#fff; --line:#f0dde3; --ac:#b8336a; --ac-fg:#fff; --tag:#b8336a;
  --capa-bg:#f6d7df; --capa-fg:#3a1d2a; --capa-mut:#6e4a59; --capa-ac:#b8336a; --capa-ac-fg:#fff; --destaque:#b8336a }
[data-tema="dia-dos-namorados"] { --bg:#fff5f5; --fg:#2b0a10; --mut:#7d5258; --card:#fff; --line:#f3dcdf; --ac:#d7263d; --ac-fg:#fff; --tag:#d7263d;
  --capa-bg:#2b0a10; --capa-fg:#ffe8ea; --capa-mut:#d9aab0; --capa-ac:#ff4d6d; --capa-ac-fg:#fff; --destaque:#ff4d6d }
[data-tema="inverno"] { --bg:#eef2f6; --fg:#142233; --mut:#56677a; --card:#fff; --line:#d8e0e9; --ac:#2b5d8a; --ac-fg:#fff; --tag:#c9772b;
  --capa-bg:#1d3550; --capa-fg:#eef4fb; --capa-mut:#b7c8da; --capa-ac:#e8a25c; --capa-ac-fg:#142233; --destaque:#e8a25c }
[data-tema="festa-junina"] { --bg:#fff8ec; --fg:#3a2410; --mut:#7a6048; --card:#fff; --line:#f0e0c6; --ac:#d9480f; --ac-fg:#fff; --tag:#2b8a3e;
  --capa-bg:#f9e2b8; --capa-fg:#3a2410; --capa-mut:#6e5236; --capa-ac:#d9480f; --capa-ac-fg:#fff; --destaque:#d9480f }
[data-tema="dia-dos-pais"] { --bg:#f3f4f1; --fg:#1b2420; --mut:#5c6660; --card:#fff; --line:#dfe2dc; --ac:#2f4f3e; --ac-fg:#fff; --tag:#a87b2e;
  --capa-bg:#1b2420; --capa-fg:#f1efe6; --capa-mut:#b9bdb2; --capa-ac:#c9a15a; --capa-ac-fg:#1b2420; --destaque:#c9a15a }
[data-tema="dia-das-criancas"] { --bg:#fffbea; --fg:#1d1d3b; --mut:#5d5d7a; --card:#fff; --line:#efe8c8; --ac:#5b3cc4; --ac-fg:#fff; --tag:#ff6b35;
  --capa-bg:#5b3cc4; --capa-fg:#fff; --capa-mut:#ddd4ff; --capa-ac:#ffd23f; --capa-ac-fg:#1d1d3b; --destaque:#ffd23f }

* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:15px; line-height:1.5; padding-top:env(safe-area-inset-top,0px) }
a { color:inherit }
button { font:inherit; cursor:pointer }
img { max-width:100% }
:focus-visible { outline:3px solid var(--tag); outline-offset:2px }
.wrap { max-width:1120px; margin:0 auto; padding-inline:16px }

.topo { position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line) }
.topo-in { display:flex; align-items:center; gap:16px; padding-block:12px }
.marca { font-family:var(--f-disp); font-weight:800; font-size:19px; letter-spacing:-.02em; line-height:1; white-space:nowrap; text-decoration:none }
.marca span { color:var(--ac) }
.chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; min-width:0; flex:1 }
.chips::-webkit-scrollbar { display:none }
.chips a { white-space:nowrap; text-decoration:none; font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid var(--line) }
.chips a.dest { background:var(--ac); color:var(--ac-fg); border-color:var(--ac) }

/* vitrine */
.vitrine { padding-block:14px; border-bottom:1px solid var(--line) }
.vit-box { position:relative; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden }
.vit-trilho { display:flex; transition:transform .6s cubic-bezier(.65,0,.25,1) }
.vit-slide { flex:0 0 100%; display:grid; grid-template-columns:minmax(0,230px) minmax(0,1fr); gap:20px; align-items:center; padding:16px 64px 16px 16px; min-width:0 }
.vit-foto { background:#fff; border-radius:12px; aspect-ratio:1/1; max-width:100%; position:relative; display:block }
.vit-foto img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10px }
.vit-txt { display:grid; gap:6px; min-width:0 }
.vit-eye { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tag) }
.vit-nome { font-family:var(--f-disp); font-weight:700; font-size:clamp(18px,2.4vw,26px); line-height:1.15; letter-spacing:-.01em; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.vit-preco { font-family:var(--f-disp); font-weight:800; font-size:clamp(30px,4.4vw,46px); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums }
.vit-meta { color:var(--mut); font-size:13px }
.vit-txt .ver { justify-self:start; padding:10px 18px; font-size:14px }
.vit-seta { position:absolute; bottom:14px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--fg); font-size:18px; line-height:1; display:grid; place-items:center }
.vit-seta.ant { right:52px } .vit-seta.prox { right:12px }
.vit-pontos { position:absolute; right:16px; top:14px; display:flex; gap:6px }
.vit-pontos button { width:8px; height:8px; border-radius:50%; border:0; padding:0; background:var(--line) }
.vit-pontos button[aria-current="true"] { background:var(--tag); width:22px; border-radius:4px }
@media (max-width:640px) {
  .vit-pontos { top:auto; bottom:28px; left:16px; right:auto }
  .vit-slide { grid-template-columns:110px minmax(0,1fr); gap:12px; padding:12px 12px 56px }
  .vit-txt .ver { padding:8px 14px; font-size:13px }
}

/* capa da data */
.capa { background:var(--capa-bg); color:var(--capa-fg); position:relative; overflow:hidden }
.capa canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.capa-in { position:relative; padding-block:44px 40px; display:grid; gap:14px }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--capa-mut) }
.capa h1 { font-family:var(--f-disp); font-weight:800; font-size:clamp(34px,6.4vw,72px); line-height:.95; letter-spacing:-.035em; margin:0; text-wrap:balance; max-width:16ch }
.capa h1 em { font-style:normal; color:var(--destaque) }
[data-tema="black-friday"] .capa h1 em { color:transparent; -webkit-text-stroke:2px var(--destaque) }
.capa p { margin:0; max-width:56ch; color:var(--capa-mut); font-size:16px }
.capa .linha { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:6px }
.cta { display:inline-flex; align-items:center; gap:8px; background:var(--capa-ac); color:var(--capa-ac-fg); border:0; border-radius:999px; padding:11px 18px; font-weight:700; font-size:14px; text-decoration:none }
.contagem { display:flex; gap:8px; font-variant-numeric:tabular-nums }
.contagem div { border:1.5px solid var(--capa-ac); border-radius:10px; padding:6px 10px; text-align:center; min-width:58px }
.contagem b { display:block; font-family:var(--f-disp); font-size:26px; line-height:1 }
.contagem small { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--capa-mut) }
/* caderno (volta às aulas) e bandeirinhas (festa junina) */
[data-tema="volta-as-aulas"] .capa { background-image:repeating-linear-gradient(to bottom, transparent 0 31px, #c9d6f2 31px 32px); border-bottom:1px solid var(--line) }
[data-tema="volta-as-aulas"] .capa::before { content:""; position:absolute; top:0; bottom:0; left:max(16px, calc(50% - 584px)); width:2px; background:#f2a5ab }
.bandeirinhas { display:none }
[data-tema="festa-junina"] .bandeirinhas { display:block; position:relative; height:40px }
.bandeirinhas svg { display:block; width:100%; height:40px }

/* seções */
main { padding-block:28px 40px; display:grid; gap:44px }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap }
.sec-head h2 { font-family:var(--f-disp); font-weight:700; font-size:clamp(22px,3.2vw,30px); letter-spacing:-.02em; margin:0; text-wrap:balance }
.sec-head span { color:var(--mut); font-size:13px }
.grade { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
@media (max-width:860px) { .grade { grid-template-columns:repeat(3,1fr) } }
@media (max-width:640px) { .grade { grid-template-columns:repeat(2,1fr) } }
.vazio { background:var(--card); border:1px dashed var(--line); border-radius:14px; padding:18px; color:var(--mut) }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; min-width:0; transition:transform .25s ease, box-shadow .25s ease; animation:sobe .5s both }
.card:hover { transform:translateY(-3px); box-shadow:0 10px 24px -14px rgba(0,0,0,.35) }
.grade .card:nth-child(2){animation-delay:.04s}.grade .card:nth-child(3){animation-delay:.08s}.grade .card:nth-child(4){animation-delay:.12s}
.grade .card:nth-child(5){animation-delay:.16s}.grade .card:nth-child(6){animation-delay:.2s}.grade .card:nth-child(7){animation-delay:.24s}.grade .card:nth-child(8){animation-delay:.28s}
@keyframes sobe { from { transform:translateY(10px); opacity:.001 } to { transform:none; opacity:1 } }
.foto { position:relative; aspect-ratio:1/1; background:#fff; display:block; max-width:100% }
.foto img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10px }
.rank { position:absolute; top:8px; left:8px; background:var(--fg); color:var(--bg); font-family:var(--f-disp); font-weight:800; font-size:12px; border-radius:8px; padding:3px 8px; font-variant-numeric:tabular-nums }
.card .info { padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1 }
.cat { font-size:11px; color:var(--mut); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.nome { font-size:14px; line-height:1.3; margin:0; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em }
.preco { font-family:var(--f-disp); font-weight:700; font-size:20px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; margin-top:auto }
.preco small { display:block; font-family:var(--f-body); font-weight:400; font-size:11px; color:var(--mut); letter-spacing:0 }
.ver { display:block; text-align:center; text-decoration:none; border:0; border-radius:10px; background:var(--ac); color:var(--ac-fg); font-weight:700; font-size:13px; padding:9px 10px }

.rodape { border-top:1px solid var(--line); padding-block:22px 34px; color:var(--mut); font-size:13px }
.rodape p { margin:0 0 6px }
.rodape strong { color:var(--fg) }

/* barra do site de teste */
.teste { background:#1d2321; color:#eef2f0; font-size:13px; padding-block:10px }
.teste .wrap { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center }
.teste b { color:#ffd36b; letter-spacing:.06em; text-transform:uppercase; font-size:11px }
.teste select { font:inherit; font-size:13px; padding:5px 8px; border-radius:8px; border:1px solid #3c4743; background:#2a312e; color:#eef2f0 }
.teste .sit { padding:2px 10px; border-radius:999px; font-weight:700; font-size:12px; background:#3c4743 }
.teste .sit.aprovado { background:#1f8a4c } .teste .sit.reprovado { background:#b3122e }
.teste a { color:#ffd36b }
.teste .info-t { color:#9aa6a1 }

@media (prefers-reduced-motion:reduce) { .card { animation:none } .card, .vit-trilho { transition:none } }