/* ==========================================================================
   ÉDMAIS — Componentes base  v1.0 (aprovado)
   Requer: tokens.css
   Estilo: limpo, cantos generosos, sombras difusas, pílulas.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

.ed {
  font-family: var(--fonte);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Tipografia ---------- */
.ed-display { font-size: var(--fs-display); font-weight: var(--peso-black); text-transform: uppercase; line-height: 1.02; letter-spacing: -0.03em; }
.ed-h1 { font-size: var(--fs-h1); font-weight: var(--peso-black); text-transform: uppercase; line-height: 1.1; letter-spacing: -0.02em; }
.ed-h2 { font-size: var(--fs-h2); font-weight: var(--peso-bold); line-height: 1.15; letter-spacing: -0.015em; }
.ed-h3 { font-size: var(--fs-h3); font-weight: var(--peso-bold); line-height: 1.2; letter-spacing: -0.01em; }
.ed-lead { font-size: var(--fs-lead); font-weight: var(--peso-regular); }
.ed-body { font-size: var(--fs-body); }
.ed-small { font-size: var(--fs-small); }
.ed-legal { font-size: var(--fs-legal); line-height: 1.45; color: var(--cor-texto-suave); }
.ed-caixa-alta { text-transform: uppercase; letter-spacing: .04em; }
.ed-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--peso-bold); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Botões ---------- */
.ed-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--alvo-toque);
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: var(--raio-pill);
  font-family: var(--fonte);
  font-size: var(--fs-botao);
  font-weight: var(--peso-bold);
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ed-btn svg { width: 20px; height: 20px; flex: none; transition: transform .2s var(--ease); }
.ed-btn:hover svg { transform: translateX(3px); }
.ed-btn:hover { transform: translateY(-1px); }
.ed-btn:active { transform: translateY(0); }
.ed-btn:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; }

.ed-btn--primario { background: var(--cor-cta); color: var(--ed-branco); box-shadow: 0 8px 20px -6px rgba(250, 22, 28, .55); }
.ed-btn--primario:hover { background: var(--cor-cta-hover); box-shadow: 0 12px 28px -8px rgba(250, 22, 28, .6); }

.ed-btn--secundario { background: var(--ed-azul); color: var(--ed-branco); box-shadow: 0 8px 20px -6px rgba(17, 51, 120, .45); }
.ed-btn--secundario:hover { background: var(--ed-azul-escuro); }

.ed-btn--contorno { background: transparent; color: var(--ed-azul); border-color: var(--ed-azul-25); }
.ed-btn--contorno:hover { border-color: var(--ed-azul); background: var(--ed-branco); }

.ed-btn--inverso { background: var(--ed-branco); color: var(--ed-azul); }
.ed-btn--inverso:hover { background: var(--ed-azul-12); }
.ed-btn--inverso:focus-visible { outline-color: var(--ed-branco); }

.ed-btn--vidro { background: rgba(255,255,255,.12); color: var(--ed-branco); border-color: rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.ed-btn--vidro:hover { background: rgba(255,255,255,.2); }

.ed-btn--link { background: none; padding: 0; min-height: auto; color: var(--ed-azul); font-size: var(--fs-body); box-shadow: none; }
.ed-btn--link:hover { transform: none; text-decoration: underline; text-underline-offset: 5px; }

.ed-btn--icone { width: var(--alvo-toque); padding: 0; }

.ed-btn--pequeno { min-height: 40px; padding: 0 18px; font-size: var(--fs-small); }
.ed-btn--pequeno.ed-btn--icone { width: 40px; padding: 0; }
/* Botão pequeno: só em azul (texto branco 14px sobre vermelho não atinge AA) */
.ed-btn--pequeno.ed-btn--primario { background: var(--ed-azul); box-shadow: none; }
.ed-btn--pequeno.ed-btn--primario:hover { background: var(--ed-azul-escuro); }

.ed-btn--bloco { width: 100%; }
.ed-btn[disabled], .ed-btn[aria-disabled="true"] { background: var(--ed-azul-12); color: var(--ed-azul-60); border-color: transparent; box-shadow: none; cursor: not-allowed; transform: none; }

/* ---------- Cards ---------- */
.ed-card {
  background: var(--ed-branco);
  border-radius: var(--raio-md);
  border: 1px solid rgba(17, 51, 120, .06);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

/* Card de produto */
.ed-produto { display: flex; flex-direction: column; position: relative; padding: 8px; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.ed-produto:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.ed-produto__img { aspect-ratio: 1 / 1; background: var(--ed-cinza-claro); border-radius: calc(var(--raio-md) - 6px); display: grid; place-items: center; overflow: hidden; }
.ed-produto__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.ed-produto:hover .ed-produto__img img { transform: scale(1.04); }
.ed-produto__corpo { padding: 12px 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.ed-produto__marca { font-size: 12px; font-weight: var(--peso-bold); color: var(--ed-azul-80); text-transform: uppercase; letter-spacing: .08em; }
.ed-produto__nome { font-size: var(--fs-body); font-weight: var(--peso-semibold); color: var(--ed-preto); margin: 0 0 4px; line-height: 1.3; }
.ed-produto__selo { position: absolute; top: 18px; left: 18px; }
.ed-produto__fav {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.92); color: var(--ed-azul); display: grid; place-items: center;
  box-shadow: var(--sombra-1); cursor: pointer; transition: color .2s, transform .2s var(--ease);
}
.ed-produto__fav:hover { color: var(--ed-vermelho); transform: scale(1.06); }
.ed-produto__fav[aria-pressed="true"] { color: var(--ed-vermelho); }
.ed-produto__fav[aria-pressed="true"] svg { fill: currentColor; }
.ed-produto__rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }

/* Card informativo (ex.: "Na loja / No app") */
.ed-info { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--raio-md); border: 1px solid rgba(17, 51, 120, .08); background: var(--ed-branco); }
.ed-info__icone { flex: 0 0 48px; height: 48px; border-radius: 14px; background: var(--ed-azul-06); color: var(--ed-azul); display: grid; place-items: center; }
.ed-info__titulo { font-weight: var(--peso-bold); margin: 0 0 2px; }
.ed-info__texto { margin: 0; font-size: var(--fs-small); color: var(--cor-texto-suave); }
.ed-info--escuro { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--ed-branco); backdrop-filter: blur(6px); }
.ed-info--escuro .ed-info__texto { color: rgba(255,255,255,.85); }
.ed-info--escuro .ed-info__icone { background: rgba(255,255,255,.12); color: var(--ed-branco); }

/* Card de aviso (ex.: Política de troca, Feriado) */
.ed-aviso { background: var(--ed-azul); color: var(--ed-branco); border-radius: var(--raio-lg); padding: 32px 28px; box-shadow: var(--sombra-3); position: relative; overflow: hidden; }
.ed-aviso__titulo { font-size: var(--fs-h2); font-weight: var(--peso-extrabold); letter-spacing: -0.02em; margin: 0 0 12px; }
.ed-aviso__faixa { display: inline-block; background: var(--ed-vermelho); color: var(--ed-branco); font-weight: var(--peso-bold); font-size: var(--fs-h3); padding: 6px 18px; border-radius: var(--raio-pill); }

/* ---------- Preço ---------- */
.ed-preco { display: flex; flex-direction: column; gap: 2px; }
.ed-preco__de { font-size: var(--fs-small); color: var(--cor-texto-suave); text-decoration: line-through; }
.ed-preco__por { font-size: 1.625rem; font-weight: var(--peso-black); color: var(--cor-oferta); line-height: 1.05; letter-spacing: -0.03em; }
.ed-preco__por small { font-size: .55em; font-weight: var(--peso-bold); vertical-align: .45em; margin-right: 3px; letter-spacing: 0; }
.ed-preco__parcela { font-size: var(--fs-small); color: var(--ed-azul-80); }
.ed-preco__parcela strong { font-weight: var(--peso-extrabold); color: var(--ed-azul); }

/* ---------- Selos ---------- */
/* Selo de preço (placa) */
.ed-selo-preco {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  background: var(--ed-vermelho); color: var(--ed-branco);
  border-radius: var(--raio-md);
  padding: 14px 22px 16px;
  line-height: 1;
  box-shadow: 0 16px 32px -12px rgba(250, 22, 28, .6);
}
.ed-selo-preco__rotulo { font-size: 12px; font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: .12em; opacity: .95; }
.ed-selo-preco__valor { font-size: 3.5rem; font-weight: var(--peso-black); letter-spacing: -0.045em; display: flex; align-items: flex-start; gap: 3px; margin-top: 4px; }
.ed-selo-preco__valor .rs { font-size: .32em; margin-top: .35em; letter-spacing: 0; }
.ed-selo-preco__valor .cent { font-size: .4em; margin-top: .12em; letter-spacing: -0.02em; }

/* Selo de parcelamento (círculo, baseado no quadro de avisos) */
.ed-selo-10x {
  --tam: 172px;
  width: var(--tam); height: var(--tam);
  border-radius: 50%;
  background: var(--ed-branco);
  box-shadow: inset 0 0 0 5px var(--ed-vermelho), var(--sombra-2);
  color: var(--ed-azul);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; line-height: 1;
  font-style: italic;
  position: relative;
}
.ed-selo-10x__topo { font-size: .8125rem; font-weight: var(--peso-extrabold); text-transform: uppercase; letter-spacing: .02em; }
.ed-selo-10x__num { font-size: 3.75rem; font-weight: var(--peso-black); font-style: normal; letter-spacing: -0.05em; }
.ed-selo-10x__num small { font-size: .3em; vertical-align: 1em; margin-right: 3px; font-style: italic; letter-spacing: 0; }
.ed-selo-10x__base { font-size: 1rem; font-weight: var(--peso-black); text-transform: uppercase; }
.ed-selo-10x--cheio { background: var(--ed-azul); box-shadow: var(--sombra-2); color: var(--ed-branco); }

/* Tags (pílulas) */
.ed-tag {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 12px;
  border-radius: var(--raio-pill);
  font-size: var(--fs-small); font-weight: var(--peso-semibold);
  background: var(--ed-azul-06); color: var(--ed-azul);
  border: 1px solid rgba(17, 51, 120, .08);
}
.ed-tag--oferta { background: var(--ed-vermelho); color: var(--ed-branco); border-color: transparent; font-size: 1.1875rem; font-weight: var(--peso-extrabold); min-height: 34px; padding: 0 14px; letter-spacing: -0.02em; } /* 19px bold = AA texto grande */
.ed-tag--azul { background: var(--ed-azul); color: var(--ed-branco); border-color: transparent; }
.ed-tag--vidro { background: rgba(255,255,255,.12); color: var(--ed-branco); border-color: rgba(255,255,255,.25); }
.ed-tag__ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Faixa de cartão (barra de vantagens) */
.ed-faixa-cartao {
  display: flex; align-items: center; gap: 14px;
  background: var(--ed-azul); color: var(--ed-branco);
  padding: 14px 20px; border-radius: var(--raio-pill);
  font-weight: var(--peso-semibold);
  box-shadow: var(--sombra-2);
}
.ed-faixa-cartao strong { font-weight: var(--peso-black); font-style: italic; }

/* ---------- Formulário ---------- */
.ed-form { display: grid; gap: 18px; }
.ed-campo { display: grid; gap: 8px; }
.ed-campo__rotulo { font-size: var(--fs-small); font-weight: var(--peso-bold); color: var(--ed-azul); }
.ed-campo__rotulo .obrig { color: var(--ed-vermelho-escuro); }
.ed-campo__ajuda { font-size: var(--fs-small); color: var(--cor-texto-suave); }
.ed-campo__erro { font-size: var(--fs-small); font-weight: var(--peso-semibold); color: var(--cor-erro); display: none; }
.ed-input, .ed-select, .ed-textarea {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: 0 18px;
  font-family: var(--fonte); font-size: var(--fs-body); /* 16px evita zoom no iPhone */
  font-weight: var(--peso-medio);
  color: var(--ed-preto);
  background: var(--ed-azul-06);
  border: 1.5px solid transparent;
  border-radius: 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.ed-textarea { padding: 14px 18px; min-height: 120px; resize: vertical; }
.ed-input::placeholder, .ed-textarea::placeholder { color: var(--ed-azul-60); font-weight: var(--peso-regular); }
.ed-input:hover, .ed-select:hover, .ed-textarea:hover { border-color: var(--ed-azul-25); }
.ed-input:focus, .ed-select:focus, .ed-textarea:focus { outline: none; background: var(--ed-branco); border-color: var(--ed-azul); box-shadow: 0 0 0 4px var(--ed-azul-12); }
.ed-campo--erro .ed-input, .ed-campo--erro .ed-select, .ed-campo--erro .ed-textarea { border-color: var(--ed-vermelho); background: var(--ed-vermelho-10); }
.ed-campo--erro .ed-campo__erro { display: flex; align-items: center; gap: 6px; }
.ed-campo--erro .ed-campo__erro::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ed-vermelho-escuro); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.ed-campo--ok .ed-input { background: var(--ed-branco); border-color: var(--ed-azul-25); }
.ed-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23113378' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 46px; }

.ed-check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); color: var(--cor-texto); cursor: pointer; }
.ed-check input {
  appearance: none; flex: 0 0 24px; width: 24px; height: 24px; margin: 0;
  border-radius: 8px; border: 1.5px solid var(--ed-azul-25); background: var(--ed-branco);
  display: grid; place-items: center; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.ed-check input::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.ed-check input:checked { background: var(--ed-azul); border-color: var(--ed-azul); }
.ed-check input:checked::after { opacity: 1; }
.ed-check input:focus-visible { outline: 3px solid var(--ed-azul-25); outline-offset: 2px; }
.ed-campo--erro .ed-check input { border-color: var(--ed-vermelho); }
.ed-check a { color: var(--ed-azul); font-weight: var(--peso-bold); }

.ed-lgpd { font-size: var(--fs-legal); color: var(--cor-texto-suave); line-height: 1.55; }
.ed-lgpd a { color: var(--ed-azul); font-weight: var(--peso-bold); }

.ed-alerta { padding: 14px 18px; border-radius: 14px; font-size: var(--fs-small); font-weight: var(--peso-semibold); }
.ed-alerta--erro { background: var(--ed-vermelho-10); color: var(--ed-vermelho-escuro); }
.ed-alerta--ok { background: var(--ed-azul-12); color: var(--ed-azul); }

/* ---------- Aviso legal de campanha ---------- */
.ed-aviso-legal { font-size: var(--fs-legal); line-height: 1.55; color: var(--cor-texto-suave); }
.ed-aviso-legal--inverso { color: rgba(255,255,255,.85); }

/* ---------- Fundo bicolor (assinatura visual dos wallpapers) ---------- */
.ed-bicolor { background: linear-gradient(90deg, var(--ed-azul) 0 50%, var(--ed-vermelho) 50% 100%); color: var(--ed-branco); }
/* Logo sobre o bicolor: a divisão azul/vermelho do logo fica a 45,4% da largura,
   então ele é deslocado para a divisão coincidir com o centro do fundo. */
.ed-logo-sobre-bicolor { transform: translateX(4.57%); }
/* Coração sobre o bicolor: sempre centralizado na divisão */
.ed-coracao-sobre-bicolor { display: block; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .ed-btn, .ed-input, .ed-select, .ed-textarea, .ed-produto, .ed-produto__img img { transition: none; }
  .ed-btn:hover, .ed-produto:hover { transform: none; }
}