/* =========================================================================
   Savorita Produttori (landing /per-produttori-italiani/)
   Specifica: docs/producers-widget.md · Mockup: mockups/producers-landing/

   Regole di scrittura (le stesse degli altri widget):
   - ogni selettore parte da .sv-pro.sv-pro (anche il pannello, che va in
     fondo al body, porta la radice addosso)
   - responsive a contenitore: ogni sezione è un contenitore "svpr" (la
     radice no: terrebbe dentro di sé gli elementi fissi del fit check).
     Sotto 1000 telefono grande, da 700 misure più ampie, da 1000 computer
   - niente !important su display; chiuso vuol dire spento
   - i bottoni-link si vestono da data-svpr-btn, mai dalla classe del link
   ========================================================================= */

.sv-pro.sv-pro{
  --svpr-green:#087F23; --svpr-green-d:#054a15; --svpr-green-t:#066a1c; --svpr-green-l:#61C685; --svpr-green-s:#e6f4e9;
  --svpr-gold:#D39D00; --svpr-yellow:#FFCC37;
  --svpr-ink:#293241; --svpr-muted:#5d6675; --svpr-faint:#8d95a2; --svpr-line:#dde2e6; --svpr-soft:#F7F6FE;
  --svpr-dark:linear-gradient(160deg,#1e2a33 0%,#123d26 55%,#0a6a20 100%);
  --svpr-font:Nunito, "Nunito Sans", system-ui, sans-serif;
  --svpr-pen:"Gloria Hallelujah", "Comic Sans MS", cursive;
  --svpr-out:cubic-bezier(.2,.8,.2,1);
  --svpr-r:26px; --svpr-pad:clamp(16px,4vw,48px);
  font-family:var(--svpr-font); font-weight:600; font-size:16px;
  line-height:1.4; /* il kit dà al body un'interlinea fissa (30px) che i testi piccoli erediterebbero */
  color:var(--svpr-ink); text-align:left; -webkit-font-smoothing:antialiased;
}
.sv-pro.sv-pro *,
.sv-pro.sv-pro *::before,
.sv-pro.sv-pro *::after{ box-sizing:border-box; }
.sv-pro.sv-pro :is(h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote){
  margin:0; padding:0; font-family:inherit; text-transform:none; letter-spacing:inherit; color:inherit;
}
.sv-pro.sv-pro :is(h1,h2,h3,h4){ font-weight:900; line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
.sv-pro.sv-pro :is(ul,ol){ list-style:none; }
.sv-pro.sv-pro img{ display:block; max-width:100%; height:auto; }
.sv-pro.sv-pro b,.sv-pro.sv-pro strong{ font-weight:800; }
.sv-pro.sv-pro a{ color:inherit; text-decoration:none; }
/* "html" in testa: un gradino sopra il kit di Elementor (bottoni verdi in hover), sotto le nostre classi */
html .sv-pro.sv-pro button{
  font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; box-shadow:none;
  text-transform:none; letter-spacing:inherit; line-height:inherit; min-height:0; white-space:normal; word-spacing:normal;
  text-align:inherit; -webkit-tap-highlight-color:transparent;
}
.sv-pro.sv-pro :focus-visible{ outline:3px solid var(--svpr-yellow); outline-offset:3px; border-radius:6px; }
.sv-pro.sv-pro .svpr-empty{ display:grid; place-items:center; min-height:120px; width:100%; height:100%; border:2px dashed var(--svpr-gold); border-radius:14px; background:#FFF9E8; color:#6b5100; font-size:13px; font-weight:800; padding:10px; text-align:center; }

/* ---------- pezzi comuni ---------- */
.sv-pro.sv-pro-wrap{ width:100%; }
.sv-pro.sv-pro .svpr-sec{ position:relative; padding-block:clamp(64px,8vw,112px); background:#fff; scroll-margin-top:var(--sv-bar-h,76px); }
.sv-pro.sv-pro .svpr-sec:not(.svpr-fit){ container-type:inline-size; container-name:svpr; }
.sv-pro.sv-pro .svpr-sec.is-soft{ background:var(--svpr-soft); }
.sv-pro.sv-pro .svpr-wrap{ width:100%; max-width:1200px; margin:0 auto; padding-inline:var(--svpr-pad); }
.sv-pro.sv-pro .svpr-h2{ font-size:clamp(32px,4.2vw,56px); letter-spacing:-.035em; line-height:1.02; }
.sv-pro.sv-pro .svpr-narrow{ max-width:20ch; }
.sv-pro.sv-pro .svpr-lede{ font-size:clamp(17px,1.4vw,19px); color:var(--svpr-muted); line-height:1.55; max-width:62ch; }
.sv-pro.sv-pro .svpr-lede + .svpr-lede{ margin-top:12px; }
.sv-pro.sv-pro .svpr-br{ color:var(--svpr-green); font-weight:900; letter-spacing:-.03em; }
.sv-pro.sv-pro .svpr-hl{ font-weight:900; }
.sv-pro.sv-pro :is(.svpr-h1,.svpr-h2,.svpr-tag p) .svpr-hl{ color:var(--svpr-green); }
.sv-pro.sv-pro .is-dark{ color:#fff; }
.sv-pro.sv-pro .is-dark .svpr-br{ color:var(--svpr-green-l); }
.sv-pro.sv-pro .is-dark .svpr-hl{ color:var(--svpr-yellow); }
.sv-pro.sv-pro .svpr-tag .svpr-hl{ color:var(--svpr-green-l); }
.sv-pro.sv-pro .svpr-mark img{ width:40px; height:40px; object-fit:contain; }

/* bottoni come nella Journey: verde pieno, angoli da 16, freccia; sul verde, giallo */
.sv-pro.sv-pro [data-svpr-btn]{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 26px;
  border-radius:16px; border:0; background:var(--svpr-green); color:#fff; font-family:var(--svpr-font); font-weight:900; font-size:17px;
  line-height:1.15; word-spacing:normal; text-decoration:none; text-align:left; cursor:pointer;
  box-shadow:0 18px 36px -18px rgba(8,127,35,.85); transition:transform .2s, background-color .2s;
}
.sv-pro.sv-pro [data-svpr-btn] svg{ width:17px; height:17px; flex:none; transition:transform .2s; }
.sv-pro.sv-pro [data-svpr-btn]:hover{ background:var(--svpr-green-d); color:#fff; transform:translateY(-2px); }
.sv-pro.sv-pro [data-svpr-btn]:hover svg{ transform:translateX(3px); }
.sv-pro.sv-pro [data-svpr-btn="y"]{ background:var(--svpr-yellow); color:var(--svpr-ink); border-radius:999px; box-shadow:0 14px 30px -16px rgba(0,0,0,.6); }
.sv-pro.sv-pro [data-svpr-btn="y"]:hover{ background:#ffd75e; color:var(--svpr-ink); }
.sv-pro.sv-pro [data-svpr-btn="line"]{ background:#fff; color:var(--svpr-green); box-shadow:inset 0 0 0 2px var(--svpr-green); min-height:44px; font-size:15px; border-radius:14px; padding:0 18px; }
.sv-pro.sv-pro [data-svpr-btn="line"]:hover{ background:var(--svpr-green-s); color:var(--svpr-green); }
.sv-pro.sv-pro .svpr-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:4px; }
.sv-pro.sv-pro .svpr-free{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:800; color:var(--svpr-green-t); }
.sv-pro.sv-pro .svpr-free::before{ content:"✓"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--svpr-green-s); font-size:12px; }
.sv-pro.sv-pro .is-dark .svpr-free{ color:#fff; }
.sv-pro.sv-pro .is-dark .svpr-free::before{ background:rgba(255,255,255,.16); }

/* pastiglia con il pallino che respira (come nel fit check) */
.sv-pro.sv-pro .svpr-pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; background:var(--svpr-green-s); color:var(--svpr-green-t); font-size:13px; font-weight:800; white-space:nowrap; }
.sv-pro.sv-pro .svpr-pill i{ width:7px; height:7px; border-radius:50%; background:var(--svpr-green); animation:svpr-blink 2.2s ease-in-out infinite; }
.sv-pro.sv-pro .is-dark .svpr-pill{ background:rgba(255,255,255,.14); color:#fff; }
.sv-pro.sv-pro .is-dark .svpr-pill i{ background:var(--svpr-green-l); }
@keyframes svpr-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* comparsa allo scorrimento: la pagina ferma resta completa, si nasconde solo
   quello che all'avvio è sotto lo schermo (is-pre lo mette producers.js) */
.sv-pro.sv-pro .svpr-rv{ transition:opacity .7s var(--svpr-out), transform .7s var(--svpr-out); }
.sv-pro.sv-pro .svpr-rv.is-pre{ opacity:0; transform:translateY(18px); }

/* =========================== 1 · apertura =========================== */
.sv-pro.sv-pro .svpr-hero{
  padding-top:clamp(20px,4vw,56px); padding-bottom:clamp(36px,5vw,64px); overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%,#eef6f0 0%,rgba(238,246,240,0) 55%),linear-gradient(180deg,#fff 0%,var(--svpr-soft) 100%);
}
.sv-pro.sv-pro .svpr-hero-g{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:center; }
.sv-pro.sv-pro .svpr-hero-t{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; min-width:0; }
.sv-pro.sv-pro .svpr-h1{ font-size:clamp(38px,4.9vw,66px); letter-spacing:-.04em; line-height:.98; }
.sv-pro.sv-pro .svpr-hero-sub{ font-size:clamp(17px,1.5vw,20px); line-height:1.5; color:var(--svpr-muted); max-width:52ch; font-weight:700; }
.sv-pro.sv-pro .svpr-hero-v{ position:relative; min-width:0; }
.sv-pro.sv-pro .svpr-hero-ph{ position:relative; border-radius:var(--svpr-r); overflow:hidden; aspect-ratio:4/4.2; background:#e8ebe9; }
.sv-pro.sv-pro .svpr-hero-ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.sv-pro.sv-pro .svpr-hero-ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,26,36,.55) 0%,rgba(20,26,36,0) 45%); pointer-events:none; }
.sv-pro.sv-pro .svpr-seal{ position:absolute; z-index:2; top:12px; left:12px; width:clamp(104px,10vw,138px); aspect-ratio:1; border-radius:50%; background:#fff; display:grid; place-items:center; padding:10px; box-shadow:0 20px 40px -22px rgba(41,50,65,.6); transform:rotate(-6deg); overflow:hidden; }
.sv-pro.sv-pro .svpr-seal img{ width:100%; height:auto; }
.sv-pro.sv-pro .svpr-dream{ position:absolute; z-index:2; left:14px; right:14px; bottom:14px; min-height:78px; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3); box-shadow:0 18px 40px -24px rgba(0,0,0,.6); }
.sv-pro.sv-pro .svpr-dream::before{ content:""; flex:none; width:4px; align-self:stretch; border-radius:4px; background:var(--svpr-green-l); }
.sv-pro.sv-pro .svpr-dream p{ font-size:clamp(16px,1.5vw,20px); line-height:1.3; color:var(--svpr-muted); font-weight:700; transition:opacity .26s, transform .26s; }
.sv-pro.sv-pro .svpr-dream p b{ color:var(--svpr-green-t); font-weight:900; }
.sv-pro.sv-pro .svpr-dream p.is-out{ opacity:0; transform:translateY(-6px); }
.sv-pro.sv-pro .svpr-dream.is-empty{ display:none; }
/* nastro dei negozi */
.sv-pro.sv-pro .svpr-mq{ margin-top:clamp(28px,4vw,48px); display:flex; flex-direction:column; gap:8px; }
.sv-pro.sv-pro .svpr-mq-l{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--svpr-faint); }
.sv-pro.sv-pro .svpr-mq-v{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.sv-pro.sv-pro .svpr-mq-row{ display:flex; gap:8px; width:max-content; padding:4px 0; }
.sv-pro.sv-pro .svpr-mq-row.is-loop{ animation:svpr-slide 27s linear infinite; }
.sv-pro.sv-pro .svpr-mq-row.r2.is-loop{ animation-duration:34s; animation-direction:reverse; }
.sv-pro.sv-pro .svpr-mq-row.r3.is-loop{ animation-duration:30s; }
@keyframes svpr-slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.sv-pro.sv-pro .svpr-mq-row li{ display:flex; align-items:center; gap:8px; flex:none; white-space:nowrap; border:1px solid var(--svpr-line); border-radius:999px; background:#fff; padding:7px 14px 7px 9px; box-shadow:0 10px 26px -16px rgba(41,50,65,.3); font-size:13px; }
.sv-pro.sv-pro .svpr-mq-row li b{ font-weight:800; }
.sv-pro.sv-pro .svpr-mq-row li span{ color:var(--svpr-faint); }
.sv-pro.sv-pro .svpr-mq-row li i{ font-style:normal; font-size:15px; line-height:1; }

/* =========================== 2 · frase =========================== */
.sv-pro.sv-pro .svpr-tag{ background:var(--svpr-dark); padding-block:clamp(56px,7vw,96px); text-align:center; }
.sv-pro.sv-pro .svpr-tag p{ font-size:clamp(28px,4vw,52px); font-weight:900; letter-spacing:-.035em; line-height:1.08; max-width:22ch; margin-inline:auto; text-wrap:balance; color:#fff; }

/* =========================== 3 · perché =========================== */
.sv-pro.sv-pro .svpr-why-g{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,64px); }
.sv-pro.sv-pro .svpr-why-t{ display:flex; flex-direction:column; gap:18px; }
.sv-pro.sv-pro .svpr-why-k{ font-size:clamp(19px,1.6vw,22px); font-weight:900; letter-spacing:-.01em; margin-bottom:16px; }
.sv-pro.sv-pro .svpr-chain{ display:flex; flex-direction:column; gap:14px; position:relative; counter-reset:svpr-c; }
.sv-pro.sv-pro .svpr-chain::before{ content:""; position:absolute; left:31px; top:30px; bottom:30px; border-left:2px dashed #c4ccd2; }
.sv-pro.sv-pro .svpr-chain li{ position:relative; display:flex; gap:18px; align-items:flex-start; background:#fff; border:2px solid var(--svpr-line); border-radius:var(--svpr-r); padding:20px 22px 20px 16px; counter-increment:svpr-c; }
.sv-pro.sv-pro .svpr-chain li::before{ content:counter(svpr-c); flex:none; position:relative; z-index:1; width:32px; height:32px; border-radius:50%; background:var(--svpr-green); color:#fff; display:grid; place-items:center; font-weight:900; font-size:15px; box-shadow:0 0 0 6px #fff; }
.sv-pro.sv-pro .svpr-chain h3{ font-size:clamp(18px,1.6vw,22px); line-height:1.25; letter-spacing:-.015em; padding-top:3px; }
.sv-pro.sv-pro .svpr-chain .svpr-hl{ color:var(--svpr-green); }
.sv-pro.sv-pro .svpr-callout{ margin-top:clamp(28px,4vw,48px); display:flex; gap:18px; align-items:flex-start; padding:clamp(22px,3vw,32px); border-radius:var(--svpr-r); background:#fff; border:2px solid var(--svpr-line); }
.sv-pro.sv-pro .svpr-callout svg{ flex:none; width:40px; height:40px; color:var(--svpr-gold); }
.sv-pro.sv-pro .svpr-callout p{ font-size:clamp(17px,1.5vw,20px); line-height:1.5; font-weight:700; }

/* =========================== 4 · aneddoto =========================== */
.sv-pro.sv-pro .svpr-tale-g{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.sv-pro.sv-pro .svpr-tale-who{ font-family:var(--svpr-pen); font-weight:400; font-size:clamp(19px,1.8vw,24px); color:var(--svpr-muted); line-height:1.4; }
.sv-pro.sv-pro .svpr-tale-who .svpr-hl{ font-weight:400; color:var(--svpr-ink); }
.sv-pro.sv-pro .svpr-tale-q{ margin-top:14px; }
.sv-pro.sv-pro .svpr-tale-q p{ font-size:clamp(26px,3.2vw,42px); font-weight:800; letter-spacing:-.025em; line-height:1.16; }
.sv-pro.sv-pro .svpr-tale-q .svpr-hl{ font-weight:900; background:linear-gradient(180deg,transparent 62%,rgba(255,204,55,.55) 62%); padding-inline:2px; }
.sv-pro.sv-pro .svpr-tale-c{ position:relative; border-radius:var(--svpr-r); background:var(--svpr-dark); padding:clamp(26px,3.5vw,44px); display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.sv-pro.sv-pro .svpr-tale-c .svpr-mark{ display:grid; place-items:center; width:64px; height:64px; background:#fff; border-radius:18px; padding:6px; }
.sv-pro.sv-pro .svpr-tale-c .svpr-mark img{ width:100%; height:100%; }
.sv-pro.sv-pro .svpr-t1{ font-size:clamp(17px,1.4vw,19px); color:rgba(255,255,255,.8); }
.sv-pro.sv-pro .svpr-t2{ font-size:clamp(24px,2.6vw,34px); font-weight:800; line-height:1.15; letter-spacing:-.02em; }

/* =========================== 5 · aree =========================== */
.sv-pro.sv-pro .svpr-do-h{ display:flex; flex-direction:column; gap:18px; max-width:820px; }
.sv-pro.sv-pro .svpr-do-n{ display:inline-flex; align-items:center; gap:10px; margin-top:6px; font-weight:900; font-size:15px; }
.sv-pro.sv-pro .svpr-do-n::before{ content:"↓"; display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:var(--svpr-yellow); font-size:15px; }
.sv-pro.sv-pro .svpr-area-list{ margin-top:clamp(28px,4vw,44px); display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.sv-pro.sv-pro .svpr-area{ display:flex; flex-direction:column; background:#fff; border:2px solid var(--svpr-line); border-radius:var(--svpr-r); overflow:hidden; transition:transform .3s, box-shadow .3s, opacity .7s var(--svpr-out); }
.sv-pro.sv-pro .svpr-area:hover{ transform:translateY(-3px); box-shadow:0 30px 50px -36px rgba(41,50,65,.55); }
.sv-pro.sv-pro .svpr-area-ph{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--svpr-soft); }
.sv-pro.sv-pro .svpr-area-ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--svpr-out); }
.sv-pro.sv-pro .svpr-area:hover .svpr-area-ph img{ transform:scale(1.04); }
.sv-pro.sv-pro .svpr-area-ph::before{ content:attr(data-n); position:absolute; z-index:1; left:16px; top:16px; width:44px; height:44px; border-radius:14px; background:#fff; color:var(--svpr-green); display:grid; place-items:center; font-weight:900; font-size:20px; box-shadow:0 10px 24px -14px rgba(0,0,0,.6); }
.sv-pro.sv-pro .svpr-area-b{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:clamp(20px,2.4vw,28px); flex:1; }
.sv-pro.sv-pro .svpr-area h3{ font-size:clamp(20px,1.8vw,24px); line-height:1.2; }
.sv-pro.sv-pro .svpr-area-b p{ color:var(--svpr-muted); line-height:1.55; }
.sv-pro.sv-pro .svpr-area-b h4{ font-size:17px; line-height:1.3; letter-spacing:-.01em; padding-top:12px; border-top:1.5px dashed var(--svpr-line); align-self:stretch; }
.sv-pro.sv-pro .svpr-area-b [data-svpr-btn]{ margin-top:6px; }

/* =========================== 6 · fit check =========================== */
.sv-pro.sv-pro .svpr-fit{ padding-block:clamp(40px,6vw,80px); }

/* =========================== 7 · Andrea =========================== */
.sv-pro.sv-pro .svpr-fq{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(22px,3vw,40px); align-items:center; max-width:1040px; margin:0 auto; }
.sv-pro.sv-pro .svpr-fq blockquote{ position:relative; isolation:isolate; }
.sv-pro.sv-pro .svpr-fq blockquote p{ font-size:clamp(21px,2.3vw,30px); font-weight:700; line-height:1.35; letter-spacing:-.015em; }
.sv-pro.sv-pro .svpr-fq blockquote p + p{ margin-top:.7em; }
.sv-pro.sv-pro .svpr-fq blockquote::before{ content:"“"; position:absolute; left:-.08em; top:-.55em; font-size:clamp(70px,7vw,100px); line-height:1; color:var(--svpr-green-l); font-weight:900; opacity:.55; z-index:-1; }
.sv-pro.sv-pro .svpr-fq .svpr-hl{ color:var(--svpr-green); }
.sv-pro.sv-pro .svpr-fq figcaption{ display:flex; align-items:center; gap:14px; }
.sv-pro.sv-pro .svpr-face{ flex:none; width:72px; height:72px; border-radius:50%; overflow:hidden; border:3px solid #fff; box-shadow:0 12px 26px -16px rgba(41,50,65,.6); background:var(--svpr-line); }
.sv-pro.sv-pro .svpr-face img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.sv-pro.sv-pro .svpr-fq figcaption b{ display:block; font-size:19px; font-weight:900; }
.sv-pro.sv-pro .svpr-fq figcaption span span{ display:block; font-size:14.5px; color:var(--svpr-muted); }

/* =========================== 8 · chi si è affidato =========================== */
.sv-pro.sv-pro .svpr-logos{ margin-top:clamp(26px,3.5vw,40px); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.sv-pro.sv-pro .svpr-logos ul{ display:flex; align-items:center; gap:14px; width:max-content; padding:6px var(--svpr-pad); }
.sv-pro.sv-pro .svpr-logos ul.is-loop{ animation:svpr-slide 60s linear infinite; padding-inline:0; }
.sv-pro.sv-pro .svpr-logos:hover ul{ animation-play-state:paused; }
.sv-pro.sv-pro .svpr-logos li{ flex:none; width:150px; height:84px; border-radius:18px; background:#fff; border:2px solid var(--svpr-line); }
.sv-pro.sv-pro .svpr-logos li > *{ display:grid; place-items:center; width:100%; height:100%; padding:12px 16px; }
.sv-pro.sv-pro .svpr-logos li > img{ object-fit:contain; }
.sv-pro.sv-pro .svpr-logos img{ max-width:100%; max-height:56px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.75; transition:filter .3s, opacity .3s; }
.sv-pro.sv-pro .svpr-logos li:hover img{ filter:none; opacity:1; }
.sv-pro.sv-pro .svpr-reviews{ margin-top:clamp(26px,3.5vw,40px); display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.sv-pro.sv-pro .svpr-reviews > li{ display:flex; flex-direction:column; gap:18px; background:var(--svpr-soft); border-radius:var(--svpr-r); padding:clamp(22px,2.6vw,30px); }
.sv-pro.sv-pro .svpr-reviews blockquote{ flex:1; }
.sv-pro.sv-pro .svpr-reviews blockquote p{ font-size:17px; line-height:1.55; font-weight:700; }
.sv-pro.sv-pro .svpr-who{ display:flex; align-items:center; gap:14px; padding-top:16px; border-top:1.5px solid var(--svpr-line); }
.sv-pro.sv-pro .svpr-who-lg{ flex:none; width:86px; height:52px; border-radius:12px; background:#fff; display:grid; place-items:center; padding:6px; }
.sv-pro.sv-pro .svpr-who-lg img{ max-height:40px; width:auto; object-fit:contain; }
.sv-pro.sv-pro .svpr-who b{ display:block; font-size:17px; font-weight:900; }
.sv-pro.sv-pro .svpr-who span span{ display:block; font-size:14px; color:var(--svpr-muted); line-height:1.3; }

/* =========================== 9 · clienti =========================== */
.sv-pro.sv-pro .svpr-by-sub{ margin-top:14px; }
.sv-pro.sv-pro .svpr-buy{ margin-top:clamp(26px,3.5vw,40px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sv-pro.sv-pro .svpr-buy li{ position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/5; background:#d9ddd9; }
.sv-pro.sv-pro .svpr-buy img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--svpr-out); }
.sv-pro.sv-pro .svpr-buy li:hover img{ transform:scale(1.05); }
.sv-pro.sv-pro .svpr-buy li::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,26,36,.85) 0%,rgba(20,26,36,.15) 50%,rgba(20,26,36,0) 70%); pointer-events:none; }
.sv-pro.sv-pro .svpr-buy h3{ position:absolute; z-index:1; left:14px; right:14px; bottom:14px; color:#fff; font-size:clamp(16px,1.6vw,21px); line-height:1.15; }

/* =========================== 10 · entra =========================== */
.sv-pro.sv-pro .svpr-join{ position:relative; overflow:hidden; border-radius:var(--svpr-r); background:var(--svpr-dark); padding:clamp(28px,5vw,64px); display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.sv-pro.sv-pro .svpr-join::before{ content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(97,198,133,.35),rgba(97,198,133,0) 70%); pointer-events:none; }
.sv-pro.sv-pro .svpr-join-v{ position:relative; display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.sv-pro.sv-pro .svpr-join-v .svpr-seal{ position:static; width:clamp(120px,12vw,160px); }
.sv-pro.sv-pro .svpr-join-v .svpr-dream{ position:static; width:100%; background:rgba(255,255,255,.1); box-shadow:none; }
.sv-pro.sv-pro .svpr-join-v .svpr-dream p{ color:rgba(255,255,255,.82); }
.sv-pro.sv-pro .svpr-join-v .svpr-dream p b{ color:#fff; }
.sv-pro.sv-pro .svpr-join-t{ position:relative; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.sv-pro.sv-pro .svpr-join-t .svpr-lede{ color:rgba(255,255,255,.82); }
.sv-pro.sv-pro .svpr-join-t .svpr-lede + .svpr-lede{ margin-top:0; }

/* =========================== 11 · domande =========================== */
.sv-pro.sv-pro .svpr-faq-g{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(22px,3vw,48px); }
.sv-pro.sv-pro .svpr-faq-h{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.sv-pro.sv-pro .svpr-faq{ display:flex; flex-direction:column; gap:12px; }
.sv-pro.sv-pro .svpr-q{ border:2px solid var(--svpr-line); border-radius:var(--svpr-r); background:#fff; overflow:hidden; transition:border-color .25s; }
.sv-pro.sv-pro .svpr-q.is-open{ border-color:var(--svpr-green); }
.sv-pro.sv-pro .svpr-q h3{ font-size:clamp(18px,1.7vw,22px); line-height:1.25; letter-spacing:-.015em; }
.sv-pro.sv-pro .svpr-q h3 button{ width:100%; display:flex; align-items:center; gap:16px; padding:20px 20px 20px 24px; }
.sv-pro.sv-pro .svpr-q h3 button > span{ flex:1; min-width:0; }
.sv-pro.sv-pro .svpr-q h3 i{ position:relative; flex:none; width:40px; height:40px; border-radius:12px; background:var(--svpr-green-s); color:var(--svpr-green); transition:transform .3s, background-color .3s; }
.sv-pro.sv-pro .svpr-q h3 i::before,
.sv-pro.sv-pro .svpr-q h3 i::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:2.4px; margin:-1.2px 0 0 -7px; border-radius:2px; background:currentColor; }
.sv-pro.sv-pro .svpr-q h3 i::after{ transform:rotate(90deg); }
.sv-pro.sv-pro .svpr-q.is-open h3 i{ transform:rotate(45deg); background:var(--svpr-green); color:#fff; }
.sv-pro.sv-pro .svpr-ans{ display:flex; flex-direction:column; gap:16px; padding:0 24px 26px; }
.sv-pro.sv-pro .svpr-ans[hidden]{ display:none; }
.sv-pro.sv-pro .svpr-ans h4{ font-size:18px; line-height:1.3; letter-spacing:-.01em; padding-top:16px; border-top:1.5px dashed var(--svpr-line); color:var(--svpr-green-t); }
.sv-pro.sv-pro .svpr-ans > h4:first-child{ border-top:0; padding-top:0; }
.sv-pro.sv-pro .svpr-ans :is(p,li){ font-size:16.5px; line-height:1.6; color:#3b4555; }
.sv-pro.sv-pro .svpr-ans ul{ display:flex; flex-direction:column; gap:10px; }
.sv-pro.sv-pro .svpr-ans ul li{ position:relative; padding-left:30px; }
.sv-pro.sv-pro .svpr-ans ul li::before{ content:"✓"; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:var(--svpr-green); color:#fff; display:grid; place-items:center; font-size:11px; }
.sv-pro.sv-pro .svpr-ans a{ color:var(--svpr-green); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.sv-pro.sv-pro .svpr-ans img{ border-radius:18px; width:100%; max-width:560px; height:auto; }
.sv-pro.sv-pro .svpr-ans strong{ color:var(--svpr-ink); }
.sv-pro.sv-pro .svpr-tl{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 0; scrollbar-width:thin; }
.sv-pro.sv-pro .svpr-tl li{ flex:0 0 200px; scroll-snap-align:start; border-radius:18px; background:var(--svpr-soft); padding:16px; display:flex; flex-direction:column; gap:8px; position:relative; }
.sv-pro.sv-pro .svpr-tl li::before{ content:""; position:absolute; left:16px; right:-10px; top:30px; border-top:2px dashed #c9cfe0; }
.sv-pro.sv-pro .svpr-tl li:last-child::before{ right:16px; }
.sv-pro.sv-pro .svpr-tl time{ position:relative; align-self:flex-start; background:var(--svpr-green); color:#fff; font-weight:900; font-size:12.5px; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.sv-pro.sv-pro .svpr-tl p{ font-size:15.5px; line-height:1.3; font-weight:800; color:var(--svpr-ink); }
.sv-pro.sv-pro .svpr-sign{ margin-top:clamp(36px,5vw,64px); display:flex; justify-content:center; }
.sv-pro.sv-pro .svpr-sign img{ width:150px; }

/* =========================== pannello "Scopri di più" =========================== */
.sv-pro.svpr-oc{ position:fixed; inset:0; z-index:var(--sv-z-fs,2147483000); container-type:inline-size; container-name:svproc; }
.sv-pro.sv-pro .svpr-oc-bg{ position:absolute; inset:0; background:rgba(20,26,36,.55); opacity:0; transition:opacity .35s; }
.sv-pro.sv-pro .svpr-oc-p{ position:absolute; left:0; right:0; bottom:0; max-height:88%; background:#fff; border-radius:26px 26px 0 0; overflow-y:auto; overscroll-behavior:contain; transform:translateY(100%); transition:transform .45s var(--svpr-out); }
.sv-pro.svpr-oc.is-on .svpr-oc-bg{ opacity:1; }
.sv-pro.svpr-oc.is-on .svpr-oc-p{ transform:none; }
.sv-pro.sv-pro .svpr-oc-h{ position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:12px; padding:14px clamp(18px,4vw,36px); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--svpr-line); }
.sv-pro.sv-pro .svpr-oc-h span{ flex:1; font-weight:900; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--svpr-green); }
.sv-pro.sv-pro .svpr-x{ width:42px; height:42px; border-radius:50%; border:1.5px solid var(--svpr-line); background:#fff; display:grid; place-items:center; color:var(--svpr-ink); }
html .sv-pro.sv-pro button.svpr-x{ border:1.5px solid var(--svpr-line); background:#fff; }
.sv-pro.sv-pro .svpr-x svg{ width:18px; height:18px; }
.sv-pro.sv-pro .svpr-oc-b{ padding:clamp(22px,4vw,44px) clamp(20px,4vw,44px) calc(48px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.sv-pro.sv-pro .svpr-oc-b h3{ font-size:clamp(24px,2.4vw,32px); line-height:1.12; }
.sv-pro.sv-pro .svpr-oc-b [data-svpr-oc-body]{ display:flex; flex-direction:column; gap:16px; }
.sv-pro.sv-pro .svpr-oc-b h4{ font-size:19px; line-height:1.3; margin-top:8px; }
.sv-pro.sv-pro .svpr-oc-b p{ font-size:17px; line-height:1.6; }
.sv-pro.sv-pro .svpr-oc-b > [data-svpr-btn]{ margin-top:10px; }
html.sv-pro-lock, html.sv-pro-lock body{ overflow:hidden; }

/* ---------- da 700: misure più ampie ---------- */
@container svpr (min-width:700px){
  .sv-pro.sv-pro .svpr-buy{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sv-pro.sv-pro .svpr-reviews{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---------- da 1000: impaginazione del computer ---------- */
@container svpr (min-width:1000px){
  .sv-pro.sv-pro .svpr-hero-g{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:64px; }
  .sv-pro.sv-pro .svpr-hero-ph{ aspect-ratio:4/4.6; }
  .sv-pro.sv-pro .svpr-hero-v .svpr-seal{ top:-14px; left:-14px; }
  .sv-pro.sv-pro .svpr-why-g{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; }
  .sv-pro.sv-pro .svpr-why-t{ position:sticky; top:calc(var(--sv-bar-h,76px) + 32px); }
  .sv-pro.sv-pro .svpr-tale-g{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
  .sv-pro.sv-pro .svpr-area-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .sv-pro.sv-pro .svpr-area.is-wide{ grid-column:1/-1; flex-direction:row; }
  .sv-pro.sv-pro .svpr-area.is-wide .svpr-area-ph{ flex:0 0 46%; aspect-ratio:auto; min-height:300px; }
  .sv-pro.sv-pro .svpr-fq{ grid-template-columns:minmax(0,1fr) auto; }
  .sv-pro.sv-pro .svpr-fq figcaption{ flex-direction:column; text-align:center; }
  .sv-pro.sv-pro .svpr-face{ width:132px; height:132px; }
  .sv-pro.sv-pro .svpr-buy li{ aspect-ratio:4/3.4; }
  .sv-pro.sv-pro .svpr-join{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .sv-pro.sv-pro .svpr-faq-g{ grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); align-items:start; }
  .sv-pro.sv-pro .svpr-faq-h{ position:sticky; top:calc(var(--sv-bar-h,76px) + 32px); }
}
/* il pannello sta in fondo al body: ha un contenitore suo */
@container svproc (min-width:1000px){
  .sv-pro.sv-pro .svpr-oc-p{ left:auto; top:0; width:min(640px,100%); max-height:none; border-radius:0; transform:translateX(100%); }
}

/* meno movimento: niente nastri né pallini (le frasi e la comparsa le ferma lo script) */
@media (prefers-reduced-motion:reduce){
  .sv-pro.sv-pro .svpr-pill i,
  .sv-pro.sv-pro .svpr-mq-row.is-loop,
  .sv-pro.sv-pro .svpr-logos ul.is-loop{ animation:none; }
  .sv-pro.sv-pro .svpr-rv,
  .sv-pro.sv-pro .svpr-area,
  .sv-pro.sv-pro .svpr-oc-p,
  .sv-pro.sv-pro .svpr-oc-bg{ transition:none; }
}