/* ══════════════════════════════════════════════════════════════════
 *  PRODUTOS — "Conheça Nossos Produtos"  |  Linktree Elevado
 *  Página: #page-produtos  |  Wrapper: .prod-wrap  (max 640)
 *  Dependências: variáveis de app.css — --bg, --bg2, --bg3, --bg4,
 *  --border, --border2, --text, --text2, --text3, --blue, --green,
 *  --amber, --red, --purple, --r, --rl
 *  Autor: Designer CSS — 2026-08-29  |  Premium dark/light
 * ══════════════════════════════════════════════════════════════════ */

/* ── 01. PAGE & WRAPPER ─────────────────────────────────────── */
/* Sobrescreve padding padrão de .page só para esta página */
#page-produtos {
  padding: 20px 20px 48px;
  background: var(--bg);
  align-items: center; /* centraliza o wrapper quando .page é flex column */
}

/* Linktree-like: coluna única centralizada, 640px máx. */
.prod-wrap,
.prod-container,
.prod-page {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Animação suave de entrada da página — sem layout shift */
#page-produtos.active {
  animation: prodPageIn .38s ease-out both;
}

@keyframes prodPageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger dos cards: cada card entra com leve delay */
@keyframes prodCardIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 02. HERO — avatar, handle, subtitle, sociais ───────────── */
.prod-hero,
.prod-header,
.prod-hero-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 0 8px;
}

/* Avatar 96px com borda glow + sombra premium */
.prod-avatar,
.prod-avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 3px; /* borda externa */
  background: linear-gradient(135deg, var(--border2), rgba(59,130,246,.35), rgba(139,92,246,.25));
  box-shadow:
    0 4px 20px rgba(0,0,0,.35),
    0 0 0 1px var(--border),
    0 0 24px rgba(59,130,246,.18);
  margin-bottom: 14px;
  transition: transform .22s ease, box-shadow .22s ease;
}

.prod-avatar:hover {
  transform: scale(1.03);
  box-shadow:
    0 8px 28px rgba(0,0,0,.45),
    0 0 0 1px var(--border2),
    0 0 32px rgba(59,130,246,.28);
}

.prod-avatar img,
.prod-avatar-wrap img,
.prod-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  background: var(--bg3);
  border: 3px solid var(--bg2);
}

/* Anel interno sutil quando imagem não carrega */
.prod-avatar::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}

/* Nome / handle */
.prod-name,
.prod-handle,
.prod-title {
  font-family: var(--font-d, 'Syne', sans-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 4px;
}

.prod-handle::before {
  content: "";
}

/* Subtitle — "APERTE PARA ACESSAR" */
.prod-subtitle,
.prod-bio,
.prod-tagline {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  letter-spacing: .02em;
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 36ch;
}

/* Badge verificado opcional ao lado do nome */
.prod-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── 03. SOCIAL ROW ─────────────────────────────────────────── */
.prod-social,
.prod-social-row,
.prod-links-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

.prod-social-link,
.prod-social-btn,
.prod-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s cubic-bezier(.34,1.56,.64,1),
    box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.prod-social-link:hover,
.prod-social-btn:hover {
  background: var(--bg4);
  border-color: var(--border2);
  color: var(--text);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.prod-social-link:active,
.prod-social-btn:active {
  transform: scale(.96);
}

.prod-social-link:focus-visible,
.prod-social-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.prod-social-link svg,
.prod-social-btn svg,
.prod-social-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* Variante destaque WhatsApp no social row */
.prod-social-link.is-whatsapp:hover,
.prod-social-btn.is-whatsapp:hover {
  background: rgba(37,211,102,.12);
  border-color: rgba(37,211,102,.35);
  color: #25D366;
  box-shadow: 0 4px 14px rgba(37,211,102,.18);
}

/* ── 04. SECTION HEADINGS ───────────────────────────────────── */
.prod-section,
.prod-group,
.prod-category {
  margin-top: 28px;
}

.prod-section:first-of-type {
  margin-top: 20px;
}

.prod-section-heading,
.prod-section-title,
.prod-group-title,
.prod-category-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
  margin: 0 0 12px;
  padding: 0 2px;
  line-height: 1;
}

.prod-section-heading svg,
.prod-section-title svg,
.prod-group-title svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text3);
  opacity: .9;
}

/* Linha decorativa sutil após o heading — opcional */
.prod-section-heading::after,
.prod-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-left: 8px;
  opacity: .7;
}

/* ── 05. CARD GRID / LIST ───────────────────────────────────── */
.prod-grid,
.prod-list,
.prod-links,
.prod-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Se em algum momento o JS optar por grid 2 col no desktop,
   mantemos 1 coluna por padrão para estética Linktree;
   habilita 2 col só em telas muito largas opcionalmente */
@media (min-width: 720px) {
  .prod-grid.is-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ── 06. CARD — item principal da página ────────────────────── */
.prod-card,
.prod-link,
.prod-item,
a.prod-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 72px; /* touch target + thumb */
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
  animation: prodCardIn .42s ease-out both;
}

/* Stagger — até 12 cards sem JS */
.prod-card:nth-child(1)  { animation-delay: .04s; }
.prod-card:nth-child(2)  { animation-delay: .08s; }
.prod-card:nth-child(3)  { animation-delay: .12s; }
.prod-card:nth-child(4)  { animation-delay: .16s; }
.prod-card:nth-child(5)  { animation-delay: .20s; }
.prod-card:nth-child(6)  { animation-delay: .24s; }
.prod-card:nth-child(7)  { animation-delay: .28s; }
.prod-card:nth-child(8)  { animation-delay: .32s; }
.prod-card:nth-child(9)  { animation-delay: .36s; }
.prod-card:nth-child(10) { animation-delay: .40s; }

/* Hover elevado premium */
.prod-card:hover,
.prod-link:hover,
.prod-item:hover {
  transform: translateY(-2px);
  border-color: var(--border2);
  background: var(--bg3);
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    0 1px 3px rgba(0,0,0,.12);
}

.prod-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}

.prod-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-color: var(--blue);
}

/* Variante destacada — "Reta Final" ou featured */
.prod-card.is-featured,
.prod-card.is-highlight,
.prod-card[data-featured="true"] {
  background:
    linear-gradient(135deg, rgba(245,158,11,.08), rgba(251,191,36,.04)),
    var(--bg2);
  border-color: rgba(245,158,11,.22);
}

.prod-card.is-featured:hover,
.prod-card.is-highlight:hover {
  border-color: rgba(245,158,11,.38);
  box-shadow:
    0 8px 24px rgba(245,158,11,.12),
    0 1px 3px rgba(0,0,0,.12);
}

/* ── 06a. THUMB — esquerda 48-56px ─────────────────────────── */
.prod-card-thumb,
.prod-thumb,
.prod-card-icon,
.prod-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  background: var(--bg3);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* Fallback ícone quando thumb é ícone/svg, não imagem */
.prod-card-icon,
.prod-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  font-size: 20px;
}

.prod-card-icon svg,
.prod-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Thumb circular alternativa — se o JS usar avatar redondo */
.prod-card-thumb.is-circle,
.prod-thumb.is-circle {
  border-radius: 50%;
}

/* ── 06b. BODY — centro flexível ────────────────────────────── */
.prod-card-body,
.prod-card-content,
.prod-card-main,
.prod-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.prod-card-title,
.prod-card-name,
.prod-link-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-card-desc,
.prod-card-subtitle,
.prod-link-desc,
.prod-card-meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--text2);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Permite 2 linhas quando o JS adicionar .is-multiline */
.prod-card-desc.is-multiline,
.prod-card-desc--wrap {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 06c. META ROW — badge + infos ─────────────────────────── */
.prod-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* ── 06d. ARROW — direita ───────────────────────────────────── */
.prod-card-arrow,
.prod-arrow,
.prod-card-chevron {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.prod-card-arrow svg,
.prod-arrow svg {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform .18s ease;
}

.prod-card:hover .prod-card-arrow,
.prod-card:hover .prod-arrow {
  background: var(--bg4);
  border-color: var(--border2);
  color: var(--text);
}

.prod-card:hover .prod-card-arrow svg,
.prod-card:hover .prod-arrow svg {
  transform: translateX(2px);
}

/* ── 07. BADGES — por categoria ─────────────────────────────── */
.prod-badge,
.prod-tag,
.prod-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Grátis — verde */
.prod-badge--gratis,
.prod-badge--free,
.prod-badge.is-gratis,
.prod-badge.is-free,
.prod-pill.is-gratis {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.28);
  color: var(--green);
}

.prod-badge--gratis::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  flex-shrink: 0;
}

/* WhatsApp — #25D366 */
.prod-badge--whatsapp,
.prod-badge.is-whatsapp,
.prod-pill.is-whatsapp {
  background: rgba(37,211,102,.12);
  border-color: rgba(37,211,102,.30);
  color: #25D366;
}

/* Reta Final — laranja/amarelo gradient */
.prod-badge--reta,
.prod-badge--reta-final,
.prod-badge.is-reta,
.prod-badge.is-reta-final,
.prod-pill.is-reta {
  background: linear-gradient(135deg, #FF8C00 0%, #FFD700 100%);
  border-color: rgba(255,140,0,.35);
  color: #1a1200;
  box-shadow: 0 2px 8px rgba(255,140,0,.22);
}

/* Curso — azul */
.prod-badge--curso,
.prod-badge--course,
.prod-badge.is-curso,
.prod-pill.is-curso {
  background: var(--blue-dim);
  border-color: rgba(59,130,246,.28);
  color: var(--blue);
}

/* Psico / Mentoria — roxo */
.prod-badge--psico,
.prod-badge--mentoria,
.prod-badge.is-psico {
  background: var(--purple-dim);
  border-color: rgba(139,92,246,.30);
  color: var(--purple);
}

/* Moderno — âmbar */
.prod-badge--amber,
.prod-badge.is-amber {
  background: var(--amber-dim);
  border-color: rgba(245,158,11,.30);
  color: var(--amber);
}

/* Red — erro/alerta */
.prod-badge--red,
.prod-badge.is-red {
  background: var(--red-dim);
  border-color: rgba(239,68,68,.30);
  color: var(--red);
}

/* ── 08. FOOTER / SHARE ─────────────────────────────────────── */
.prod-footer,
.prod-share,
.prod-cta-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.prod-footer-text,
.prod-share-text {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
}

.prod-share-btn,
.prod-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-b, 'Inter', sans-serif);
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.prod-share-btn:hover,
.prod-cta-btn:hover {
  background: var(--bg4);
  border-color: var(--border2);
  color: var(--text);
  transform: translateY(-1px);
}

.prod-share-btn:active {
  transform: translateY(0);
}

/* Divisor sutil entre seções — opcional */
.prod-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0 0;
  border: none;
}

/* ── 09. SKELETON — loading shimmer (opcional) ─────────────── */
.prod-skeleton {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-height: 72px;
  overflow: hidden;
  position: relative;
}

.prod-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.04) 50%,
    transparent 100%
  );
  animation: prodShimmer 1.4s infinite;
}

@keyframes prodShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.prod-skeleton-thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--bg3);
  flex-shrink: 0;
}

.prod-skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prod-skeleton-line {
  height: 10px;
  border-radius: 999px;
  background: var(--bg3);
}

.prod-skeleton-line.short { width: 55%; }
.prod-skeleton-line.long  { width: 85%; }

/* ── 10. EMPTY STATE ────────────────────────────────────────── */
.prod-empty {
  text-align: center;
  padding: 32px 20px;
  background: var(--bg2);
  border: 1px dashed var(--border2);
  border-radius: 14px;
  color: var(--text3);
}

.prod-empty-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text3);
}

.prod-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 6px;
}

.prod-empty-desc {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
}

/* ── 11. RESPONSIVO ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #page-produtos {
    padding: 14px 14px 32px;
  }

  .prod-hero,
  .prod-header {
    padding-top: 8px;
  }

  .prod-avatar,
  .prod-avatar-wrap {
    width: 88px;
    height: 88px;
  }

  .prod-name,
  .prod-handle {
    font-size: 18px;
  }

  .prod-section,
  .prod-group {
    margin-top: 24px;
  }

  .prod-card,
  .prod-link,
  .prod-item {
    padding: 12px 14px;
    gap: 12px;
    min-height: 68px;
    border-radius: 14px;
  }

  .prod-card-thumb,
  .prod-thumb,
  .prod-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }
}

@media (max-width: 380px) {
  .prod-card-title,
  .prod-card-name {
    font-size: 13px;
  }

  .prod-card-desc {
    font-size: 11px;
  }

  .prod-social-link,
  .prod-social-btn {
    width: 34px;
    height: 34px;
  }
}

/* Touch target mínimo 44px para qualquer link interativo */
.prod-card,
.prod-social-link,
.prod-social-btn,
.prod-share-btn {
  min-height: 44px;
}

/* ── 12. LIGHT-MODE OVERRIDES ───────────────────────────────── */

.light-mode #page-produtos {
  background: var(--bg);
}

.light-mode .prod-card,
.light-mode .prod-link,
.light-mode .prod-item {
  background: var(--bg2);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.light-mode .prod-card:hover,
.light-mode .prod-link:hover {
  background: #fff;
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.light-mode .prod-card.is-featured,
.light-mode .prod-card.is-highlight {
  background:
    linear-gradient(135deg, rgba(245,158,11,.07), rgba(251,191,36,.03)),
    var(--bg2);
  border-color: rgba(245,158,11,.22);
}

.light-mode .prod-card-thumb,
.light-mode .prod-thumb,
.light-mode .prod-card-icon {
  background: var(--bg3);
  border-color: var(--border);
}

.light-mode .prod-card-arrow,
.light-mode .prod-arrow {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text3);
}

.light-mode .prod-card:hover .prod-card-arrow,
.light-mode .prod-card:hover .prod-arrow {
  background: var(--bg2);
  border-color: var(--border2);
  color: var(--text2);
}

.light-mode .prod-avatar,
.light-mode .prod-avatar-wrap {
  box-shadow:
    0 4px 18px rgba(0,0,0,.10),
    0 0 0 1px var(--border),
    0 0 20px rgba(59,130,246,.12);
  background: linear-gradient(135deg, rgba(0,0,0,.08), rgba(59,130,246,.18));
}

.light-mode .prod-avatar img {
  border-color: #fff;
}

.light-mode .prod-social-link,
.light-mode .prod-social-btn {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text2);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.light-mode .prod-social-link:hover,
.light-mode .prod-social-btn:hover {
  background: #fff;
  border-color: rgba(0,0,0,.14);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

.light-mode .prod-section-heading,
.light-mode .prod-section-title,
.light-mode .prod-group-title {
  color: var(--text3);
}

.light-mode .prod-section-heading::after {
  background: var(--border);
}

.light-mode .prod-badge--gratis,
.light-mode .prod-badge--free {
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.22);
  color: #047857;
}

.light-mode .prod-badge--whatsapp {
  background: rgba(37,211,102,.10);
  border-color: rgba(37,211,102,.22);
  color: #128C3E;
}

.light-mode .prod-badge--curso {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.18);
  color: #1D4ED8;
}

.light-mode .prod-badge--psico {
  background: rgba(139,92,246,.08);
  border-color: rgba(139,92,246,.18);
  color: #6D28D9;
}

.light-mode .prod-badge--reta {
  /* mantém gradient mas ajusta texto para contraste no fundo claro */
  color: #7c2d00;
}

.light-mode .prod-footer,
.light-mode .prod-share {
  border-top-color: var(--border);
}

.light-mode .prod-share-btn,
.light-mode .prod-cta-btn {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text2);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.light-mode .prod-share-btn:hover {
  background: #fff;
  border-color: rgba(0,0,0,.14);
  color: var(--text);
}

.light-mode .prod-skeleton {
  background: var(--bg2);
  border-color: var(--border);
}

.light-mode .prod-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.04) 50%, transparent);
}

.light-mode .prod-skeleton-thumb,
.light-mode .prod-skeleton-line {
  background: var(--bg3);
}

.light-mode .prod-empty {
  background: var(--bg2);
  border-color: var(--border2);
}

/* ── 13. MOTION — respeita prefers-reduced-motion ──────────── */
@media (prefers-reduced-motion: reduce) {
  .prod-card,
  .prod-social-link,
  .prod-avatar,
  .prod-card-arrow {
    transition: none;
    animation: none;
  }

  #page-produtos.active {
    animation: none;
  }

  .prod-skeleton::after {
    animation: none;
  }
}

/* ── 14. UTILITÁRIOS EXTRA ─────────────────────────────────── */
/* Linha clamp 2 — quando título precisa quebrar */
.prod-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

/* Esconde seta quando JS marcar .is-no-arrow */
.prod-card.is-no-arrow .prod-card-arrow,
.prod-card.is-no-arrow .prod-arrow {
  display: none;
}

/* Card desabilitado — mantém layout mas sem hover */
.prod-card.is-disabled,
.prod-card[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}

/* Wrapper já centralizado — garante que .page scroll funcione */
#page-produtos .prod-wrap {
  padding-bottom: 24px;
}

/* ── 15. COMPONENTES RECENTES (UI/UX 2026) ─────────────────── */

/* Avatar Container com Pulse de Status Online */
.prod-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.prod-status-indicator {
  position: absolute;
  bottom: 16px;
  right: 4px;
  width: 14px;
  height: 14px;
  background: #22C55E;
  border: 2.5px solid var(--bg);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(34,197,94,.65);
  animation: prodStatusPulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

@keyframes prodStatusPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: .85; }
}

/* Handle Row & Verified Badge */
.prod-handle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 2px;
}

.prod-verified-badge {
  color: var(--blue, #3B82F6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(59,130,246,.4));
}

.prod-bio {
  font-size: 13px;
  color: var(--text3);
  margin: -8px 0 14px;
  max-width: 480px;
  line-height: 1.45;
}

/* Category Filter Chips Bar */
.prod-filters-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 14px;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.prod-filters-bar::-webkit-scrollbar {
  display: none;
}

.prod-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s cubic-bezier(.16,1,.3,1);
  -webkit-tap-highlight-color: transparent;
}

.prod-filter-chip:hover {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--border2);
  transform: translateY(-1px);
}

.prod-filter-chip.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(59,130,246,.35);
}

.prod-filter-chip-icon {
  font-size: 13px;
  line-height: 1;
}

/* Search Box Aprimorada */
.prod-search-wrap {
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}

.prod-search-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.prod-search-icon {
  position: absolute;
  left: 14px;
  color: var(--text3);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.prod-search {
  width: 100%;
  height: 44px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 40px 0 38px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.prod-search:focus {
  outline: none;
  background: var(--bg3);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

.prod-search-clear {
  position: absolute;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, color .15s ease;
}

.prod-search-clear:hover {
  background: var(--bg4);
  color: var(--text);
}

.prod-search-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  margin-top: 6px;
  padding-left: 4px;
}

/* Section Header Aprimorado */
.prod-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.prod-section-head-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prod-section-title {
  margin: 0;
}

.prod-section-subtitle {
  font-size: 12px;
  color: var(--text3);
  margin: 0;
}

.prod-section-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg3);
  color: var(--text3);
  border: 1px solid var(--border);
}

/* Card Title Wrap */
.prod-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Card Action Pill */
.prod-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s ease;
}

.prod-card:hover .prod-card-action {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 2px 10px rgba(59,130,246,.35);
}

.prod-card.prod-card--whatsapp:hover .prod-card-action {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
  box-shadow: 0 2px 10px rgba(37,211,102,.35);
}

.prod-card:hover .prod-card-arrow svg {
  transform: translateX(3px);
}

/* Card Highlight WhatsApp */
.prod-card--highlight.prod-card--whatsapp {
  background: linear-gradient(135deg, rgba(37,211,102,.08), rgba(16,185,129,.03)), var(--bg2);
  border-color: rgba(37,211,102,.28);
}

.prod-card--highlight.prod-card--whatsapp:hover {
  border-color: rgba(37,211,102,.5);
  box-shadow: 0 8px 24px rgba(37,211,102,.15);
}

/* Empty State */
.prod-empty-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--bg2);
  border: 1px dashed var(--border2);
  border-radius: 16px;
  margin: 16px 0;
}

.prod-empty-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.prod-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.prod-empty-desc {
  font-size: 12px;
  color: var(--text3);
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Footer & Trust Badge */
.prod-footer {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.prod-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 11px;
  font-weight: 500;
}

.prod-trust-badge svg {
  color: var(--green, #22C55E);
  flex-shrink: 0;
}

.prod-footnote {
  font-size: 11px;
  color: var(--text3);
  margin: 0;
}

@media (max-width: 600px) {
  .prod-card-action-text {
    display: none;
  }
  .prod-card-action {
    padding: 6px 8px;
  }
}