/* ═══════════════════════════════════════════════════════════
   BASE — cores, tipografia, botões e utilitários.
   Tudo o que tem cor no site sai destas variáveis. Para mudar a cara
   da loja, comece por aqui, não pelos componentes.

   Padrão: tema CLARO (html.theme-light), como Amazon e Mercado Livre.
   O escuro continua existindo nas Configurações.
   ═══════════════════════════════════════════════════════════ */

/* ── Tema escuro (opcional) ── */
:root {
  --bg:        #0e0e10;   /* fundo da página */
  --surface:   #18181b;   /* cards, painéis, gavetas */
  --surface-2: #202024;   /* fundo de foto, campos, hover */
  --line:      #2c2c31;   /* bordas e divisórias */
  --text:      #f2f2f4;   /* texto principal */
  --text-2:    #a3a3ab;   /* texto secundário */
  --brand:     #d4af4f;   /* dourado da marca (sobre fundo escuro) */
  --brand-ink: #e3c46d;   /* dourado usado como TEXTO */
  --ok:        #3ecf7f;   /* desconto, confirmação */
  --danger:    #ff6b5e;
  --fav:       #ff5a7a;
  --scrim:     rgba(0,0,0,0.6);
  --shadow-1:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:  0 12px 32px rgba(0,0,0,0.45);
}

/* ── Tema claro (padrão) ── */
html.theme-light {
  --bg:        #f1f1ef;
  --surface:   #ffffff;
  --surface-2: #f6f6f4;
  --line:      #e3e3df;
  --text:      #16161a;
  --text-2:    #5c5c66;
  --brand:     #c9a84c;
  --brand-ink: #8a6b1f;   /* contraste 5,0 sobre branco */
  --ok:        #0a8a4a;
  --danger:    #c0392b;
  --fav:       #e0245e;
  --scrim:     rgba(10,10,12,0.45);
  --shadow-1:  0 1px 2px rgba(16,16,20,0.06), 0 1px 3px rgba(16,16,20,0.05);
  --shadow-2:  0 14px 36px rgba(16,16,20,0.12);
}

/* ── Fixos (iguais nos dois temas) ── */
:root {
  /* cabeçalho sempre escuro, como Amazon — a marca dourada pede fundo escuro */
  --hdr:      #121214;
  --hdr-2:    #1c1c20;
  --hdr-line: #2a2a2f;
  --hdr-text: #f5f5f7;
  --hdr-mute: #a1a1aa;

  /* botão de compra: dourado com texto escuro (legível e "de loja") */
  --cta:       #e8b84a;
  --cta-hover: #dcaa36;
  --cta-ink:   #16161a;

  --radius:    12px;
  --radius-sm: 8px;
  --wrap:      1280px;
  --gutter:    16px;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  --font:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;   /* só na assinatura da marca */

  /* nomes antigos — ainda usados em estilos inline do JavaScript */
  --muted: var(--text-2);
  --gold:  var(--brand-ink);
  --white: var(--text);
  --border: var(--line);
  --card:  var(--surface);
}
@media (min-width:900px) { :root { --gutter:24px; } }

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img { max-width:100%; }
button, input { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Largura máxima do conteúdo, centralizado */
.wrap { width:100%; max-width:var(--wrap); margin-left:auto; margin-right:auto; padding-left:var(--gutter); padding-right:var(--gutter); }

/* ── Botões ── */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--cta); color:var(--cta-ink); border:none; border-radius:999px;
  padding:12px 24px; font-size:14px; font-weight:600; letter-spacing:0.1px;
  transition:background 0.18s var(--ease), transform 0.12s var(--ease);
}
.btn-primary:hover { background:var(--cta-hover); }
.btn-primary:active { transform:scale(0.98); }

/* ── Títulos de seção ── */
.section-head-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; }
.section-title { font-size:19px; font-weight:700; letter-spacing:-0.2px; line-height:1.25; }
.section-link {
  background:none; border:none; color:var(--brand-ink); font-size:13.5px; font-weight:600;
  white-space:nowrap; padding:0;
}
.section-link:hover { text-decoration:underline; }
@media (min-width:900px) { .section-title { font-size:24px; } }

/* ── Aviso rápido (toast) ── */
.toast {
  position:fixed; left:50%; bottom:84px; z-index:600;
  transform:translateX(-50%) translateY(16px);
  background:#1d1d21; color:#fff; border-radius:22px; padding:11px 20px;
  font-size:13.5px; font-weight:500; box-shadow:0 10px 30px rgba(0,0,0,0.25);
  opacity:0; pointer-events:none;
  /* nome de produto longo quebra a linha em vez de passar da tela */
  width:max-content; max-width:calc(100vw - 32px); text-align:center; line-height:1.4;
  transition:opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media (min-width:900px) { .toast { bottom:32px; } }

/* ── Esqueleto de carregamento ── */
.skel-card { background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1); }
.skel-img, .skel-line {
  background:linear-gradient(100deg, var(--surface-2) 30%, var(--line) 50%, var(--surface-2) 70%);
  background-size:200% 100%; animation:skelMove 1.4s ease-in-out infinite;
}
.skel-img { aspect-ratio:1; }
.skel-line { height:11px; margin:14px 14px 0; border-radius:4px; width:70%; }
.skel-line.w2 { width:40%; margin:8px 14px 16px; }
@keyframes skelMove { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

@keyframes slideUp { from { transform:translateY(100%); } to { transform:none; } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes popIn   { from { opacity:0; transform:translateY(10px) scale(0.98); } to { opacity:1; transform:none; } }

/* Barra de rolagem discreta */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:10px; border:2px solid var(--bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}