/* Masonry "Pinterest" SOLO per le subcategorie integratori
   - non tocca le 6 card sopra
   - non cambia colori/font/padding delle card (solo layout) */

body.vi-page-cosmetici #main .vi-subcats-grid{
  /* Deve vincere su eventuali grid/flex definiti altrove */
  display: block !important;
  width: 100% !important;
  max-width: none !important;

  /* colonne tipo Pinterest */
  column-count: 4;
  column-gap: 14px;
}

body.vi-page-cosmetici #main .vi-subcats-grid > a.vi-subcat-card{
  /* necessario per columns */
  display: inline-block !important;
  width: 100% !important;
  vertical-align: top;

  /* evita spezzature */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;

  /* solo spacing verticale tra “pin” */
  margin: 0 0 18px !important;
}

/* IMPORTANT: non tagliare le immagini */
body.vi-page-cosmetici #main .vi-subcats-grid > a.vi-subcat-card img{
  display: block;
  width: 100%;
  height: auto;
}

/* Responsive */
@media (max-width: 1100px){
  body.vi-page-cosmetici #main .vi-subcats-grid{ column-count: 3; }
}
@media (max-width: 820px){
  body.vi-page-cosmetici #main .vi-subcats-grid{ column-count: 2; }
}
@media (max-width: 520px){
  body.vi-page-cosmetici #main .vi-subcats-grid{ column-count: 1; }
}


/* Text padding: non tocca immagini, solo allinea meglio il testo */
body.vi-page-cosmetici #main .vi-subcats-grid > a.vi-subcat-card .vi-subcat-body{
  display: block;
  padding: 12px 14px 14px;
}

body.vi-page-cosmetici #main .vi-subcats-grid > a.vi-subcat-card .vi-subcat-title,
body.vi-page-cosmetici #main .vi-subcats-grid > a.vi-subcat-card .vi-subcat-desc{
  padding-left: 0;
  padding-right: 0;
}