.category-family-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.72rem;align-items:start}
.category-family{min-width:0;overflow:hidden;border:1px solid rgba(79,125,59,.12);border-radius:20px 20px 20px 10px;background:rgba(255,252,240,.58);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 24px rgba(54,69,44,.045);transition:border-color .2s,box-shadow .2s,transform .2s}
.category-family.is-open{grid-column:1/-1;border-color:rgba(79,125,59,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 16px 38px rgba(54,69,44,.075)}
.category-trigger{width:100%;min-height:134px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:.6rem .8rem;padding:1.05rem;border:0;background:transparent;color:var(--color-text);cursor:pointer;text-align:left}
.category-icon{grid-column:1/-1;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(79,125,59,.14);border-radius:15px 15px 15px 7px;color:var(--color-green-dark);background:rgba(226,236,212,.70)}
.category-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.category-label{color:var(--color-green-deep,var(--color-text));font-size:.95rem;font-weight:790;line-height:1.18}
.category-chevron{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:rgba(79,125,59,.07);color:var(--color-green-dark);transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.category-chevron svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.category-family.is-open .category-chevron{transform:rotate(180deg)}
.category-family.is-open .category-trigger{min-height:auto;grid-template-columns:auto 1fr auto;grid-template-rows:auto;padding-bottom:.8rem;background:rgba(255,255,255,.18)}
.category-family.is-open .category-icon{grid-column:auto;width:44px;height:44px}
.category-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .34s cubic-bezier(.2,.7,.2,1),opacity .22s}
.category-panel[hidden]{display:grid}
.category-family.is-open .category-panel{grid-template-rows:1fr;opacity:1}
.category-panel-inner{min-height:0;overflow:hidden;padding:0 1.05rem}
.category-family.is-open .category-panel-inner{padding-bottom:1.05rem}
.category-panel ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.52rem .8rem;margin:0;padding:1rem 0 0;border-top:1px solid rgba(79,125,59,.10);list-style:none}
.category-panel li{position:relative;padding-left:.9rem;color:var(--color-text-soft);font-size:.88rem;line-height:1.35}
.category-panel li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;border-radius:50%;background:var(--color-green)}
.category-cta{display:inline-flex;margin-top:1rem;color:var(--color-green-dark);font-size:.86rem;font-weight:780;text-decoration:none}
@media(min-width:660px){.category-family-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.86rem}.category-trigger{min-height:150px;padding:1.2rem}.category-icon{width:54px;height:54px}.category-panel ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:920px){.category-family-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.category-trigger{min-height:166px;padding:1.28rem}.category-icon{width:58px;height:58px}.category-panel ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1180px){.category-family-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:420px){.category-trigger{min-height:124px;padding:.9rem}.category-icon{width:44px;height:44px}.category-panel ul{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.category-family,.category-chevron,.category-panel{transition:none!important}}

/* Card con immagine per i reparti aggiornati */
.category-trigger--media{
  display:block;
  min-height:0;
  padding:0;
  background:transparent;
}
.category-trigger--media:focus-visible{
  outline:none;
}
.category-trigger--media .category-media{
  position:relative;
  display:block;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-radius:19px 19px 12px 12px;
  background:#d8d4cc;
}
.category-trigger--media .category-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.001);
  transition:transform .34s cubic-bezier(.2,.7,.2,1),filter .28s ease;
}
.category-trigger--media .category-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(13, 20, 16, .08) 0%, rgba(13, 20, 16, .14) 45%, rgba(13, 20, 16, .44) 100%);
  transition:background .28s ease;
}
.category-trigger--media .category-media-content{
  position:absolute;
  inset:auto 0 0 0;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:.8rem;
  padding:1rem 1rem 1rem;
}
.category-trigger--media .category-label{
  display:block;
  color:#fff;
  font-size:1rem;
  font-weight:790;
  line-height:1.18;
  text-shadow:0 1px 10px rgba(0,0,0,.20);
}
.category-trigger--media .category-chevron{
  position:absolute;
  top:.9rem;
  right:.9rem;
  z-index:3;
  width:32px;
  height:32px;
  flex:0 0 32px;
  background:rgba(255,255,255,.78);
  color:var(--color-green-dark);
  box-shadow:0 4px 18px rgba(0,0,0,.10);
}
.category-trigger--media:hover .category-image,
.category-trigger--media:focus-visible .category-image,
.category-family.is-open .category-trigger--media .category-image{
  transform:scale(1.045);
}
.category-trigger--media:hover .category-media::after,
.category-trigger--media:focus-visible .category-media::after{
  background:linear-gradient(180deg, rgba(13, 20, 16, .12) 0%, rgba(13, 20, 16, .18) 45%, rgba(13, 20, 16, .52) 100%);
}
.category-family.is-open .category-trigger--media{
  display:block;
  min-height:0;
  padding:0;
  background:transparent;
}
.category-family.is-open .category-trigger--media .category-media::after{
  background:linear-gradient(180deg, rgba(10,16,13,.16) 0%, rgba(10,16,13,.22) 38%, rgba(10,16,13,.60) 100%);
}
.category-family.is-open .category-trigger--media .category-chevron{
  transform:rotate(180deg);
}
.category-family.is-open .category-trigger--media .category-label{
  color:#fff;
}
.category-family.is-open .category-trigger--media + .category-panel .category-panel-inner{
  padding-top:.15rem;
}
.category-trigger--media .category-media-content,
.category-trigger--media .category-chevron{
  pointer-events:none;
}
.category-trigger--media:focus-visible .category-media{
  box-shadow:0 0 0 3px rgba(79,125,59,.34) inset;
}
@media(max-width:420px){
  .category-trigger--media .category-media-content{padding:.85rem .85rem .9rem}
  .category-trigger--media .category-label{font-size:.96rem}
  .category-trigger--media .category-chevron{top:.72rem;right:.72rem;width:30px;height:30px}
}


/* V17 — apertura compatta dei reparti.
   La card non si espande più a tutta riga: si apre soltanto la tendina. */
.category-family.is-open{
  grid-column:auto;
}

/* La tendina rimane leggibile anche mantenendo la card alla sua larghezza normale. */
.category-family.is-open .category-panel ul{
  grid-template-columns:1fr;
}

/* Micro-zoom molto contenuto: nessun effetto "full screen". */
.category-trigger--media:hover .category-image,
.category-trigger--media:focus-visible .category-image{
  transform:scale(1.018);
}

.category-trigger--media:active .category-image,
.category-family.is-open .category-trigger--media .category-image{
  transform:scale(1.025);
}

@media (hover:none){
  .category-trigger--media:hover .category-image{
    transform:scale(1.001);
  }

  .category-family.is-open .category-trigger--media .category-image{
    transform:scale(1.025);
  }
}


/* V21 — layout indipendente per colonna.
   JS applica le coordinate senza cambiare l'ordine logico del DOM. */
.category-family-grid.is-independent-columns{
  position:relative;
  display:block;
  width:100%;
  transition:height .34s cubic-bezier(.2,.7,.2,1);
}
.category-family-grid.is-independent-columns .category-family{
  position:absolute;
  top:0;
  left:0;
  margin:0;
  will-change:transform;
  transition:
    transform .34s cubic-bezier(.2,.7,.2,1),
    border-color .2s ease,
    box-shadow .2s ease;
}
@media (prefers-reduced-motion: reduce){
  .category-family-grid.is-independent-columns,
  .category-family-grid.is-independent-columns .category-family{
    transition:none !important;
  }
}