/* Extras for product overview pages built on the ViraQueue layout (/products/viraqueue/css/styles.css). */

.product-overview .brand-icon {
  border-radius: 10px;
  padding: 3px;
  object-fit: contain;
}

.breadcrumb-mini {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.breadcrumb-mini a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.breadcrumb-mini a:hover {
  text-decoration: underline;
}

.platform-card__icon--theme {
  color: var(--navy);
  background: linear-gradient(145deg, #f7f1d6, #fbf8ec);
  box-shadow: inset 0 0 0 1px rgba(196, 162, 39, 0.3);
}

.platform-card__icon svg {
  display: block;
}

.audience-grid.audience-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.steps.steps--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sibling-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.sibling-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.sibling-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.sibling-card img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  background: #0c1f33;
  padding: 3px;
}

.sibling-card strong {
  display: block;
  font-size: 1rem;
}

.sibling-card span span {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .steps.steps--five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .audience-grid.audience-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .audience-grid.audience-grid--four,
  .steps.steps--five,
  .sibling-products {
    grid-template-columns: 1fr;
  }
}