/* Capri Blu Totem - v0.4.20
   Fix definitivo griglia prodotti per browser con zoom/scaling elevato.
   Mantiene 5 colonne fino a viewport CSS molto stretti e corregge il testo blu su blu. */

#screen-products #product-gallery,
#screen-products #product-gallery.product-gallery {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
}

#screen-products #product-gallery > .product-card {
  min-width: 0 !important;
  width: auto !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(9,42,72,.96), rgba(10,52,87,.94)) !important;
  color: #fff !important;
  overflow: hidden !important;
}

#screen-products #product-gallery .product-image {
  min-height: 72px !important;
  height: 72px !important;
  max-height: 72px !important;
  background: rgba(18,63,109,.78) !important;
  color: rgba(255,255,255,.88) !important;
}

#screen-products #product-gallery .product-content {
  padding: 8px 9px 9px !important;
  color: #fff !important;
}

/* Usa selettori volutamente ampi: alcuni prodotti sono renderizzati da template diversi. */
#screen-products #product-gallery .product-card h3,
#screen-products #product-gallery .product-content h3,
#screen-products #product-gallery .product-card-heading h3 {
  margin: 0 0 4px !important;
  color: #fff !important;
  font-size: .84rem !important;
  line-height: 1.08 !important;
}

#screen-products #product-gallery .product-card-price,
#screen-products #product-gallery .product-price,
#screen-products #product-gallery .product-price strong {
  color: #fff2c7 !important;
  font-size: .82rem !important;
}

#screen-products #product-gallery .product-cart-status {
  padding: 2px 5px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  font-size: .58rem !important;
}

#screen-products #product-gallery .product-content p,
#screen-products #product-gallery .product-content > p {
  margin: 4px 0 0 !important;
  color: rgba(255,255,255,.88) !important;
  font-size: .62rem !important;
  line-height: 1.22 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

#screen-products #product-gallery .product-content small {
  margin-top: 4px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: .56rem !important;
}

#screen-products #product-gallery .product-card-actions {
  margin-top: 6px !important;
  gap: 4px !important;
}

#screen-products #product-gallery .product-single-add,
#screen-products #product-gallery .product-modify-compact,
#screen-products #product-gallery .add-button {
  min-height: 29px !important;
  height: 29px !important;
  padding: 0 6px !important;
  border-radius: 7px !important;
  font-size: .62rem !important;
}

#screen-products #product-gallery .product-single-add,
#screen-products #product-gallery .add-button {
  border-color: #fff2c7 !important;
  background: #fff2c7 !important;
  color: #0d3559 !important;
  font-weight: 900 !important;
}

#screen-products #product-gallery .product-inline-stepper {
  min-height: 30px !important;
  height: 30px !important;
  grid-template-columns: 28px 1fr 28px !important;
}

/* IMPORTANTE: niente passaggio a 3 colonne a 900px.
   Con zoom 175-200% il browser dichiara una viewport CSS molto più piccola.
   Cinque colonne vengono quindi mantenute fino a 620px CSS. */
@media (max-width: 620px) {
  #screen-products #product-gallery,
  #screen-products #product-gallery.product-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 420px) {
  #screen-products #product-gallery,
  #screen-products #product-gallery.product-gallery {
    grid-template-columns: 1fr !important;
  }
}