/* ============ base e componenti condivisi ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui); font-size:var(--t-base); line-height:1.55;
  color:var(--testo); background:var(--sfondo);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blu-500);outline-offset:2px;border-radius:var(--r-sm)}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;margin:0 0 var(--s3);text-wrap:balance;letter-spacing:-.01em}
h1{font-size:var(--t-3xl);font-weight:700}
h2{font-size:var(--t-2xl);font-weight:700}
h3{font-size:var(--t-xl);font-weight:600}
p{margin:0 0 var(--s4)}

.faser-contenitore{max-width:var(--contenitore);margin:0 auto;padding:0 var(--s4)}
@media(min-width:768px){.faser-contenitore{padding:0 var(--s6)}}

.solo-lettori-schermo{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap
}
.salta-al-contenuto{
  position:absolute;left:-9999px;z-index:999;padding:var(--s3) var(--s4);
  background:var(--blu-900);color:#fff
}
.salta-al-contenuto:focus{left:var(--s4);top:var(--s2)}

/* ---- pulsanti ---- */
.fs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font:inherit;font-weight:600;line-height:1;cursor:pointer;
  padding:var(--s3) var(--s5);border:1px solid transparent;border-radius:var(--r);
  transition:background var(--transizione),border-color var(--transizione),color var(--transizione);
  text-decoration:none!important;min-height:42px
}
.fs-btn--azione{background:var(--azione);color:#fff;box-shadow:var(--ombra-1)}
.fs-btn--azione:hover{background:var(--azione-hover);color:#fff}
.fs-btn--primario{background:var(--blu-700);color:#fff}
.fs-btn--primario:hover{background:var(--blu-800);color:#fff}
.fs-btn--contorno{background:transparent;border-color:var(--bordo-forte);color:var(--testo)}
.fs-btn--contorno:hover{border-color:var(--blu-600);color:var(--blu-700)}
.fs-btn--blocco{width:100%}
.fs-btn[disabled],.fs-btn[aria-disabled=true]{opacity:.5;pointer-events:none}

/* ---- campi ---- */
.fs-campo{
  width:100%;font:inherit;padding:var(--s3);min-height:42px;
  border:1px solid var(--bordo-forte);border-radius:var(--r);
  background:var(--bianco);color:var(--testo)
}
.fs-campo:focus{border-color:var(--blu-500);outline:none;box-shadow:0 0 0 3px var(--blu-100)}

/* ---- etichette e stati ---- */
.fs-badge{
  display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;padding:.2em .55em;border-radius:var(--r-sm)
}
.fs-badge--ok{background:var(--ok-050);color:var(--ok-600)}
.fs-badge--avviso{background:var(--avviso-050);color:var(--avviso-600)}
.fs-badge--info{background:var(--blu-050);color:var(--blu-700)}

.fs-sku{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--testo-tenue)}

/* ---- stato vuoto: serve spesso, il 29% dei prodotti non ha foto ---- */
.fs-vuoto{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);padding:var(--s10) var(--s4);text-align:center;
  background:var(--sfondo-alt);border:1px dashed var(--bordo-forte);
  border-radius:var(--r-lg);color:var(--testo-tenue)
}
.fs-segnaposto{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;background:var(--grigio-100);color:var(--grigio-400)
}
.fs-segnaposto svg{width:38%;max-width:64px;height:auto;opacity:.55}

/* ---- briciole ---- */
.fs-briciole{
  font-size:var(--t-sm);color:var(--testo-tenue);
  padding:var(--s3) 0;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center
}
.fs-briciole a{color:var(--testo-soft)}
.fs-briciole span[aria-current]{color:var(--testo)}

/* ---- riquadro fiducia ---- */
.fs-fiducia{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.fs-fiducia li{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-sm)}
.fs-fiducia svg{flex:none;width:20px;height:20px;color:var(--blu-600);margin-top:1px}
.fs-fiducia b{display:block;color:var(--testo)}
.fs-fiducia span{color:var(--testo-tenue)}

/* ============ FOOTER ============ */
.fs-footer{background:var(--blu-900);color:var(--blu-100);margin-top:var(--s16);font-size:var(--t-sm)}
.fs-footer__usp{
  list-style:none;margin:0;padding:var(--s5) 0;display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-bottom:1px solid rgba(255,255,255,.1)
}
.fs-footer__usp li{display:flex;align-items:center;gap:var(--s3);font-weight:500}
.fs-footer__usp svg{width:20px;height:20px;flex:none;color:var(--ambra-400)}
.fs-footer__griglia{
  display:grid;gap:var(--s8);padding:var(--s10) 0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))
}
.fs-footer__col--marchio{grid-column:span 1}
@media(min-width:900px){.fs-footer__col--marchio{grid-column:span 1;max-width:300px}}
.fs-footer__col h2{
  font-size:var(--t-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#fff;margin-bottom:var(--s3)
}
.fs-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.fs-footer a{color:var(--blu-100)}
.fs-footer a:hover{color:#fff}
.fs-footer p{color:rgba(255,255,255,.72);line-height:1.6}
.fs-footer .fs-logo__marchio{color:#fff;display:block;margin-bottom:var(--s3)}
.fs-footer svg{width:15px;height:15px;vertical-align:-2px}
.fs-footer__coda{
  padding:var(--s4) 0;border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--t-xs);color:rgba(255,255,255,.55)
}
.fs-footer__coda p{margin:0;color:inherit}

/* ============ HOME ============ */
.fs-sezione{padding:var(--s12) 0}
.fs-sezione--stretta{padding:var(--s8) 0}
.fs-sezione--alt{background:var(--sfondo-alt)}
.fs-sezione__testa{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  margin-bottom:var(--s6);flex-wrap:wrap
}
.fs-sezione__testa h2{margin:0;font-size:var(--t-2xl)}
.fs-sezione__link{font-weight:600;font-size:var(--t-sm);white-space:nowrap}
.fs-occhiello{
  display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blu-600);margin-bottom:var(--s1)
}

/* --- apertura: ricerca a sinistra, mosaico a destra --- */
.fs-apertura{background:var(--blu-900);color:#fff;padding:var(--s10) 0 var(--s12)}
.fs-apertura .faser-contenitore{display:grid;gap:var(--s8);align-items:center}
@media(min-width:1000px){.fs-apertura .faser-contenitore{grid-template-columns:minmax(0,38%) minmax(0,1fr)}}
.fs-apertura__intro h1{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:var(--s3)}
.fs-apertura__intro p{color:rgba(255,255,255,.82);margin-bottom:var(--s5)}
.fs-apertura__cerca{display:flex;gap:var(--s2)}
.fs-apertura__cerca .fs-campo{min-height:48px;border:0}
.fs-apertura__cerca .fs-btn{min-height:48px;padding:0 var(--s5);flex:none}
.fs-apertura__nota{margin:var(--s4) 0 0;font-size:var(--t-sm);color:rgba(255,255,255,.55)}

/* --- mosaico promozionale --- */
.fs-mosaico{display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr)}
@media(max-width:600px){.fs-mosaico{grid-template-columns:1fr}}
.fs-promo{
  position:relative;display:flex;align-items:flex-end;min-height:180px;
  padding:var(--s5);border-radius:var(--r-lg);overflow:hidden;
  color:#fff;text-decoration:none!important;background:var(--blu-700);
  transition:transform var(--transizione),box-shadow var(--transizione)
}
a.fs-promo:hover{transform:translateY(-2px);box-shadow:var(--ombra-3)}
.fs-promo--grande{grid-column:span 2}
@media(max-width:600px){.fs-promo--grande{grid-column:span 1}}
.fs-promo__foto{position:absolute;inset:0;z-index:0}
.fs-promo__foto img{width:100%;height:100%;object-fit:cover}
.fs-promo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(11,31,42,.85),rgba(11,31,42,.15) 65%)
}
.fs-promo--chiaro{background:var(--grigio-100);color:var(--testo)}
.fs-promo--chiaro::after{background:linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,.35) 65%)}
.fs-promo--ambra{background:var(--ambra-500);color:#fff}
.fs-promo--ambra::after{background:linear-gradient(to top,rgba(180,83,9,.85),rgba(180,83,9,.2) 65%)}
.fs-promo__testo{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--s1)}
.fs-promo .fs-occhiello{color:inherit;opacity:.8}
.fs-promo--chiaro .fs-occhiello{color:var(--blu-600);opacity:1}
.fs-promo__titolo{font-family:var(--font-display);font-size:var(--t-xl);font-weight:700;line-height:1.15}
.fs-promo__sotto{font-size:var(--t-sm);opacity:.9;max-width:44ch}
.fs-promo__azione{margin-top:var(--s2);font-weight:700;font-size:var(--t-sm)}

/* --- strisce larghe --- */
.fs-strisce{display:grid;gap:var(--s4)}
@media(min-width:800px){.fs-strisce{grid-template-columns:1fr 1fr}}
.fs-promo--larga{min-height:220px}

/* --- categorie --- */
.fs-categorie{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr))
}
.fs-categorie a{
  display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);
  border:1px solid var(--bordo);border-radius:var(--r-lg);height:100%;background:#fff;
  color:var(--testo);text-decoration:none!important;
  transition:border-color var(--transizione),box-shadow var(--transizione)
}
.fs-categorie a:hover{border-color:var(--blu-500);box-shadow:var(--ombra-2)}
.fs-categorie__foto{
  aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--grigio-100);
  display:flex;align-items:center;justify-content:center
}
.fs-categorie__foto img{width:100%;height:100%;object-fit:contain;padding:var(--s2)}
.fs-categorie__nome{font-weight:600;font-size:var(--t-sm);line-height:1.3}
.fs-categorie__conta{font-size:var(--t-xs);color:var(--testo-tenue);margin-top:auto}

/* --- marche --- */
.fs-marche{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.fs-marche a{
  display:inline-flex;align-items:baseline;gap:var(--s2);
  padding:var(--s2) var(--s4);border:1px solid var(--bordo);border-radius:var(--r-full);
  background:#fff;font-size:var(--t-sm);font-weight:600;color:var(--testo);text-decoration:none!important
}
.fs-marche a:hover{border-color:var(--blu-500);color:var(--blu-700)}
.fs-marche em{font-style:normal;font-size:var(--t-xs);color:var(--testo-tenue)}

/* --- vantaggi --- */
.fs-vantaggi{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))
}
.fs-vantaggi li{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s4);
  border:1px solid var(--bordo);border-radius:var(--r-lg);font-weight:600;font-size:var(--t-sm)
}
.fs-vantaggi svg{width:24px;height:24px;flex:none;color:var(--blu-600)}

.fs-editoriale{max-width:75ch}
.fs-editoriale h2{font-size:var(--t-xl)}