/* =====================================================
   PRODUCTS PAGE
   ===================================================== */

/* ── Category pills (inside sol-hero) ──
   Layout (display:flex, gap, justify-content, margin-top) now handled
   by Bootstrap utilities: d-flex flex-wrap justify-content-center gap-3 mt-5 */
.prd-hero__cats {
  /* flex-wrap: wrap handled by .flex-wrap */
}

.prd-hero__cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8eef6;
  font-size: var(--ma-body-text);
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms, transform 200ms;
  cursor: pointer;
}

.prd-hero__cat:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}


/* ══════════════════════════════════════════════════════════════
   PRODUCTS PAGE — RESPONSIVE RULES
   (previously empty — adding complete coverage)
   ══════════════════════════════════════════════════════════════ */

/* ── Hero category pills ── */
@media (max-width: 768px) {
  .prd-hero__cats {
    gap: 8px;
    justify-content: flex-start;
  }

  .prd-hero__cat {
    padding: 10px 16px;
    font-size: var(--ma-metadata);
  }
}

@media (max-width: 480px) {
  .prd-hero__cats {
    flex-direction: column;
    align-items: stretch;
  }

  .prd-hero__cat {
    justify-content: center;
    text-align: center;
  }
}

/* ── Hero sizing ── */
@media (max-width: 768px) {
  .prd-hero {
    min-height: 55vh;
    padding: clamp(5.5rem, 9vw, 8rem) 0 clamp(2.5rem, 5vw, 4rem);
  }

  .prd-hero h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .prd-hero p {
    font-size: var(--ma-body-text);
    margin-bottom: 1.5rem;
  }
}