/* SMA Bundle — Vetrina di linea
   Tipografia e colori presi dal Kit Elementor del sito (#561):
   titoli Montserrat 600 · testo Manrope 400 · primario #1B1B1B · testo #7A7A7A
   Tutto è dentro .sma-vet: nessuna regola può toccare il resto del tema. */

.sma-vet{
	--vet-bianco:#fff;
	--vet-fondo:#F7F7F7;
	--vet-bordo:#E3E3E3;
	--vet-inch:#1B1B1B;
	--vet-accent:#3C3C3C;
	--vet-muted:#6B6B6B;
	background:var(--vet-bianco);
	color:var(--vet-inch);
	font:400 16px/1.7 Manrope,-apple-system,system-ui,sans-serif;
}
.sma-vet *{box-sizing:border-box}
.sma-vet img{max-width:100%;display:block;height:auto}
.sma-vet h1,.sma-vet h2,.sma-vet h3,.sma-vet h4{
	font-family:Montserrat,-apple-system,system-ui,sans-serif;font-weight:600;
	letter-spacing:-.01em;line-height:1.2;margin:0;color:var(--vet-inch);
}
.sma-vet p{margin:0}
.sma-vet__wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sma-vet__occhiello{font:500 11px/1 Manrope;letter-spacing:.2em;text-transform:uppercase;
	color:var(--vet-muted);margin:0 0 14px}
.sma-vet__sec{padding:88px 0}

/* barra promo */
.sma-vet__topbar{background:var(--vet-inch);color:#fff;text-align:center;padding:12px 16px;
	font-size:13px;letter-spacing:.06em}
.sma-vet__topbar b{font-weight:600}

/* hero */
.sma-vet__hero{position:relative;min-height:54vh;display:flex;align-items:center;
	background:#2A211B center/cover no-repeat}
.sma-vet__hero::after{content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(20,15,12,.42) 0%,rgba(20,15,12,.62) 55%,rgba(20,15,12,.72) 100%)}
/* width:100%: senza, il wrap è un figlio flex e si restringe al contenuto,
   disallineando il testo dell'hero rispetto a tutte le altre sezioni. */
.sma-vet__hero .sma-vet__wrap{position:relative;z-index:2;width:100%;
	padding:56px 24px;color:#fff}
.sma-vet__hero .sma-vet__occhiello{color:rgba(255,255,255,.75)}
/* Il colore va forzato: il Kit Elementor del tema colora tutti gli h1-h4 con
   il proprio primario (#1B1B1B) e la sua regola arriva dopo la nostra. Sul
   fondo scuro dell'hero il titolo risultava nero e illeggibile. */
.sma-vet .sma-vet__hero h1{
	font-size:clamp(28px,3.6vw,46px);line-height:1.25;max-width:34ch;
	color:#fff !important;text-transform:uppercase;letter-spacing:.01em;
	text-shadow:0 1px 24px rgba(0,0,0,.35);
}
.sma-vet .sma-vet__hero p{max-width:70ch;margin:18px 0 0;color:#F0F0F0 !important;font-size:18px}
.sma-vet .sma-vet__hero .sma-vet__occhiello{color:rgba(255,255,255,.8) !important}
.sma-vet__sconto{display:inline-block;margin-bottom:22px;background:#fff;color:var(--vet-inch);
	font:600 12px/1 Montserrat;letter-spacing:.16em;text-transform:uppercase;padding:11px 18px}

/* introduzione */
.sma-vet__lead{font-size:18px;color:var(--vet-muted);max-width:66ch}
.sma-vet__intro h2{font-size:clamp(24px,2.8vw,34px);max-width:26ch;margin-bottom:22px;line-height:1.25}
/* Due colonne: il paragrafo introduttivo a sinistra, le ragioni d'acquisto in un
   riquadro a fianco. Prima erano tutte incolonnate a sinistra e la sezione, che
   è la prima dopo l'hero, risultava vuota sulla metà destra. */
.sma-vet__intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.sma-vet__intro-img{margin:64px 0 0}
/* Proporzioni native, nessun ritaglio: la foto è 16:9 e va mostrata così. */
.sma-vet__intro-img img{width:100%;height:auto}
.sma-vet__check-box{background:var(--vet-fondo);border:1px solid var(--vet-bordo);padding:34px 32px}
.sma-vet__check-t{margin:0;font-weight:600;font-family:Montserrat,sans-serif;font-size:16px;
	line-height:1.4}
.sma-vet__check{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:15px}
.sma-vet__check li{padding-left:32px;position:relative;font-size:15px;line-height:1.5}
.sma-vet__check li::before{content:"";position:absolute;left:0;top:8px;width:15px;height:8px;
	border-left:1.5px solid var(--vet-inch);border-bottom:1.5px solid var(--vet-inch);
	transform:rotate(-45deg)}

/* guida alla scelta */
.sma-vet__guida{background:var(--vet-fondo)}
.sma-vet__fam{padding:0 0 64px;scroll-margin-top:110px}
.sma-vet__fam-head{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;
	margin-bottom:38px}
.sma-vet__fam--alt .sma-vet__fam-head{direction:rtl}
.sma-vet__fam--alt .sma-vet__fam-txt{direction:ltr}
/* Famiglie senza foto pertinente nel set: il testo occupa tutta la riga,
   invece di lasciare una colonna vuota. */
.sma-vet__fam--noimg .sma-vet__fam-head{grid-template-columns:1fr;max-width:78ch}
.sma-vet__fam h3{font-size:clamp(22px,2.5vw,30px);margin-bottom:14px}
.sma-vet__quando{color:var(--vet-muted)}
/* Nessun ritaglio: le foto di sezione hanno proporzioni diverse (quadrate e 16:9)
   e vanno mostrate intere. */
.sma-vet__fam-img img{width:100%;height:auto}

/* schede prodotto */
.sma-vet__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:26px}
.sma-vet__card{background:#fff;border:1px solid var(--vet-bordo);display:flex;flex-direction:column}
.sma-vet__ph{display:block;background:#fff}
.sma-vet__ph img{aspect-ratio:1;object-fit:contain;padding:14px;width:100%}
.sma-vet__body{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.sma-vet__card h4{font-size:16px;line-height:1.3;letter-spacing:0}
.sma-vet__card h4 a{color:inherit;text-decoration:none}
.sma-vet__card h4 a:hover{text-decoration:underline}
/* Riga corta, interlinea stretta: in una colonna da ~35 caratteri l'1,7 dei
   paragrafi larghi fa galleggiare le righe e allunga la scheda. */
.sma-vet__nota{font-size:14px;line-height:1.5;color:var(--vet-muted);flex:1}
.sma-vet__prezzi{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.sma-vet__prezzi del{text-decoration:line-through;color:var(--vet-muted);font-size:14px}
.sma-vet__prezzi ins{text-decoration:none;font-size:20px;font-weight:600;
	font-family:Montserrat,sans-serif}
.sma-vet__prezzi .amount{font-size:inherit}
.sma-vet__tag{background:var(--vet-inch);color:#fff;font-size:10px;letter-spacing:.1em;
	padding:3px 7px;font-weight:500}
.sma-vet__fmt{width:100%;min-height:46px;padding:12px 10px;border:1px solid var(--vet-bordo);
	background:#fff;font:400 14px Manrope;color:var(--vet-inch)}

/* pulsanti: specificità alta perché il tema colora i button al passaggio */
.sma-vet .sma-vet__btn,
.sma-vet .sma-vet__btn:hover,
.sma-vet .sma-vet__btn:focus{
	border:0;background:var(--vet-inch);color:#fff;padding:15px 13px;min-height:46px;
	font:600 12px/1 Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;
	cursor:pointer;transition:background .2s;display:block;width:100%;text-align:center;
	text-decoration:none;border-radius:0;
}
.sma-vet .sma-vet__btn:hover{background:var(--vet-accent)}
.sma-vet .sma-vet__btn.loading{opacity:.65;pointer-events:none}
.sma-vet .sma-vet__btn.added::after{content:" ✓"}
.sma-vet__card .added_to_cart{display:none}

/* rituale in passi */
.sma-vet__rituale{background:var(--vet-fondo);border-top:1px solid var(--vet-bordo)}
/* Quattro colonne fisse da desktop: i passi sono una sequenza e vanno letti
   in fila, non a capo. Sotto i 1000px si impilano. */
.sma-vet__steps{list-style:none;padding:0;margin:44px 0 0;display:grid;
	grid-template-columns:repeat(4,1fr);gap:34px}
.sma-vet__steps li{display:block}
.sma-vet__step-top{display:flex;align-items:center;gap:14px;margin-bottom:18px;
	padding-bottom:18px;border-bottom:1px solid var(--vet-bordo)}
.sma-vet__steps .n{font-family:Montserrat,sans-serif;font-weight:600;font-size:15px;
	color:var(--vet-muted);line-height:1;letter-spacing:.06em}
.sma-vet__steps h4{font-size:17px;margin-bottom:7px}
.sma-vet__steps p{font-size:15px;line-height:1.5;color:var(--vet-muted)}

/* blocco promozione */
.sma-vet__promo{background:var(--vet-inch);color:#fff;text-align:center}
/* Anche qui il Kit Elementor imporrebbe il suo primario scuro: su fondo nero
   il titolo risultava invisibile. */
.sma-vet .sma-vet__promo h2{font-size:clamp(25px,3.2vw,38px);max-width:22ch;
	margin:0 auto 20px;color:#fff !important}
.sma-vet .sma-vet__promo .sma-vet__occhiello{color:rgba(255,255,255,.7) !important}
.sma-vet__promo p{color:#C9C9C9;max-width:64ch;margin:0 auto}
.sma-vet .sma-vet__promo .sma-vet__btn{background:#fff;color:var(--vet-inch);
	margin:34px auto 0;padding:17px 40px;width:auto;display:inline-block}
.sma-vet .sma-vet__promo .sma-vet__btn:hover{background:#E3E3E3}

/* perché fidarsi */
.sma-vet__fiducia{padding-bottom:56px}
.sma-vet__faq{padding-top:56px}
.sma-vet__fiducia ul{list-style:none;padding:0;margin:36px 0 0;display:grid;
	grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:26px}
.sma-vet__fiducia li{border-top:1px solid var(--vet-bordo);padding-top:17px;font-size:15px;line-height:1.5;
	color:var(--vet-muted);display:flex;align-items:flex-start;gap:12px}
.sma-vet__fiducia li span{flex:1}

/* domande frequenti */
.sma-vet__faq details{border-bottom:1px solid var(--vet-bordo);padding:20px 0}
.sma-vet__faq summary{cursor:pointer;font-family:Montserrat,sans-serif;font-weight:600;
	font-size:17px;list-style:none}
.sma-vet__faq summary::-webkit-details-marker{display:none}
.sma-vet__faq summary::after{content:"+";float:right;color:var(--vet-muted);font-size:22px;
	line-height:1;font-weight:400}
.sma-vet__faq details[open] summary::after{content:"–"}
.sma-vet__faq details p{color:var(--vet-muted);margin-top:14px;max-width:74ch}

@media(max-width:860px){
	.sma-vet__intro-grid{grid-template-columns:1fr;gap:34px}
	.sma-vet__check-box{padding:28px 24px}
	.sma-vet__fam-head{grid-template-columns:1fr;gap:22px}
	.sma-vet__fam--alt .sma-vet__fam-head{direction:ltr}
	.sma-vet__sec{padding:60px 0}
	.sma-vet__hero{min-height:46vh}
}

/* ------------------------------------------------------------------ icone */
/* Pittogrammi lineari: ereditano il colore del testo, quindi funzionano
   sia sul chiaro sia sul fondo scuro senza varianti. */
.sma-vet__ico{width:26px;height:26px;flex:0 0 26px;color:var(--vet-inch);opacity:.85}
.sma-vet__fiducia .sma-vet__ico{width:24px;height:24px;flex:0 0 24px;margin-top:1px}
.sma-vet__steps .sma-vet__ico{width:52px;height:52px;flex:0 0 52px;stroke-width:1;opacity:.9}

@media(max-width:1000px){
	.sma-vet__steps{grid-template-columns:repeat(2,1fr);gap:30px}
}
@media(max-width:600px){
	.sma-vet__steps{grid-template-columns:1fr}
}