/* =========================================================
   Ateliê Patrícia Abib Confecção — Atacado de roupas de bebê
   Paleta amostrada da LOGO (assets/logo/patricia-abib-logo.jpg):
   rosa do script #BD6560 · pétala #FBB3A7 · folha #7D8459 · creme #FEFAF7
   Tokens e decisões: design-system/toda-linda/MASTER.md
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&family=Baloo+2:wght@500;600;700&display=swap');

:root {
  /* --- Cor: amostrada da aquarela da logo --- */
  --cor-primaria: #9E4A54;        /* rosa do script "Patricia Abib" */
  --cor-primaria-escura: #7E3842;
  --cor-primaria-clara: #F8DFDC;  /* tint para fundos de destaque */
  --cor-petala: #FBB3A7;          /* rosa das flores — exato da logo */
  --cor-petala-clara: #FDE2DC;
  --cor-accent: #E8C9A0;          /* dourado do miolo das margaridas */
  --cor-accent-escura: #D2AB78;
  --cor-oliva: #636B41;           /* folhagem */
  --cor-oliva-clara: #E7EADD;

  --cor-fundo: #FBEDE9;           /* rosa-creme da logo */
  --cor-fundo-alt: #FEF7F3;       /* creme claro do fundo da logo */
  --cor-superficie: #FFFFFF;
  --cor-texto: #4A2B2E;
  --cor-texto-suave: #7A565A;  /* 6.3:1 — só sobre fundo claro amplo */
  --cor-meta: #5E3A3D;         /* 9.8:1 — texto pequeno dentro de card */
  --cor-label: #6E4A4C;        /* 7.7:1 — rótulos em caixa alta */
  --cor-borda: #F2DCD7;
  --cor-whatsapp: #0B7C3E;      /* 5.3:1 com texto branco */
  --cor-whatsapp-escura: #086330;
  --cor-erro: #A33522;

  /* --- Tipografia --- */
  --fonte-display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --fonte-corpo: 'Nunito Sans', sans-serif;

  /* --- Espaço (8pt) --- */
  --esp-4: 4px;
  --esp-8: 8px;
  --esp-16: 16px;
  --esp-24: 24px;
  --esp-32: 32px;
  --esp-48: 48px;
  --esp-64: 64px;

  /* --- Raio: varia por hierarquia --- */
  --raio-sm: 10px;
  --raio-md: 18px;
  --raio-lg: 28px;
  --raio-pill: 999px;

  /* --- Elevação --- */
  --sombra-card: 0 2px 12px rgba(74, 43, 46, 0.08);
  --sombra-card-hover: 0 8px 22px rgba(74, 43, 46, 0.14);
  --sombra-flutuante: 0 10px 32px rgba(74, 43, 46, 0.22);

  --motion-rapido: 150ms ease-out;
  --motion-padrao: 240ms cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  margin: 0;
  font-weight: 600;
  color: var(--cor-texto);
  letter-spacing: -0.01em;
}

img { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, select { font-family: inherit; font-size: 16px; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(158, 74, 84, 0.45);
  border-radius: var(--raio-sm);
}

.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;
}

.oculto { display: none !important; }

.pular-para-conteudo {
  position: absolute;
  left: -999px; top: 0;
  background: var(--cor-superficie);
  color: var(--cor-primaria);
  padding: var(--esp-16);
  z-index: 100;
  border-radius: var(--raio-sm);
}
.pular-para-conteudo:focus { left: var(--esp-16); top: var(--esp-16); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--esp-16);
}
@media (min-width: 768px) { .container { padding: 0 var(--esp-32); } }

/* ============ Header ============ */

.cabecalho {
  background: var(--cor-primaria);
  color: #fff;
  position: relative;
  padding-bottom: var(--esp-24);
}

.cabecalho__onda {
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%;
  line-height: 0;
}

.cabecalho__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-16);
  padding: var(--esp-24) 0 var(--esp-16);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--esp-16);
  min-width: 0;
}

.marca__logo {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cor-superficie);
  flex-shrink: 0;
}

.marca__info { min-width: 0; }

.marca__nome {
  font-family: var(--fonte-display);
  font-size: 19px;
  font-weight: 600;
  display: block;
  line-height: 1.2;
}

.marca__descricao {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.88);
  margin-top: var(--esp-4);
  max-width: 44ch;
}

.cabecalho__contatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-8) var(--esp-24);
  padding-bottom: var(--esp-8);
}

.marca__contato {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  font-size: 13.5px;
  color: #fff;
  min-height: 36px;
  transition: color var(--motion-rapido);
}
.marca__contato:hover { color: var(--cor-accent); }

.cabecalho__acoes { display: flex; align-items: center; flex-shrink: 0; }

.btn-carrinho {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  min-height: 44px;
  padding: 0 var(--esp-16) 0 var(--esp-8);
  border-radius: var(--raio-pill);
  background: rgba(255,255,255,0.12);
  transition: background var(--motion-rapido);
}
.btn-carrinho:hover { background: rgba(255,255,255,0.22); }

.btn-carrinho__contador {
  position: absolute;
  top: 0; left: 24px;
  background: var(--cor-accent);
  color: var(--cor-primaria-escura);
  font-size: 11px;
  font-weight: 800;
  min-width: 19px; height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.btn-carrinho__total { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* ============ Busca ============ */

.busca { margin-top: var(--esp-8); }

.busca__campo {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  background: rgba(255,255,255,0.08);
  border-radius: var(--raio-pill);
  padding: var(--esp-8) var(--esp-16);
  min-height: 46px;
}
.busca__campo input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  min-width: 0;
}
.busca__campo input::placeholder { color: #FFFFFF; }
.busca__campo input:focus { outline: none; }
.busca__campo svg { flex-shrink: 0; color: rgba(255,255,255,0.9); }

/* ============ Aviso de regra ============ */

.aviso-regra {
  display: flex;
  align-items: center;
  gap: var(--esp-16);
  background: var(--cor-accent);
  color: var(--cor-texto);
  border-radius: var(--raio-md);
  padding: var(--esp-16) var(--esp-24);
  margin-top: var(--esp-32);
}
.aviso-regra svg { flex-shrink: 0; color: var(--cor-primaria-escura); }
.aviso-regra p { margin: 0; font-size: 14.5px; }

/* ============ Títulos de seção ============ */

.secao-titulo { padding: var(--esp-48) 0 var(--esp-24); }
.secao-titulo h1, .secao-titulo h2 { font-size: 30px; line-height: 1.15; }
.secao-titulo p {
  margin: var(--esp-8) 0 0;
  color: var(--cor-texto-suave);
  font-size: 15px;
}
.secao-titulo--centro { text-align: center; }
.secao-titulo--centro p { max-width: 52ch; margin-inline: auto; }

@media (min-width: 768px) {
  .secao-titulo h1, .secao-titulo h2 { font-size: 38px; }
}

/* ============ Grid de categorias ============ */

.grid-categorias {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-16);
  padding-bottom: var(--esp-64);
}
@media (min-width: 680px) { .grid-categorias { grid-template-columns: repeat(3, 1fr); gap: var(--esp-24); } }
@media (min-width: 1000px) { .grid-categorias { grid-template-columns: repeat(4, 1fr); } }

.categoria-card {
  background: var(--cor-superficie);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-card);
  padding: var(--esp-24) var(--esp-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--esp-8);
  transition: box-shadow var(--motion-rapido), transform var(--motion-rapido);
  width: 100%;
}
.categoria-card:hover {
  box-shadow: var(--sombra-card-hover);
  transform: translateY(-3px);
}
.categoria-card:active { transform: translateY(-1px); }

.categoria-card__icone {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--cor-fundo);
  color: var(--cor-primaria);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--esp-4);
  transition: background var(--motion-rapido);
}
.categoria-card:hover .categoria-card__icone { background: var(--cor-primaria-clara); }

.categoria-card__nome {
  font-family: var(--fonte-display);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.2;
}

.categoria-card__chamada {
  font-size: 12.5px;
  color: var(--cor-meta);
  line-height: 1.4;
}

.categoria-card__contagem {
  margin-top: auto;
  padding-top: var(--esp-8);
  font-size: 12px;
  font-weight: 700;
  color: var(--cor-oliva);
}

.categoria-card__ir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--esp-8);
  font-size: 13px;
  font-weight: 700;
  color: var(--cor-primaria);
}
.categoria-card:hover .categoria-card__ir { gap: 10px; }
.categoria-card__ir svg { transition: transform var(--motion-rapido); }

/* ============ Botões de navegação ============ */

.btn-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  margin-top: var(--esp-32);
  padding: var(--esp-8) var(--esp-16) var(--esp-8) var(--esp-8);
  min-height: 44px;
  border-radius: var(--raio-pill);
  background: var(--cor-superficie);
  color: var(--cor-primaria);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--sombra-card);
  transition: background var(--motion-rapido), box-shadow var(--motion-rapido);
}
.btn-voltar:hover {
  background: var(--cor-primaria-clara);
  box-shadow: var(--sombra-card-hover);
}

.btn-ver-pedido {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  min-height: 44px;
  padding: var(--esp-8) var(--esp-16);
  border-radius: var(--raio-pill);
  background: var(--cor-primaria);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  transition: background var(--motion-rapido);
}
.btn-ver-pedido:hover { background: var(--cor-primaria-escura); }

.rodape-navegacao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-16);
  justify-content: space-between;
  align-items: center;
  padding: var(--esp-24) 0 var(--esp-64);
  border-top: 1px solid var(--cor-borda);
  margin-top: var(--esp-24);
}
.rodape-navegacao .btn-voltar { margin-top: 0; }

/* ============ Barra de filtro ============ */

.barra-filtro {
  display: flex;
  justify-content: flex-end;
  padding-bottom: var(--esp-24);
}

.select-ordenar {
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  border-radius: var(--raio-sm);
  padding: var(--esp-8) var(--esp-16);
  font-size: 14px;
  color: var(--cor-texto);
  min-height: 44px;
}

/* ============ Grid de produtos ============ */

.grid-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--esp-24);
}

@media (max-width: 520px) {
  .grid-produtos { grid-template-columns: repeat(2, 1fr); gap: var(--esp-16); }
}

.produto-card {
  background: var(--cor-superficie);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Sem foto: placeholder compacto (3:2). Com foto: retrato (4:5), melhor pra roupa. */
.produto-card__imagem {
  aspect-ratio: 3 / 2;
  background: var(--cor-fundo-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
  color: var(--cor-texto-suave);
  border-bottom: 1px solid var(--cor-borda);
  overflow: hidden;
}
.produto-card__imagem--foto {
  aspect-ratio: 4 / 5;
  background: var(--cor-fundo-alt);
}
.produto-card__imagem svg { opacity: 0.5; }
.produto-card__imagem-texto {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.produto-card__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.produto-card__corpo {
  padding: var(--esp-16) var(--esp-16) var(--esp-16);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.produto-card__nome {
  font-family: var(--fonte-display);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cor-texto);
}

.produto-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--cor-meta);
  line-height: 1.45;
  margin: var(--esp-8) 0 0;
}
.produto-card__meta strong { color: var(--cor-texto); font-weight: 700; }
.produto-card__detalhe { color: var(--cor-meta); }

/* --- Tamanhos: bloco em destaque --- */

.tamanhos { margin-top: var(--esp-16); }

.tamanhos__label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-label);
  margin-bottom: 6px;
}

.tamanhos__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tamanho-chip {
  display: inline-flex;
  align-items: center;
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria-escura);
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: var(--raio-pill);
  line-height: 1.3;
}
.tamanho-chip--vazio {
  background: transparent;
  border: 1px dashed var(--cor-borda);
  color: var(--cor-meta);
  font-weight: 600;
  font-style: italic;
}

/* --- Preço: o maior peso visual do card --- */

.produto-card__precos {
  margin-top: auto;
  padding-top: var(--esp-24);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.produto-card__preco-grade {
  font-family: var(--fonte-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--cor-texto);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.produto-card__preco-unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--cor-primaria);
}

.produto-card__varejo {
  font-size: 12.5px;
  color: var(--cor-meta);
  margin-top: 2px;
}

.produto-card__rodape { margin-top: var(--esp-16); }

.btn-comprar {
  width: 100%;
  background: var(--cor-accent);
  color: var(--cor-texto);
  font-weight: 800;
  font-size: 14px;
  padding: var(--esp-8) var(--esp-16);
  border-radius: var(--raio-pill);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
  transition: background var(--motion-rapido);
}
.btn-comprar:hover { background: var(--cor-accent-escura); }
.btn-comprar:disabled {
  background: var(--cor-borda);
  color: var(--cor-texto-suave);
  cursor: not-allowed;
}

.produto-card__preco-pendente {
  font-size: 14px;
  font-weight: 700;
  color: var(--cor-texto-suave);
  font-style: italic;
}
.btn-comprar:active { transform: scale(0.98); }

.produto-card__qtd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-8);
  background: var(--cor-fundo);
  border-radius: var(--raio-pill);
  padding: 4px;
  min-height: 44px;
}

.qtd-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cor-superficie);
  color: var(--cor-primaria);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  transition: background var(--motion-rapido);
}
.qtd-btn:hover { background: var(--cor-primaria-clara); }

.qtd-valor {
  flex: 1;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.aviso-vazio {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--cor-texto-suave);
  padding: var(--esp-64) var(--esp-16);
}

/* ============ Como comprar ============ */

.como-comprar {
  background: var(--cor-fundo-alt);
  padding: var(--esp-32) 0 var(--esp-64);
  margin-top: var(--esp-32);
}

/* Rótulo pequeno acima de cada bloco */
.sobretitulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: var(--esp-48) 0 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-label);
}
.sobretitulo svg { color: var(--cor-primaria); }

.secao-titulo--justo { padding-top: var(--esp-8); }

/* --- Cards dos passos --- */

.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-16);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .passos { grid-template-columns: repeat(2, 1fr); gap: var(--esp-24); } }
@media (min-width: 1000px) { .passos { grid-template-columns: repeat(4, 1fr); } }

.passo-card {
  position: relative;
  background: var(--cor-superficie);
  border-radius: var(--raio-md);
  padding: var(--esp-24) var(--esp-16) var(--esp-24);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: var(--sombra-card);
}

.passo-card__num {
  position: absolute;
  top: 12px; right: 12px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cor-primaria);
  color: #fff;
  font-family: var(--fonte-display);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.passo-card__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--cor-fundo);
  margin-bottom: var(--esp-4);
}

.passo-card__titulo { font-size: 16.5px; line-height: 1.2; }
.passo-card__nota {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cor-primaria);
}

/* --- Formas de pagamento --- */

.pagamentos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-8);
  margin-top: var(--esp-16);
}

.pag-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cor-superficie);
  border-radius: var(--raio-pill);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cor-texto);
  box-shadow: var(--sombra-card);
}

/* --- Redes --- */

.redes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-16);
  max-width: 520px;
  margin: var(--esp-16) auto 0;
}

.rede-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--esp-24) var(--esp-16);
  border-radius: var(--raio-md);
  text-align: center;
  transition: transform var(--motion-rapido), box-shadow var(--motion-rapido);
  box-shadow: var(--sombra-card);
}
.rede-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-card-hover); }
.rede-card--wpp { background: var(--cor-oliva-clara); }
.rede-card--insta { background: var(--cor-petala-clara); }

.rede-card__icone { margin-bottom: var(--esp-4); }
.rede-card__nome {
  font-family: var(--fonte-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--cor-texto);
}
.rede-card__dado {
  font-size: 12.5px;
  color: var(--cor-meta);
  word-break: break-word;
}

/* ============ Rodapé ============ */

.rodape {
  background: var(--cor-superficie);
  padding: var(--esp-48) 0 var(--esp-32);
}

.rodape__grade {
  display: grid;
  gap: var(--esp-32);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .rodape__grade { grid-template-columns: 2fr 1fr; } }

.rodape__sobre { display: flex; gap: var(--esp-16); }

.rodape__logo {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.rodape__texto { font-size: 14px; color: var(--cor-meta); max-width: 52ch; margin: 0; }
.rodape__texto strong { color: var(--cor-texto); }

.rodape__coluna { font-size: 14px; color: var(--cor-meta); }
.rodape__coluna h3 { font-size: 14px; margin-bottom: var(--esp-8); color: var(--cor-texto); }
.rodape__coluna a { display: block; margin-bottom: var(--esp-8); }
.rodape__coluna a:hover { color: var(--cor-primaria); }

.selo-seguranca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  margin-top: var(--esp-16);
  font-size: 12.5px;
  color: var(--cor-oliva);
  font-weight: 700;
}

.rodape__base {
  text-align: center;
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  margin: var(--esp-32) 0 0;
  padding-top: var(--esp-24);
  border-top: 1px solid var(--cor-borda);
}

/* ============ Drawer do carrinho ============ */

.drawer-fundo {
  position: fixed;
  inset: 0;
  background: rgba(74, 43, 46, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-padrao);
  z-index: 40;
}
.drawer-fundo[data-aberto="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 100%);
  background: var(--cor-fundo);
  z-index: 41;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--motion-padrao);
  box-shadow: var(--sombra-flutuante);
}
.drawer[data-aberto="true"] { transform: translateX(0); }

.drawer__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-16) var(--esp-24);
  background: var(--cor-superficie);
}

.drawer__fechar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto-suave);
  transition: background var(--motion-rapido), color var(--motion-rapido);
}
.drawer__fechar:hover { background: var(--cor-primaria-clara); color: var(--cor-primaria); }

.drawer__corpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--esp-16) var(--esp-24);
  display: flex;
  flex-direction: column;
  gap: var(--esp-16);
}

.drawer__vazio {
  text-align: center;
  color: var(--cor-texto-suave);
  padding: var(--esp-64) var(--esp-16);
  font-size: 14px;
}
.drawer__vazio svg { margin: 0 auto var(--esp-16); opacity: 0.45; }

.item-carrinho {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--esp-8) var(--esp-16);
  padding-bottom: var(--esp-16);
  border-bottom: 1px solid var(--cor-borda);
}

.item-carrinho__nome { font-size: 13.5px; font-weight: 700; line-height: 1.3; margin: 0; }
.item-carrinho__preco { font-size: 12.5px; color: var(--cor-meta); margin: 2px 0 0; }
.item-carrinho__total { font-weight: 800; font-size: 14px; white-space: nowrap; }

.item-carrinho__controles {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-16);
}

.item-carrinho__remover {
  font-size: 12.5px;
  color: var(--cor-erro);
  font-weight: 700;
  min-height: 36px;
  padding: 0 var(--esp-8);
}
.item-carrinho__remover:hover { text-decoration: underline; }

.drawer__rodape {
  background: var(--cor-superficie);
  padding: var(--esp-24);
  display: flex;
  flex-direction: column;
  gap: var(--esp-16);
}

.drawer__linha-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--fonte-display);
  font-size: 19px;
  font-weight: 700;
}

.nota-frete { font-size: 12.5px; color: var(--cor-meta); }

.aviso-minimo {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cor-primaria);
  background: var(--cor-accent);
  border-radius: var(--raio-sm);
  padding: var(--esp-8) var(--esp-16);
}

.btn-primario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
  background: var(--cor-primaria);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: var(--esp-16);
  border-radius: var(--raio-pill);
  text-align: center;
  min-height: 50px;
  transition: background var(--motion-rapido);
}
.btn-primario:hover { background: var(--cor-primaria-escura); }
.btn-primario:disabled {
  background: var(--cor-borda);
  color: var(--cor-texto-suave);
  cursor: not-allowed;
}

.btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
  background: var(--cor-whatsapp);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: var(--esp-16);
  border-radius: var(--raio-pill);
  min-height: 50px;
  transition: background var(--motion-rapido);
}
.btn-whatsapp:hover { background: var(--cor-whatsapp-escura); }
.btn-whatsapp:disabled {
  background: var(--cor-borda);
  color: var(--cor-texto-suave);
  cursor: not-allowed;
}

.btn-primario[data-carregando="true"] { opacity: 0.75; cursor: progress; }

.nota-pagamento {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cor-meta);
  text-align: center;
}

/* ============ Toast ============ */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--esp-24);
  transform: translateX(-50%) translateY(16px);
  background: var(--cor-texto);
  color: #fff;
  padding: var(--esp-16) var(--esp-24);
  border-radius: var(--raio-pill);
  font-size: 14px;
  font-weight: 600;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-padrao), transform var(--motion-padrao);
  max-width: calc(100% - 32px);
  text-align: center;
}
.toast[data-visivel="true"] { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .categoria-card:hover { transform: none; }
}

/* ============ Páginas de retorno do pagamento ============ */

.retorno {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-32) var(--esp-16);
}

.retorno__caixa {
  background: var(--cor-superficie);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-card);
  padding: var(--esp-48) var(--esp-32);
  max-width: 460px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-16);
}

.retorno__logo { border-radius: 50%; object-fit: cover; }

.retorno__selo {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.retorno__selo--ok { background: var(--cor-oliva-clara); color: var(--cor-oliva); }
.retorno__selo--espera { background: var(--cor-accent); color: var(--cor-primaria-escura); }
.retorno__selo--erro { background: var(--cor-primaria-clara); color: var(--cor-erro); }

.retorno__caixa h1 { font-size: 26px; line-height: 1.2; }
.retorno__caixa p {
  margin: 0;
  font-size: 15px;
  color: var(--cor-meta);
  max-width: 42ch;
}

.retorno__caixa .btn-primario { margin-top: var(--esp-8); }

.retorno__voltar {
  font-size: 14px;
  font-weight: 700;
  color: var(--cor-primaria);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.retorno__voltar:hover { text-decoration: underline; }

.link-texto {
  color: var(--cor-primaria);
  font-weight: 700;
  text-decoration: underline;
}

/* ============ Acesso admin (discreto, canto da tela) ============ */

.link-admin {
  position: fixed;
  right: var(--esp-16);
  bottom: var(--esp-16);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-card);
  opacity: 0.55;
  transition: opacity 150ms ease-out, color 150ms ease-out;
  z-index: 30;
}
.link-admin:hover, .link-admin:focus-visible {
  opacity: 1;
  color: var(--cor-primaria);
}