/* ============================================================
   pages/product.css — ficha de producto (el corazón del sitio)
   ============================================================ */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5ch;
  align-items: center;
  font-size: .88rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-brand-green-text); }
.breadcrumb span[aria-hidden] { opacity: .5; }
.breadcrumb [aria-current] { color: var(--color-ink); }

/* Dos columnas: imagen | información */
.product {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 820px) { .product { grid-template-columns: 1fr; } }

.product__media {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  position: sticky;
  top: 92px;
}
@media (max-width: 820px) { .product__media { position: static; } }
.product__media img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }

.product__line {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-brand-green-text);
  background: rgba(0, 152, 72, .12);
  padding: .3em .8em;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-md);
}
.product__name { margin: 0 0 var(--space-md); font-size: clamp(1.9rem, 4vw, 2.6rem); }
.product__lead { color: var(--color-text-body); font-size: var(--step-1); line-height: 1.6; margin: 0 0 var(--space-lg); }

.product__certs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-lg); }
/* .cert-badge vive en components/cert-badge.css */

/* Análisis / composición */
.product__spec {
  display: grid;
  gap: 0;
  margin: 0 0 var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.product__spec > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
}
.product__spec > div:nth-child(odd) { background: var(--color-surface-tint); }
.product__spec dt { color: var(--color-text-muted); font-family: var(--font-heading); font-weight: 400; letter-spacing: .02em; margin: 0; }
.product__spec dd { margin: 0; color: var(--color-ink); font-weight: 500; text-align: right; }

.product__block-label {
  display: block;
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  color: var(--color-text-muted);
  margin-bottom: .6rem;
}
.product__crops { margin-bottom: var(--space-lg); }
.product__crops ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
/* La píldora la lleva el enlace y no el <li>: cada cultivo lleva al catálogo
   filtrado, y con el relleno en el <li> solo sería pulsable el texto. */
.product__crops li { display: flex; }
.product__crops a {
  font-size: .88rem;
  color: var(--color-text-body);
  background: var(--color-surface-tint);
  border-radius: var(--radius-pill);
  padding: .3em .8em;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.product__crops a:hover,
.product__crops a:focus-visible {
  background: var(--color-brand-green);
  color: #fff;
  text-decoration: none;
}

.product__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); }
.product__actions .btn { flex: 1 1 auto; text-align: center; }

.product__docs { border-top: 1px solid var(--color-border); padding-top: var(--space-lg); }
.doc-link {
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  font-family: var(--font-heading);
  font-size: .92rem;
  color: var(--color-brand-blue);
  text-decoration: none;
  margin-right: 1.4rem;
}
.doc-link::before { content: "⬇"; font-size: .9em; }
.doc-link:hover { text-decoration: underline; }
/* Formato y peso del archivo: media de las descargas se hacen desde el
   celular en pleno campo, con la señal que haya. */
.doc-link__meta { color: var(--color-text-muted); font-size: .85em; font-weight: 400; }
.product__docs-empty {
  font-size: .92rem;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 46ch;
}

/* Secciones bajo la ficha */
.product__section { margin-top: var(--space-2xl); }
.product__section h2 { margin-bottom: var(--space-lg); }
.product__video { max-width: 720px; }