/* ===== SOTTOCATEGORIE – versione auto-responsive (Grid + fallback Flex) ===== */

#sottocategorie_elenco *{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

hr{
  size:1px;
  color:#D6D6D6;
  height:0;
  border-top:1px solid #D6D6D6;
  border-right:none;
  border-bottom:none;
  border-left:none;
  margin-bottom:0 !important;
}

/* CONTENITORE */
#sottocategorie_elenco{
  color:#FFFFFF;
  margin-top:16px;

  /* Layout principale: CSS Grid */
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:12px;
  align-items:start;
}

/* Fallback per browser che non supportano grid */
@supports not (display:grid){
  #sottocategorie_elenco{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
}

/* CARD */
.sottocategoria_elemento{
  margin:0;
  padding:0;
  /* rimuove vecchi float/width fissi */
  float:none;
  width:auto;
}

/* LINK */
.sottocategoria_elemento a:link,
.sottocategoria_elemento a:visited{
  color:#333;
  text-decoration:none;
}
.sottocategoria_elemento a:hover,
.sottocategoria_elemento a:active{
  color:#0066FF;
  text-decoration:none;
}

/* IMMAGINE */
.sottocategoria_elemento_immagine_contenitore{
  position:relative;
  width:100%;
}

div.sottocategoria_elemento:hover div.sottocategoria_elemento_immagine img{
  border:4px solid #fff;
}
div.sottocategoria_elemento:hover div.sottocategoria_elemento_titolo a{
  color:#0066FF;
}

.sottocategoria_elemento_immagine{
  width:100%;
  height:100%;
}
.sottocategoria_elemento_immagine img{
  width:100%;
  transition:all .1s ease-in-out;
  border:0 solid #fff;
}
.sottocategoria_elemento_immagine img:hover{
  border:4px solid #fff;
}

/* TITOLO */
.sottocategoria_elemento_titolo h5{
  font-size:16px;
  font-weight:bold;
  text-align:center;
  background-color:#FFFFFF;
  line-height:18px;
  margin-top:10px;
  word-wrap:break-word;
}

/* ===== NIENTE media query / nth-child: il layout si adatta da solo ===== */