/* ============================================================================
   PRODUCTS.CSS — витрина собственных продуктов и страница продукта.
   Подключается на /produkty и /produkty/<slug> после site.css. Только токены.
   ============================================================================ */

/* ── Сетка карточек продуктов ─────────────────────────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }

.prod-card {
  display: flex; gap: var(--spacing-md); align-items: center;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--spacing-lg); color: var(--ink); box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--warm-soft); color: var(--ink); }
.prod-card__mark {
  width: 60px; height: 60px; flex: 0 0 auto; border-radius: var(--radius-sm);
  background: var(--warm-bg); color: var(--warm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-mono); font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg);
}
.prod-card:nth-child(3n) .prod-card__mark { background: var(--sky-bg); color: var(--sky-muted); }
.prod-card:nth-child(3n+1) .prod-card__mark { background: var(--sage-bg); color: var(--sage); }
.prod-card__body { flex: 1; min-width: 0; }
.prod-card__name { display: block; font-weight: var(--font-weight-black); font-size: var(--font-size-lg); letter-spacing: -0.01em; }
.prod-card__cat {
  display: block; font-family: var(--font-family-mono); font-size: var(--font-size-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 3px 0 7px;
}
.prod-card__text { display: block; font-size: var(--font-size-sm); line-height: 1.5; color: var(--ink-soft); }
.prod-card__open { flex: 0 0 auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--warm); }

/* ── Страница продукта ────────────────────────────────────────────────────── */
.prod-hero {
  margin-top: var(--spacing-lg);
  background:
    linear-gradient(135deg, rgba(211, 143, 118, 0.12), transparent 40%),
    var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: clamp(24px, 4vw, 48px);
}
.prod-hero__id { display: flex; align-items: center; gap: var(--spacing-md); }
.prod-hero__mark {
  width: 72px; height: 72px; flex: 0 0 auto; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--warm), var(--warm-soft)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-mono); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-2xl); box-shadow: var(--shadow-warm-soft);
}
.prod-hero__cat { font-family: var(--font-family-mono); font-size: var(--font-size-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--warm); margin-bottom: 4px; }
.prod-hero__name { font-size: clamp(28px, 4vw, var(--font-size-3xl)); letter-spacing: -0.02em; }
.prod-hero__lead { margin-top: var(--spacing-lg); max-width: 40em; font-size: var(--font-size-lg); color: var(--ink-soft); line-height: 1.55; }
.prod-hero__actions { margin-top: var(--spacing-xl); display: flex; gap: var(--spacing-md); flex-wrap: wrap; }

.prod-features { margin-top: var(--spacing-2xl); }
.prod-feature {
  display: flex; gap: var(--spacing-md); align-items: flex-start;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--spacing-lg); box-shadow: var(--shadow-sm); height: 100%;
}
.prod-feature__ico {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--radius-sm);
  background: var(--warm-bg); color: var(--warm);
  display: flex; align-items: center; justify-content: center;
}
.prod-feature__title { font-weight: var(--font-weight-bold); font-size: var(--font-size-md); color: var(--ink); }
.prod-feature__text { margin-top: 4px; font-size: var(--font-size-base); color: var(--ink-soft); line-height: 1.55; }

/* ── Витрина продукта во фрейме (/produkty/<slug> при is_embedded) ─────────── */
.prod-embed { margin-top: var(--spacing-lg); }
.prod-embed__frame {
  width: 100%; height: clamp(520px, calc(100vh - 220px), 1400px);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); background: var(--white);
}

@media (max-width: 620px) {
  .prod-grid { grid-template-columns: 1fr; }
  .prod-embed__frame { height: calc(100vh - 180px); }
}