/* /servizi/ · filtro «Mostrami i servizi», gruppi con schede, porte del negozio */

/* filtro (compare solo con JS: senza, si vedono tutte le voci) */
.pg-servizi .sv-filtro{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-12px 0 clamp(36px,4vw,56px)}
.pg-servizi .sv-filtro[hidden]{display:none}
.pg-servizi .sv-filtro-t{font:500 13px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ferro);margin-right:6px}
.pg-servizi .sv-f{min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--grafite);background:transparent;font:700 16px/1 var(--f-txt);cursor:pointer;transition:background-color .2s,color .2s}
.pg-servizi .sv-f:hover{background:var(--bianco)}
.pg-servizi .sv-f[aria-pressed="true"]{background:var(--grafite);color:#fff}

/* gruppi */
.pg-servizi .sv-gruppi{display:grid;gap:clamp(40px,5vw,64px)}
.pg-servizi .sv-gr{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(20px,3vw,48px);padding-top:clamp(24px,3vw,36px);border-top:1px solid #D9D6CF}
.pg-servizi .sv-gr[hidden]{display:none}
.pg-servizi .sv-gr-n{display:block;font:500 13px/1 var(--f-mono);letter-spacing:.08em;color:var(--rosso);margin-bottom:12px}
.pg-servizi .sv-gr-t{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.02em;line-height:1.08}
.pg-servizi .sv-gr-s{margin-top:10px;color:var(--ferro);font-size:17px;max-width:24em}
.pg-servizi .sv-voci{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-content:start}
.pg-servizi .sv-voce[hidden]{display:none}
.pg-servizi .sv-voce a{display:flex;flex-direction:column;gap:10px;height:100%;padding:clamp(20px,2vw,28px);background:var(--bianco);border-radius:var(--r);text-decoration:none;box-shadow:0 0 0 1px var(--linea) inset;transition:box-shadow .2s,transform .2s}
.pg-servizi .sv-voce a:hover{box-shadow:0 0 0 2px var(--rosso) inset;transform:translateY(-2px)}
.pg-servizi .sv-t{font-size:clamp(21px,1.6vw,24px);letter-spacing:-.02em}
.pg-servizi .sv-d{color:var(--ferro);font-size:16px;line-height:1.5}
.pg-servizi .sv-punti{display:grid;gap:6px;margin-top:4px;padding-top:12px;border-top:1px solid var(--linea)}
.pg-servizi .sv-punti li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.4}
.pg-servizi .sv-punti .spunta{width:16px;height:16px;flex:none;margin-top:2px;color:var(--rosso)}
.pg-servizi .sv-link{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--rosso-scuro)}
.pg-servizi .sv-link .fr{width:20px;height:12px;transition:transform .25s}
.pg-servizi a:hover .sv-link .fr{transform:translateX(5px)}
@media (max-width:1180px){.pg-servizi .sv-gr{grid-template-columns:1fr}.pg-servizi .sv-gr-s{max-width:none}}
@media (max-width:900px){.pg-servizi .sv-voci{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pg-servizi .sv-voci{grid-template-columns:1fr}.pg-servizi .sv-filtro-t{flex-basis:100%}.pg-servizi .sv-f{flex:1 1 auto;padding:0 14px}}

/* porte del negozio: riparazioni e catalogo */
.pg-servizi .sv-porte{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.pg-servizi .sv-porta{display:flex;flex-direction:column;background:var(--bianco);border-radius:var(--r-foto);overflow:hidden;text-decoration:none;box-shadow:0 0 0 1px var(--linea) inset;transition:transform .25s,box-shadow .25s}
.pg-servizi .sv-porta:hover{transform:translateY(-3px);box-shadow:var(--ombra)}
.pg-servizi .sv-porta-img{aspect-ratio:16/9;overflow:hidden}
.pg-servizi .sv-porta-img .foto{height:100%}
.pg-servizi .sv-porta-img img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pg-servizi .sv-porta:hover .sv-porta-img img{transform:scale(1.04)}
.pg-servizi .sv-porta-testo{display:flex;flex-direction:column;gap:10px;flex:1;padding:clamp(22px,2.4vw,34px)}
.pg-servizi .sv-porta-et{font:500 13px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rosso)}
.pg-servizi .sv-porta h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em}
.pg-servizi .sv-porta p:not(.sv-porta-et){color:var(--ferro);max-width:34em}
@media (max-width:900px){.pg-servizi .sv-porte{grid-template-columns:1fr}}

/* tre modi */
.pg-servizi .sv-remota{margin-top:22px;color:var(--ferro)}
.pg-servizi .sv-remota a{color:var(--rosso-scuro);font-weight:700}
.pg-servizi #come .numeri{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.pg-servizi .sv-porta,.pg-servizi .sv-voce a,.pg-servizi .sv-porta-img img{transition:none}}

/* 22/10/2026 listino per categoria (dal catalogo): riquadri in colonne, che si dispongono da soli; una colonna sul telefono */
.sv-listino{columns:3 300px;column-gap:clamp(14px,1.6vw,22px)}
.sv-lst{break-inside:avoid;display:flex;flex-direction:column;gap:8px;margin:0 0 clamp(14px,1.6vw,22px);background:var(--bianco);border-radius:var(--r);padding:clamp(20px,2.2vw,28px);box-shadow:0 0 0 1px var(--linea) inset;scroll-margin-top:90px}
.sv-lst h3{font-family:var(--f-tit);font-size:24px;line-height:1.15;margin:0}
.sv-lst-da{margin:0;font:500 12px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--rosso-scuro)}
.sv-lst-da b{font:800 22px/1 var(--f-tit);letter-spacing:-.01em;text-transform:none;color:var(--grafite)}
.sv-lst-p{margin:0;color:var(--ferro);font-size:16px;line-height:1.5}
.sv-lst ul{list-style:none;margin:4px 0 0;padding:0;display:grid}
.sv-lst li{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--linea)}
.sv-lst li span{font-weight:700;min-width:0}
.sv-lst li b{font:800 19px/1.1 var(--f-tit);white-space:nowrap}
.sv-lst li small{grid-column:1/-1;color:var(--ferro);font-size:14px}
.sv-lst-n{margin:0;font-size:15px;color:var(--ferro)}
.sv-lst a.sv-link{margin-top:6px;text-decoration:none}
.sv-lst a.sv-link:hover .fr{transform:translateX(5px)}