/* =================== pdp-kit-products.css =================== */
/* pdp-kit-products — grid container for the "Для этого фасада обычно нужно"
 * bundle. Each tile is a standard .pcard.pcard--c (same template as catalog,
 * cross-sell, recently-viewed). The only kit-specific addition is the count
 * badge (×1 / ×4 / опц.) placed inside .pcard-overlay__badges using
 * .pcard-badge--count (a gold-gradient variant). Strictly .pdp-kit-* */

.pdp-kit-section {
  margin: clamp(28px, 3.4vw, 44px) 0 clamp(20px, 2.4vw, 32px);
}
.pdp-kit-section > .hc-sec-h {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.pdp-kit-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  align-items: stretch;
}
@media (max-width: 1440px) { .pdp-kit-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px)  { .pdp-kit-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .pdp-kit-products { grid-template-columns: 1fr; } }

/* Count badge — kit-specific extension of .pcard-badge.
   Lives inside .pcard-overlay__badges; gold-gradient pill with crisp number. */
.pcard-badge--count {
  background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
  color: #2a2018;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 6px -1px rgba(184, 154, 111, 0.42);
}
.pcard-badge--count-opt {
  background: linear-gradient(135deg, rgba(28, 24, 20, 0.92), rgba(28, 24, 20, 0.78));
  color: var(--hc-paper, #ffffff);
}