/* ============================================================================
   tne-produtos.css — Secção de produtos pública
   DistribuidorTopBioEuropa | Site institucional B2B

   Grelha de 22 produtos com filtros por linha, cards com hover lift e
   preço borrado (filter: blur) sem que o valor real exista no HTML.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Container da secção
   ---------------------------------------------------------------------------- */
.tne-produtos {
  background-color: var(--tne-white);
}

.tne-produtos__title {
  max-width: 880px;
}

.tne-produtos__title-em {
  font-family: var(--tne-font-accent);
  font-style: italic;
  font-weight: var(--tne-weight-regular);
  color: var(--tne-gold);
}

.tne-produtos__intro {
  max-width: 720px;
  margin: 0 0 var(--tne-space-xl);
  font-size: var(--tne-body);
  line-height: 1.6;
  color: var(--tne-text-muted);
}

/* ----------------------------------------------------------------------------
   2. Carrossel (marquee automático em loop)
   O .tne-produtos__track contém os cards reais; o tne-produtos.js clona-os
   a seguir para o loop ser contínuo. A animação desliza translateX 0 → -50%
   (= exactamente 1 cópia, por isso o ciclo é perfeito). Cada card "leva" o
   seu espaçamento via margin-right — NÃO usar gap no track (quebraria o -50%).
   ---------------------------------------------------------------------------- */
.tne-produtos__carousel {
  position: relative;
  overflow: hidden;
  margin-top: var(--tne-space-xl);
  /* esbate as duas pontas para o loop "nascer/morrer" suave */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.tne-produtos__track {
  display: flex;
  width: max-content;
  padding: 12px 0; /* respira para o hover-lift dos cards não ser cortado */
  will-change: transform;
}

/* Só anima depois do JS clonar (.is-ready) — evita "salto" antes do clone. */
.tne-produtos__carousel.is-ready .tne-produtos__track {
  animation: tne-produtos-marquee var(--tne-marquee-duration, 60s) linear infinite;
}

/* Pausa quando o cursor entra ou quando um card recebe foco (teclado). */
.tne-produtos__carousel.is-ready:hover .tne-produtos__track,
.tne-produtos__carousel.is-ready:focus-within .tne-produtos__track {
  animation-play-state: paused;
}

@keyframes tne-produtos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tne-produtos__track > .tne-produto-card {
  flex: 0 0 auto;
  width: 300px;
  margin-right: var(--tne-space-md);
}

@media (max-width: 749px) {
  .tne-produtos__track > .tne-produto-card { width: 240px; }
}

/* Fallback (reduced-motion ou sem JS): scroll horizontal manual, sem animação. */
.tne-produtos__carousel.is-static {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tne-produtos__carousel.is-static::-webkit-scrollbar { display: none; }
.tne-produtos__carousel.is-static .tne-produtos__track { animation: none; }
.tne-produtos__carousel.is-static .tne-produto-card { scroll-snap-align: start; }

/* ----------------------------------------------------------------------------
   4. Card de produto
   ---------------------------------------------------------------------------- */
.tne-produto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--tne-white);
  border: 1px solid var(--tne-cream);
  border-radius: var(--tne-radius-lg);
  overflow: hidden;
  transition:
    transform 0.3s var(--tne-ease-default),
    box-shadow 0.3s var(--tne-ease-default),
    opacity 0.3s var(--tne-ease-default);
  will-change: transform;
}

.tne-produto-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tne-shadow-lg);
}

/* Estado durante filtragem (controlado por JS). */
.tne-produto-card.is-hidden {
  display: none;
}
.tne-produto-card.is-fading {
  opacity: 0;
  transform: translateY(8px);
}

/* Cascata de entrada por scroll. */
.tne-produto-card.tne-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--tne-ease-default), transform 0.5s var(--tne-ease-default);
}
.tne-produto-card.tne-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------------------------
   5. Imagem + badges
   ---------------------------------------------------------------------------- */
.tne-produto-card__imagem {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--tne-cream-light);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tne-produto-card__imagem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tne-produto-card__placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, var(--tne-cream-light) 0%, var(--tne-cream) 100%);
  border-radius: var(--tne-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tne-text-subtle);
  font-size: 32px;
  font-weight: var(--tne-weight-extrabold);
  font-family: var(--tne-font-accent);
  font-style: italic;
}
.tne-produto-card__placeholder::after {
  content: 'TNE';
  opacity: 0.4;
}

.tne-produto-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--tne-font-primary);
  font-size: 11px;
  font-weight: var(--tne-weight-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--tne-radius-sm);
  color: var(--tne-white);
  z-index: 2;
}

.tne-produto-card__badge--bestseller {
  background-color: var(--tne-gold);
}

.tne-produto-card__badge--nano {
  top: 44px;
  background-color: var(--tne-green);
}

/* ----------------------------------------------------------------------------
   6. Info do card
   ---------------------------------------------------------------------------- */
.tne-produto-card__info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* Meta line distilada — combina linha + quantidade numa única row.
   A cor por categoria aplica-se à linha (eyebrow), separator e
   quantidade ficam em --tne-text-subtle. */
.tne-produto-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tne-font-primary);
  font-size: 11px;
  font-weight: var(--tne-weight-extrabold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}

.tne-produto-card__linha {
  color: var(--tne-text-subtle);
}

.tne-produto-card__sep {
  color: var(--tne-text-subtle);
  opacity: 0.5;
  font-weight: var(--tne-weight-regular);
}

.tne-produto-card__quantidade {
  color: var(--tne-text-subtle);
  opacity: 0.7;
  font-weight: var(--tne-weight-semibold);
  letter-spacing: 0.06em;
}

/* Cores por categoria — aplicadas à linha eyebrow. */
.tne-produto-card__meta[data-categoria="emagrecimento"]  .tne-produto-card__linha { color: #E08540; }
.tne-produto-card__meta[data-categoria="adaptogenios"]   .tne-produto-card__linha { color: var(--tne-green); }
.tne-produto-card__meta[data-categoria="complementares"] .tne-produto-card__linha { color: #4A90C2; }
.tne-produto-card__meta[data-categoria="beleza"]         .tne-produto-card__linha { color: #C25A8A; }
.tne-produto-card__meta[data-categoria="especificos"]    .tne-produto-card__linha { color: #7355A4; }
.tne-produto-card__meta[data-categoria="vitaminas"]      .tne-produto-card__linha { color: var(--tne-gold); }

.tne-produto-card__nome {
  font-family: var(--tne-font-primary);
  font-size: 18px;
  font-weight: var(--tne-weight-bold);
  line-height: 1.3;
  color: var(--tne-text);
  margin: 0;
  letter-spacing: -0.005em;
}

/* Descrição opt-in (default off via setting da secção). */
.tne-produto-card__descricao {
  font-size: 14px;
  line-height: 1.55;
  color: var(--tne-text-muted);
  margin: 0;
  flex: 1;
}

/* ----------------------------------------------------------------------------
   7. Preço borrado (CRÍTICO)
   O valor real NUNCA está no HTML. O blur é puramente cosmético sobre
   uma string literal "€--,--".
   ---------------------------------------------------------------------------- */
.tne-produto-card__preco-area {
  position: relative;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tne-produto-card__preco-blurred {
  background: linear-gradient(135deg, var(--tne-cream-light) 0%, var(--tne-cream) 100%);
  border-radius: var(--tne-radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

.tne-produto-card__preco-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tne-font-primary);
  font-size: 11px;
  font-weight: var(--tne-weight-extrabold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tne-gold);
  position: relative;
  z-index: 1;
}

/* Help button "?" — micro-interaction educacional sobre o preço borrado.
   Subtil por defeito (opacity 0.55), revela-se no hover do label. */
.tne-produto-card__preco-help {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--tne-gold);
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition:
    opacity 0.3s var(--tne-ease-default),
    color 0.3s var(--tne-ease-default),
    background-color 0.3s var(--tne-ease-default);
}

.tne-produto-card__preco-label:hover .tne-produto-card__preco-help,
.tne-produto-card__preco-help:hover,
.tne-produto-card__preco-help:focus-visible {
  opacity: 1;
  background-color: rgba(202, 150, 73, 0.12);
}

.tne-produto-card__preco-help:focus-visible {
  outline: 2px solid var(--tne-gold);
  outline-offset: 2px;
}

/* Tooltip — flutua acima do bloco preço, posicionado absolute em .preco-area.
   Visível em hover/focus do help button (CSS :has()) ou via classe is-tip-open
   (toggle JS para touch devices). Hidden por defeito + opacity para transição. */
.tne-produto-card__preco-tip {
  position: absolute;
  bottom: calc(100% - 32px);
  left: 0;
  right: 0;
  z-index: 5;
  background-color: var(--tne-green-dark);
  color: var(--tne-cream-light);
  padding: 12px 14px;
  border-radius: var(--tne-radius-md);
  font-family: var(--tne-font-primary);
  font-size: 12px;
  font-weight: var(--tne-weight-semibold);
  line-height: 1.45;
  letter-spacing: 0.005em;
  text-transform: none;
  box-shadow:
    0 16px 32px -12px rgba(0, 30, 24, 0.55),
    0 0 0 1px rgba(202, 150, 73, 0.20) inset;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.3s var(--tne-ease-default),
    transform 0.3s var(--tne-ease-default),
    visibility 0s linear 0.3s;
  pointer-events: none;
}

/* Pequena seta apontando para baixo (anclando ao label). */
.tne-produto-card__preco-tip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 18px;
  width: 12px;
  height: 12px;
  background-color: var(--tne-green-dark);
  transform: rotate(45deg);
  border-radius: 2px;
  z-index: -1;
}

/* Mostra: hover/focus dentro de .preco-area, ou classe is-tip-open (touch). */
.tne-produto-card__preco-area:has([data-tne-preco-help]:hover) .tne-produto-card__preco-tip,
.tne-produto-card__preco-area:has([data-tne-preco-help]:focus-visible) .tne-produto-card__preco-tip,
.tne-produto-card__preco-area.is-tip-open .tne-produto-card__preco-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.3s var(--tne-ease-default),
    transform 0.3s var(--tne-ease-default),
    visibility 0s linear 0s;
}

.tne-produto-card__preco-fake {
  font-family: var(--tne-font-primary);
  font-size: 22px;
  font-weight: var(--tne-weight-extrabold);
  color: var(--tne-text);
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------------------
   7b. Margem de revenda em destaque (substitui o preço borrado p/ o público)
   Cartão verde com "+40%" dourado — vende a oportunidade em vez de esconder
   o preço. NÃO contém preço real (gating mantido).
   ---------------------------------------------------------------------------- */
.tne-produto-card__margem {
  background: linear-gradient(135deg, var(--tne-green) 0%, var(--tne-green-dark) 100%);
  border-radius: var(--tne-radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tne-produto-card__margem-valor {
  font-family: var(--tne-font-primary);
  font-size: 26px;
  font-weight: var(--tne-weight-extrabold);
  color: var(--tne-gold-light);
  line-height: 1;
  letter-spacing: 0.01em;
}

.tne-produto-card__margem-label {
  font-family: var(--tne-font-primary);
  font-size: 11px;
  font-weight: var(--tne-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 242, 235, 0.85);
}

/* ----------------------------------------------------------------------------
   8. CTA "Cadastrar-me" — pill com arrow que desliza no hover
   ---------------------------------------------------------------------------- */
.tne-produto-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  text-align: center;
  background-color: var(--tne-green);
  color: var(--tne-white);
  text-decoration: none;
  padding: 11px 18px;
  border-radius: var(--tne-radius-pill);
  font-size: 13px;
  font-weight: var(--tne-weight-bold);
  letter-spacing: 0.04em;
  transition:
    background-color 0.3s var(--tne-ease-default),
    transform 0.25s var(--tne-ease-default),
    box-shadow 0.3s var(--tne-ease-default);
  box-shadow: 0 4px 12px -4px rgba(0, 30, 24, 0.35);
}

.tne-produto-card__cta-arrow {
  transition: transform 0.3s var(--tne-ease-default);
  flex-shrink: 0;
}

.tne-produto-card__cta:hover {
  background-color: var(--tne-green-hover);
  color: var(--tne-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(0, 30, 24, 0.45);
}

.tne-produto-card__cta:hover .tne-produto-card__cta-arrow {
  transform: translateX(3px);
}

.tne-produto-card__cta:active {
  transform: translateY(0) scale(0.98);
}

.tne-produto-card__cta--disabled {
  background-color: var(--tne-cream);
  color: var(--tne-text-subtle);
  cursor: not-allowed;
}
.tne-produto-card__cta--disabled:hover {
  background-color: var(--tne-cream);
  color: var(--tne-text-subtle);
  transform: none;
}

/* ----------------------------------------------------------------------------
   9. Placeholder card "Em breve"
   ---------------------------------------------------------------------------- */
.tne-produto-card--placeholder {
  opacity: 0.7;
  border-style: dashed;
}
.tne-produto-card--placeholder:hover {
  transform: none;
  box-shadow: none;
}

/* ----------------------------------------------------------------------------
   10. CTA final da secção
   ---------------------------------------------------------------------------- */
.tne-produtos__cta {
  margin-top: var(--tne-space-2xl);
  padding: var(--tne-space-xl);
  background: linear-gradient(135deg, var(--tne-cream-light) 0%, var(--tne-cream) 100%);
  border-radius: var(--tne-radius-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tne-space-md);
}

.tne-produtos__cta-text {
  margin: 0;
  font-size: var(--tne-body);
  color: var(--tne-text);
  max-width: 560px;
}
.tne-produtos__cta-text strong {
  color: var(--tne-green);
  font-weight: var(--tne-weight-bold);
}

.tne-produtos__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--tne-gold);
  color: var(--tne-white);
  padding: 14px 32px;
  border-radius: var(--tne-radius-pill);
  text-decoration: none;
  font-weight: var(--tne-weight-bold);
  font-size: 15px;
  letter-spacing: 0.04em;
  box-shadow: var(--tne-shadow-gold);
  transition: background-color 0.25s var(--tne-ease-default), transform 0.2s var(--tne-ease-default);
}
.tne-produtos__cta-btn:hover {
  background-color: var(--tne-gold-light);
  color: var(--tne-white);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------------------
   10b. Preço REAL (estado revendedora-ativa)
   Substitui o bloco borrado quando o customer tem a tag aprovada.
   ---------------------------------------------------------------------------- */
.tne-produto-card__preco-revealed {
  background: linear-gradient(135deg, var(--tne-cream-light) 0%, var(--tne-cream) 100%);
  border-radius: var(--tne-radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.tne-produto-card__preco-revealed .tne-produto-card__preco-label {
  color: var(--tne-gold);
}

.tne-produto-card__preco-compare {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--tne-text-muted);
  line-height: 1.2;
}

.tne-produto-card__preco-compare s {
  text-decoration-color: var(--tne-text-muted);
  opacity: 0.8;
}

.tne-produto-card__preco-discount {
  background-color: var(--tne-green);
  color: var(--tne-white);
  font-family: var(--tne-font-primary);
  font-weight: var(--tne-weight-bold);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--tne-radius-pill);
}

.tne-produto-card__preco-valor {
  font-family: var(--tne-font-primary);
  font-size: 22px;
  font-weight: var(--tne-weight-extrabold);
  color: var(--tne-text);
  letter-spacing: 0.01em;
}

.tne-produto-card__form {
  margin: 0;
  display: flex;
}

.tne-produto-card__form .tne-produto-card__cta {
  border: 0;
  cursor: pointer;
  font-family: var(--tne-font-primary);
}

/* ----------------------------------------------------------------------------
   11. Acessibilidade — respeitar reduced motion
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tne-produto-card,
  .tne-produto-card__cta,
  .tne-produtos__cta-btn,
  .tne-filtro {
    transition: none !important;
  }
  .tne-produto-card.tne-reveal {
    opacity: 1;
    transform: none;
  }
}