/* MaisVendidos — ranking no front. Prefixo .mvf- para não colidir com o tema/posts. */
.mvf-wrap { --mvf-blue:#0066B3; --mvf-green:#A4D233; --mvf-ink:#0A1B2E; --mvf-border:#e3e8ef; }
/* `1fr` equivale a `minmax(auto,1fr)`, e esse `auto` obriga a coluna a caber o
   min-content do card — que em tela estreita passa dos 320 px e empurra a página
   inteira para o lado. `minmax(0,1fr)` deixa a coluna encolher; o ellipsis do nome
   e o layout interno cuidam do resto. */
.mvf-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
@media (max-width:860px){ .mvf-grid { grid-template-columns:minmax(0,1fr); } }

/* Todo nível flex/grid precisa poder encolher: o `min-width:auto` padrão trava no
   min-content e o estouro reaparece no primeiro descendente. */
.mvf-ranking, .mvf-list, .mvf-item, .mvf-link, .mvf-name { min-width:0; }

.mvf-ranking { background:#fff; border:1px solid var(--mvf-border); border-radius:14px; padding:18px 18px 12px; }
.mvf-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px;
  border-bottom:2px solid var(--mvf-blue); padding-bottom:8px; }
.mvf-title { margin:0; font-size:1.05rem; font-weight:800; color:var(--mvf-ink); line-height:1.2; }
.mvf-period { font-size:.8rem; color:#5b6472; white-space:nowrap; }

.mvf-list { list-style:none; margin:0; padding:0; }
.mvf-item { border-bottom:1px solid #f0f2f5; }
.mvf-item:last-child { border-bottom:0; }
.mvf-link { display:flex; align-items:center; gap:12px; padding:9px 4px; text-decoration:none; color:inherit; }
a.mvf-link:hover { background:#f7fafc; border-radius:8px; }

.mvf-badge { flex:0 0 auto; width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%;
  background:var(--mvf-ink); color:#fff; font-weight:800; font-size:.85rem; }
.mvf-pos-1 .mvf-badge { background:var(--mvf-green); color:var(--mvf-ink); }
.mvf-pos-2 .mvf-badge { background:var(--mvf-blue); }
.mvf-pos-3 .mvf-badge { background:#3FA9F5; }

.mvf-thumb { flex:0 0 auto; width:64px; height:42px; border-radius:8px; overflow:hidden; background:#eef1f5;
  display:flex; align-items:center; justify-content:center; }
.mvf-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.mvf-thumb-empty { background:linear-gradient(135deg,#e6ebf1,#f3f6f9); }

.mvf-info { display:flex; flex:1 1 auto; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.mvf-name { font-weight:700; color:var(--mvf-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.mvf-link:hover .mvf-name { color:var(--mvf-blue); }
.mvf-qty { flex:0 0 auto; font-weight:800; color:var(--mvf-ink); font-variant-numeric:tabular-nums; }
.mvf-qty small { font-weight:600; color:#5c6b80; font-size:.72em; }

.mvf-foot { margin-top:8px; padding-top:8px; border-top:1px dashed var(--mvf-border); text-align:right;
  font-size:.85rem; color:#5b6472; }
.mvf-foot strong { color:var(--mvf-ink); }
.mvf-empty { color:#7a8594; font-style:italic; padding:14px 4px; }

/* ---------- Legibilidade em telas estreitas (mvc-320-linha) ----------
   Depois que a coluna passou a encolher, o espaço da linha ficou disputado: em
   320 px a miniatura de 64 px deixava só 53 px para o nome, que virava "BYD…".
   A foto é o elemento menos informativo da linha — sai primeiro. Com ela fora,
   o nome volta a caber inteiro. */
@media (max-width:420px){
  .mvf-thumb{display:none}
  .mvf-ranking{padding-left:12px;padding-right:12px}
  .mvf-link{gap:8px}
}