/* ═══════════════════════════════════════════════════════════════════════
   "Our Products" strip (product-strip.js) — self-contained colours so it
   looks right on any product page regardless of that page's theme vars.
   ═══════════════════════════════════════════════════════════════════════ */
.ps {
  border-top: 1px solid rgba(120, 160, 255, 0.14);
  background: linear-gradient(180deg, rgba(8, 20, 43, 0.6), rgba(5, 13, 31, 0));
  padding: 46px 20px 42px;
}
.ps__wrap { max-width: 1180px; margin: 0 auto; }
.ps__head { text-align: center; margin-bottom: 24px; }
.ps__eyebrow {
  display: inline-block; font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #48d7ff;
  border: 1px solid rgba(120, 160, 255, 0.2); border-radius: 999px;
  padding: 4px 13px; margin-bottom: 12px;
}
.ps__title {
  font-size: clamp(1.3rem, 3vw, 1.9rem); color: #eaf2ff;
  margin-bottom: 8px; letter-spacing: 0.02em; font-weight: 600;
}
.ps__sub { color: #8fa3c8; font-size: 0.9rem; max-width: 640px; margin: 0 auto; }
.ps__grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
}
.ps__card {
  display: block; background: linear-gradient(160deg, #0c1a36, #10224a);
  border: 1px solid rgba(120, 160, 255, 0.16); border-radius: 14px;
  padding: 16px; color: #dfe8ff; text-decoration: none;
  transition: transform 0.16s, border-color 0.16s;
}
.ps__card:hover { transform: translateY(-3px); border-color: #2f8bff; }
.ps__icon {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; background: rgba(47, 139, 255, 0.15); color: #48d7ff;
  margin-bottom: 10px;
}
.ps__icon svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ps__head-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ps__name { font-weight: 600; font-size: 1rem; }
.ps__badge {
  font-size: 0.64rem; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(47, 139, 255, 0.18); color: #9fc1ff;
}
.ps__badge--live { background: rgba(47, 224, 143, 0.14); color: #7ff0be; }
.ps__desc {
  display: block; font-size: 0.83rem; color: #8fa3c8; line-height: 1.45;
  margin-bottom: 8px;
}
.ps__tag {
  display: block; font-size: 0.7rem; color: #48d7ff; opacity: 0.85;
  margin-bottom: 8px;
}
.ps__subs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ps__chip {
  font-size: 0.68rem; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: rgba(72, 215, 255, 0.1); color: #8fe6ff;
  border: 1px solid rgba(72, 215, 255, 0.25);
}
.ps__chip:hover { background: rgba(72, 215, 255, 0.2); }
.ps__cta { font-size: 0.8rem; color: #2f8bff; font-weight: 600; }
@media (max-width: 760px) {
  .ps__grid { grid-template-columns: 1fr; }
}
