/* === APPS GRID - PlayStore-like (compatível com .mas-apps-grid) === */
.mas-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
  margin: 18px 0;
  padding: 12px;
  align-items: start;
  background: transparent;
}

/* Card compacto — vertical (ícone em cima, título/nota abaixo) */
.mas-apps-grid .mas-app-card {
  background: transparent;
  border-radius: 12px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
}

/* hover sutil */
.mas-apps-grid .mas-app-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
}

/* Ícone no estilo Play Store (quadrado com cantos arredondados) */
.mas-apps-grid .mas-app-icon {
  width: 84px;
  height: 84px;
  border-radius: 18%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.04);
  flex-shrink: 0;
  display:block;
  margin: 0 auto;
}

/* Título abaixo do ícone */
.mas-apps-grid .mas-app-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  color: #111827;
  line-height: 1.15;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
}

/* Rating pequeno com estrelas inline e texto */
.mas-apps-grid .mas-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  justify-content: center;
  color: #6b7280;
  font-size: 12px;
}

/* Estrelas — tamanho reduzido */
.mas-apps-grid .mas-stars svg {
  width: 14px;
  height: 14px;
  fill: #d1d5db;
  vertical-align: middle;
}
.mas-apps-grid .mas-star.active { fill: #fbbf24; }

/* Nota numérica (4.8) */
.mas-apps-grid .mas-rating-text {
  font-size: 12px;
  color: #6b7280;
}

/* Remove elementos extras para visual compacto (se existirem) */
.mas-apps-grid .mas-badges,
.mas-apps-grid .mas-app-meta,
.mas-apps-grid .mas-buttons,
.mas-apps-grid .mas-app-developer { display: none !important; }

/* Responsividade */
@media (max-width: 1100px){
  .mas-apps-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:14px; }
  .mas-apps-grid .mas-app-icon { width:72px; height:72px; border-radius:16%; }
  .mas-apps-grid .mas-app-title { font-size:13px; }
}
@media (max-width: 781px){
  .mas-apps-grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap:10px; padding:8px; }
  .mas-apps-grid .mas-app-icon { width:56px; height:56px; border-radius:18%; }
  .mas-apps-grid .mas-app-title { font-size:12px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
  .mas-apps-grid .mas-stars svg { width:12px; height:12px; }
  .mas-rating { flex-wrap: wrap; justify-content: center; }
  .mas-rating-count { display: none !important; }
    
  
}


/* Extra: garante que os elementos internos ocupem largura total */
.mas-apps-grid .mas-app-card > * { width:100%; display:block; }
