/* ============================================================
   eMec Design System — Tokens (tema claro Mercado Livre)
   ============================================================ */
:root{
  /* Paleta Mercado Livre */
  --ml-yellow:#FFE600;
  --ml-yellow-soft:#FFFBE5;
  --ml-deep:#2D3277;
  /* Contraste AA (Fase 68): os tons abaixo mantêm texto branco >= 4.5:1
     nos botões e texto colorido >= 4.5:1 sobre branco. */
  --accent:#2968C8;            /* azul de links e ações */
  --accent-dark:#1D4ED8;
  --brand:#007A3D;             /* verde: ação principal (comprar), sucesso */
  --brand-dark:#005F2F;
  --danger:#B91C1C;
  --warn:#C2410C;

  /* Neutros */
  --bg:#EBEBEB;
  --panel:#FFFFFF;
  --panel2:#F5F5F5;
  --panel-solid:#FFFFFFEB;
  --line:#E5E5E5;
  --line-strong:#D9D9D9;
  --text:#333333;
  --muted:#666666;

  /* Forma */
  --radius:8px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(0,0,0,.08);
  --shadow-lg:0 8px 24px -6px rgba(0,0,0,.18);
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-title:'Poppins','Inter',system-ui,sans-serif;

  /* Alias legacy (compatibilidade com templates existentes) */
  --bg-alias:#EBEBEB;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.45;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-title);color:var(--text)}
.hidden{display:none!important}
button{cursor:pointer;border:none;border-radius:var(--radius);padding:11px 14px;font-weight:600;font-size:.92rem;font-family:var(--font-body)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

label{display:block;font-size:.8rem;color:var(--muted);margin:10px 0 4px;font-weight:600}
input,select,textarea{
  width:100%;padding:11px 12px;border-radius:var(--radius);border:1px solid var(--line-strong);
  background:#fff;color:var(--text);font-size:.95rem;font-family:var(--font-body);
  transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(52,131,250,.12);outline:none}
::placeholder{color:#a3a3a3;opacity:1}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;font-weight:600;font-size:.92rem;line-height:1.25;background:var(--brand);color:#fff;border-radius:var(--radius);text-decoration:none}
.btn:hover{background:var(--brand-dark);text-decoration:none}
.btn.blue{background:var(--accent);color:#fff}
.btn.blue:hover{background:var(--accent-dark)}
/* Onda 6 (Fases 109/113): variantes sem estilo inline — mini extra pequeno,
   crescimento em linhas flex, espaçamentos verticais/horizontais padronizados. */
.btn.tiny{font-size:.72rem;padding:3px 8px}
.btn.grow{flex:1}
.btn.gap-left{margin-left:6px}
.btn.stack{margin-top:10px}
.btn.wfull{width:100%}
/* Chips de filtro (Fase 109): estado ativo só por classe, sem estilo inline. */
.badge.on{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Remover foto em miniatura (Fase 109 e 120): posicionamento via classe. */
.pw-remove{position:absolute;top:-6px;right:-6px;padding:2px 6px;font-size:.6rem}
/* ---------- Ficha do produto (Fase 113, Onda 6) ---------- */
.pd-compat{display:flex;flex-wrap:wrap;gap:6px}
/* Barra de compra fixa: só no celular, dentro da seção do produto. */
.pd-mobile-bar{display:none}
@media (max-width:640px){
  .pd-mobile-bar{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 4vw;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 14px #00000012}
  .pd-mobile-bar .btn{flex:1;padding:12px}
  .pd-mobile-price{font-weight:800;font-size:1.05rem;color:var(--brand)}
}
/* ---------- Carrinho (Fase 114, Onda 6) ---------- */
.cart-step{display:flex;align-items:center;gap:8px;margin:4px 0 10px;font-size:.92rem}
.cart-step-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:999px;background:var(--accent);color:#fff;font-size:.75rem;font-weight:800}
.cart-store{margin:10px 0 2px;font-size:.95rem}
.cart-group{padding:6px 0}
.cart-group + .cart-group{border-top:1px solid var(--line);margin-top:10px}
.cart-empty{text-align:center;padding:28px 10px;display:flex;flex-direction:column;gap:6px;align-items:center}
.btn.secondary{background:#fff;color:var(--accent);border:1px solid var(--line-strong)}
.btn.secondary:hover{border-color:var(--accent);color:var(--accent-dark);text-decoration:none}
.btn.secondary.active, .btn.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;font-weight:700;box-shadow:0 2px 8px rgba(41,104,200,.35)}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{filter:brightness(.92)}
/* Onda 4 (Fase 50.4): botão fantasma (ação terciária, menus e ferramentas). */
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Scrollbars discretas */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#c9c9c9;border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}