/* ==========================================================================
   Manto Alpha — Vitrine (Fase 3)
   Responsabilidade única: estilos do catálogo (cards, filtros por categoria)
   e da página de produto. Consome tokens.css e o shell de base.css.
   Fotos de produto: proporção fixa 4:5 (retrato) em todo o catálogo — ver
   briefing §8; sem foto, entra o ícone da categoria como placeholder.
   ========================================================================== */

/* ==========================================================================
   Grade de cards
   ========================================================================== */
.grade-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* celular: 2 colunas */
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .grade-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .grade-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--ma-surface-raised);
  border: 1px solid var(--ma-line);
  border-radius: var(--ma-radius-md);
  text-decoration: none;
  color: var(--ma-ink);
  transition: transform var(--ma-dur) var(--ma-ease), box-shadow var(--ma-dur) var(--ma-ease);
}

/* Sombra só no hover (regra da marca). */
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ma-shadow-card);
}

.card:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}

.card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ma-radius-sm);
  /* Mídia sobre o preto da marca (.ma-card__media): o ícone amarelo da
     categoria continua legível quando o produto não tem foto. */
  background: var(--ma-preto-manto);
}

.card__img--vazia {
  display: grid;
  place-items: center;
}

.card__info {
  display: grid;
  gap: var(--sp-1);
}

.card__categoria {
  font: 600 11px/16px var(--ma-font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ma-ink-muted);
}

.card__nome {
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.33;
  overflow-wrap: anywhere;
}

.card__preco {
  color: var(--ma-ink);
  font-weight: var(--peso-forte);
  font-size: var(--fs-lg);
}

/* Promoção: o riscado dá a base de comparação, o selo traduz em porcentagem.
   O preço vira flex para os dois valores ficarem lado a lado sem quebrar. */
.card__preco {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.card__preco-cheio,
.pagina-produto__preco-cheio {
  color: var(--ma-ink-muted);
  font-size: var(--fs-xs);
  font-weight: var(--peso-normal);
  text-decoration-thickness: 1px;
}

/* Canto ESQUERDO: o direito é do selo "Esgotado", e um produto em promoção
   pode estar esgotado — os dois precisam caber juntos. */
.card__promo {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  font: 700 12px/16px var(--ma-font-sans);
  letter-spacing: 0.06em;
  color: var(--ma-surface-raised);
  background: var(--ma-success);
  border-radius: var(--ma-radius-sm);
  padding: 4px var(--sp-2);
}

.selo-promo {
  font: 700 12px/16px var(--ma-font-sans);
  letter-spacing: 0.06em;
  color: var(--ma-surface-raised);
  background: var(--ma-success);
  border-radius: var(--ma-radius-sm);
  padding: 4px var(--sp-2);
}

.card__esgotado {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  font: 700 12px/16px var(--ma-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ma-surface-raised);
  background: var(--ma-danger);
  border-radius: var(--ma-radius-sm);
  padding: 4px var(--sp-2);
}

/* Filtros por categoria: .filtros e .chip moravam aqui até o painel do dono
   passar a filtrar pedidos com a mesma barra. Viraram átomos compartilhados e
   subiram para base.css, junto de .tag. */

/* ==========================================================================
   Página de produto
   ========================================================================== */
.pagina-produto {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 720px) {
  .pagina-produto {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    align-items: start;
  }
}

.pagina-produto__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ma-radius-md);
  background: var(--ma-preto-manto);
}

.pagina-produto__img--vazia {
  display: grid;
  place-items: center;
}

/* ---- Galeria de fotos (página de produto) ----
   A fita rola na horizontal no celular em vez de quebrar linha: mantém a foto
   grande visível enquanto o cliente passa pelas outras. */
.galeria__tira {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: thin;
}

.galeria__miniatura {
  flex: 0 0 auto;
  width: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--ma-radius-sm);
  background: var(--ma-preto-manto);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.galeria__miniatura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* A foto aberta fica marcada; o mesmo destaque serve ao foco por teclado. */
.galeria__miniatura[aria-pressed='true'],
.galeria__miniatura:focus-visible {
  border-color: var(--ma-ink);
}

.pagina-produto__painel {
  display: grid;
  gap: var(--sp-4);
}

.pagina-produto__nome {
  font: var(--ma-text-h1);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.pagina-produto__preco {
  color: var(--ma-ink);
  font: var(--ma-text-price);
  /* Flex para o trio "riscado · preço · selo" alinhar pela linha de base. */
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ---- Botões de tamanho ---- */
.tamanhos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tamanho {
  font: 700 15px/1 var(--ma-font-sans);
  color: var(--ma-ink);
  background: var(--ma-surface-raised);
  border: 1.5px solid var(--ma-line-strong);
  border-radius: var(--ma-radius-md);
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--sp-3);
  cursor: pointer;
}

.tamanho:hover:not(:disabled) {
  border-color: var(--ma-ink);
}

.tamanho:disabled {
  color: var(--ma-ink-muted);
  background: var(--ma-surface-sunken);
  text-decoration: line-through;
  cursor: not-allowed;
}

.tamanho--ativo {
  background: var(--ma-ink);
  color: var(--ma-surface);
  border-color: var(--ma-ink);
}

.tamanho:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}

/* Variante compacta (Sim/Não da linha do carrinho): 40px ainda é alvo de toque. */
.tamanho--peq {
  font-size: 13px;
  min-width: 40px;
  min-height: 40px;
}

.linha-carrinho__personalizar {
  display: grid;
  gap: var(--sp-1);
}

/* ---- Botão WhatsApp: verde semântico, fora da paleta por decisão ---- */
.btn--wpp {
  background: var(--wpp);
  color: var(--ma-branco);
  border: none;
  justify-self: start;
}

.btn--wpp:hover {
  filter: brightness(1.08);
}

/* Link de volta no estilo ghost do kit: sublinhado amarelo. */
.pagina-produto__voltar {
  color: var(--ma-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ma-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.pagina-produto__voltar:hover {
  color: var(--ma-accent-text);
}

/* ---- Topo da página de produto: categoria + favorito lado a lado ---- */
.pagina-produto__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* ---- Botão de favorito: coração de contorno; ativo fica dourado ---- */
.btn-favorito {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ma-ink-muted);
  background: var(--ma-surface-raised);
  border: 1.5px solid var(--ma-line-strong);
  border-radius: var(--ma-radius-pill);
  width: 44px;
  height: 44px;
  cursor: pointer;
  transition: color var(--ma-dur) var(--ma-ease), border-color var(--ma-dur) var(--ma-ease), background-color var(--ma-dur) var(--ma-ease);
}

.btn-favorito:hover {
  color: var(--ma-ink);
  border-color: var(--ma-ink);
}

/* Favoritado: fundo preto com o coração em amarelo. */
.btn-favorito--ativo,
.btn-favorito--ativo:hover {
  color: var(--ma-amarelo-alpha);
  background: var(--ma-preto-manto);
  border-color: var(--ma-preto-manto);
}

.btn-favorito:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   Carrinho (carrinho.html) — Fase D
   ========================================================================== */
.lista-carrinho {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.linha-carrinho {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--ma-surface-raised);
  border: 1px solid var(--ma-line);
  border-radius: var(--raio-md);
  padding: var(--sp-3) var(--sp-4);
}

.linha-carrinho--indisponivel {
  opacity: 0.7;
  border-style: dashed;
}

.linha-carrinho__img {
  width: 64px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ma-radius-sm);
  background: var(--ma-preto-manto);
  flex-shrink: 0;
}

.linha-carrinho__img--vazia {
  display: grid;
  place-items: center;
}

.linha-carrinho__info {
  display: grid;
  gap: var(--sp-1);
  justify-items: start;
  min-width: 0;
  flex: 1;
}

.linha-carrinho__nome {
  font-weight: 700;
  overflow-wrap: anywhere;
}

a.linha-carrinho__nome:hover {
  color: var(--ma-accent-text);
}

.linha-carrinho__detalhe {
  font-size: var(--fs-sm);
  color: var(--ma-ink-muted);
}

.linha-carrinho__remover {
  font-size: var(--fs-xs);
  color: var(--ma-ink-muted);
  text-decoration: underline;
  padding: var(--sp-1) 0;
}

.linha-carrinho__remover:hover {
  color: var(--ma-danger);
}

.linha-carrinho__acoes {
  display: grid;
  gap: var(--sp-2);
  justify-items: end;
  flex-shrink: 0;
}

.linha-carrinho__subtotal {
  color: var(--ma-ink);
  font-weight: var(--peso-forte);
}

/* ---- Stepper de quantidade ---- */
/* Seletor de quantidade (.ma-qty). */
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--ma-line-strong);
  border-radius: var(--ma-radius-md);
  overflow: hidden;
}

.stepper__btn {
  width: 40px;
  height: 40px;
  font: 700 18px/1 var(--ma-font-sans);
  color: var(--ma-ink);
  display: grid;
  place-items: center;
}

.stepper__btn:hover:not(:disabled) {
  background: var(--ma-surface-sunken);
}

.stepper__btn:disabled {
  color: var(--ma-ink-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.stepper__btn:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: -2px;
}

.stepper__valor {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
}

/* ---- Resumo (subtotal, desconto, total) ---- */
.resumo-carrinho {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  background: var(--ma-surface-raised);
  border: 1px solid var(--ma-line);
  border-radius: var(--raio-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  max-width: 480px;
}

.resumo-carrinho__linhas {
  display: grid;
  gap: var(--sp-2);
  width: 100%;
}

.resumo-carrinho__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ma-ink-muted);
}

.resumo-carrinho__linha--total {
  font-size: var(--fs-lg);
  color: var(--ma-ink);
  font-weight: var(--peso-forte);
  border-top: 2px solid var(--ma-ink);
  padding-top: var(--sp-2);
}

.resumo-carrinho__linha--total dd {
  color: var(--ma-ink);
}

/* ---- Cupom de afiliado e forma de pagamento (Afiliados) ---- */
.cupom {
  width: 100%;
}

/* Campo + botão numa linha; o campo leva a sobra. */
.cupom__linha {
  display: flex;
  gap: var(--sp-2);
}

.cupom__linha input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
}

.pagamento {
  display: grid;
  gap: var(--sp-2);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.pagamento__opcao {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ma-ink);
  cursor: pointer;
}

.pagamento__opcao input {
  accent-color: var(--ma-accent);
  width: 18px;
  height: 18px;
}

/* Portal do afiliado: o cupom é o que ele divulga — tamanho de título. */
.cupom-destaque {
  font-size: var(--fs-xl);
  font-weight: var(--peso-forte);
  letter-spacing: 0.08em;
  color: var(--ma-accent-text);
  user-select: all;
}

/* Celular estreito: a linha quebra em duas — foto+info em cima, ações embaixo. */
@media (max-width: 480px) {
  .linha-carrinho {
    flex-wrap: wrap;
  }

  .linha-carrinho__acoes {
    width: 100%;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
  }
}

/* ==========================================================================
   Perfil do cliente (perfil.html)
   ========================================================================== */
.form-perfil {
  display: grid;
  gap: var(--sp-4);
  background: var(--ma-surface-raised);
  border: 1px solid var(--ma-line);
  border-radius: var(--raio-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.form-perfil__linha {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .form-perfil__linha {
    grid-template-columns: 1fr 1fr;
  }
}

.form-perfil__acoes {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ---- Meus pedidos (lista do cliente) ---- */
.lista-pedidos-cliente {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}

.pedido-cliente {
  display: grid;
  gap: var(--sp-1);
  justify-items: start;
  background: var(--ma-surface-raised);
  border: 1px solid var(--ma-line);
  border-radius: var(--raio-md);
  padding: var(--sp-4);
}

.pedido-cliente__titulo {
  font-weight: 700;
}

.pedido-cliente__itens {
  font-size: var(--fs-sm);
  color: var(--ma-ink-muted);
}

.pedido-cliente__total {
  color: var(--ma-ink);
  font-weight: var(--peso-forte);
}

/* ==========================================================================
   Diálogo de perfil (antes do 1º pedido)
   ========================================================================== */
.dialogo {
  margin: auto; /* o reset global zera margens; devolve a centralização nativa */
  background: var(--ma-surface-raised);
  color: var(--ma-ink);
  border: 0;
  border-radius: var(--ma-radius-lg);
  box-shadow: var(--ma-shadow-overlay);
  padding: var(--sp-5);
  width: min(92vw, 420px);
}

.dialogo::backdrop {
  background: var(--ma-overlay);
  backdrop-filter: blur(3px);
}

.dialogo__form {
  display: grid;
  gap: var(--sp-4);
}

.dialogo__texto {
  font-size: var(--fs-sm);
  color: var(--ma-ink-muted);
}

/* Inputs herdam os átomos .campo de base.css. */

/* ==========================================================================
   "Não encontrou?" — atalho de ajuda no WhatsApp (home)
   Bloco centralizado no fim do catálogo: quem chegou até aqui sem achar a peça
   tem um caminho direto para a conversa. Só aparece com número em config/loja.
   ========================================================================== */
.secao--ajuda {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.ajuda__texto {
  color: var(--ma-ink);
  font-size: var(--fs-lg);
  font-weight: var(--peso-medio);
}