/* VIDEO-ORDINARE-2026-10-09 — pulsante «Come ordinare» nelle barre degli Studi, lightbox dei video, griglia su /how-to-order.
   Colori e caratteri del foglio degli Studi (scatole-studio-ui-b.css) e della guida (scatole-order-guide.css). */
.scv-i{width:1em;height:1em;flex:none;display:block}

/* ---------- 1. guscio comune (#bl-studio): il pulsante eredita a.sog-help di 000974, qui solo le differenze ---------- */
#bl-studio .blb-barra a.sog-help.scv-apri .scv-i{width:18px;height:18px}
/* Misurato il 9/10 (sandbox, Base & Lid): con l'etichetta la riga della barra regge da 1280 px (en/it/es) e da 1440 (fr);
   sotto, le tappe andrebbero a capo. Quindi fra 950 e 1279 (fr: 1439) resta la sola icona, come fa «How it works» fra
   950 e 1119: l'etichetta resta nel title e per chi legge con lo screen reader. */
@media (min-width:950px) and (max-width:1279px){
  #bl-studio .blb-barra a.sog-help.scv-apri{width:36px;padding:0;justify-content:center;gap:0}
  #bl-studio .blb-barra a.sog-help.scv-apri .scv-apri__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:1280px) and (max-width:1439px){
  #bl-studio .blb-barra a.sog-help.scv-apri[lang="fr"]{width:36px;padding:0;justify-content:center;gap:0}
  #bl-studio .blb-barra a.sog-help.scv-apri[lang="fr"] .scv-apri__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:949px){
  #bl-studio .blb-barra a.sog-help.scv-apri .scv-i{width:17px;height:17px}
  /* sulla stessa riga di «How it works», non su una terza riga */
  #bl-studio .blb-barra a.sog-help.scv-apri{flex:0 0 auto;max-width:max-content}
}
@media (min-width:768px) and (max-width:949px){#bl-studio .blb-barra a.sog-help.scv-apri{margin:-2px 0 0 6px}}
@media (max-width:767px){#bl-studio .blb-barra a.sog-help.scv-apri{margin:-6px 0 6px 6px}}

/* ---------- 1b. Folding Carton Studio (#astApp .sfa-barra): stessa pillola, dopo le tappe ---------- */
#astApp.sfa .sfa-barra a.scv-apri{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;min-height:36px;margin:0;padding:5px 13px 5px 9px;border:1px solid var(--sfa-linea,#DDE1E6);border-radius:999px;background:#fff;color:var(--sfa-mart,#226E78);font-family:var(--sfa-ui,Poppins,system-ui,sans-serif);font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s}
#astApp.sfa .sfa-barra a.scv-apri .scv-i{width:18px;height:18px}
#astApp.sfa .sfa-barra a.scv-apri:hover{background:var(--sfa-marv,#E9F3F4);border-color:var(--sfa-mar,#2F8C98);color:var(--sfa-ink,#0F1115)}
#astApp.sfa .sfa-barra a.scv-apri:focus-visible{outline:3px solid var(--sfa-mars,#2F8C98);outline-offset:2px}
/* da 768 in su le tappe non si allargano piu' a tutta la barra: il pulsante sta subito dopo «3 Quote», il cruscotto resta a destra */
@media (min-width:768px){#astApp.sfa .sfa-barra:has(a.scv-apri) .sfa-tappe{flex:0 1 auto}#astApp.sfa .sfa-barra a.scv-apri{margin-left:4px}}
/* telefono: le tappe scorrono su una riga (nowrap) e a 390 px non c'e' posto per altro; il pulsante prende una riga sua,
   senza bordo (come «How it works» nel guscio comune) e la barra cresce di quella riga, variabile compresa */
@media (max-width:767px){
  #astApp.sfa:has(.sfa-barra a.scv-apri){--sfa-barra:80px}
  #astApp.sfa .sfa-barra:has(a.scv-apri){flex-wrap:wrap;row-gap:0}
  #astApp.sfa .sfa-barra a.scv-apri{flex:0 0 100%;max-width:max-content;min-height:30px;margin:-2px 0 0 -4px;padding:3px 9px 3px 4px;border:0;border-radius:8px;background:transparent;font-size:12.5px}
  #astApp.sfa .sfa-barra a.scv-apri .scv-i{width:17px;height:17px}
}

/* ---------- 2. la lightbox (nasce al clic, sparisce alla chiusura) ---------- */
html.scv-aperto,html.scv-aperto body{overflow:hidden}
.scv-lb{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(9,35,42,.9);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);font-family:var(--sc-testo,Poppins,system-ui,sans-serif);-webkit-font-smoothing:antialiased}
.scv-lb,.scv-lb *{box-sizing:border-box}
.scv-lb__box{position:relative;display:flex;flex-direction:column;width:min(1120px,100%);max-height:100%;border-radius:16px;background:#0b1a1e;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.scv-lb__testa{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;color:#fff}
.scv-lb__t{margin:0!important;color:#fff!important;font-family:inherit!important;font-size:14px!important;font-weight:700!important;line-height:1.3!important}
.scv-lb__x,.scv-lb__b{display:inline-flex;align-items:center;gap:7px;min-height:38px;margin:0;padding:0 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer;transition:background-color .15s}
.scv-lb__x{width:38px;flex:none;padding:0;justify-content:center}
.scv-lb__x:hover,.scv-lb__b:hover{background:rgba(255,255,255,.18);color:#fff}
.scv-lb__x:focus-visible,.scv-lb__b:focus-visible{outline:3px solid #8bcaca;outline-offset:2px}
.scv-lb__x .scv-i{width:18px;height:18px}
.scv-lb__b .scv-i{width:16px;height:16px}
.scv-lb__video{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;background:#000}
.scv-lb__video video{display:block;width:100%;height:auto;max-height:calc(100dvh - 160px);aspect-ratio:16/9;background:#000;object-fit:contain;outline:0}
.scv-lb__piede{display:flex;justify-content:flex-end;gap:10px;padding:10px 14px}
.scv-lb__box:fullscreen{width:100%;height:100%;max-height:none;border-radius:0;background:#000}
.scv-lb__box:fullscreen .scv-lb__video video{max-height:100%;height:100%;aspect-ratio:auto}
@media (max-width:767px){
  .scv-lb{padding:0}
  .scv-lb__box{width:100%;height:100%;max-height:none;border-radius:0}
  .scv-lb__video video{max-height:100%}
  .scv-lb__piede{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:no-preference){.scv-lb{animation:scv-in .18s ease-out}@keyframes scv-in{from{opacity:0}to{opacity:1}}}

/* ---------- 3. la griglia in fondo a /how-to-order ---------- */
.scv{max-width:1160px;margin:0 auto 56px;padding:0 16px;color:#193239;font-family:Lato,Poppins,system-ui,sans-serif}
.scv,.scv *{box-sizing:border-box}
.scv__testa{max-width:760px;margin:0 0 22px}
.scv__occhiello{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:#146d78;font-family:Poppins,system-ui,sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.scv__occhiello:before{content:"";width:20px;height:2px;background:#146d78}
.scv h2{margin:0 0 10px!important;padding:0!important;color:#193239!important;font-family:Poppins,system-ui,sans-serif!important;font-size:clamp(24px,3vw,32px)!important;font-weight:800!important;line-height:1.15!important;letter-spacing:-.02em}
.scv__intro{margin:0;color:#587077;font-size:15px;line-height:1.55}
.scv__griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px 20px}
.scv-card{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none!important;border-radius:14px}
.scv-card:focus-visible{outline:3px solid #40a6ad;outline-offset:4px}
.scv-card__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#dce8e7;box-shadow:0 1px 2px rgba(15,40,46,.08),0 10px 24px rgba(15,40,46,.1)}
.scv-card__img img{display:block;width:100%;height:100%;object-fit:cover}
.scv-card__play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;display:grid;place-items:center;border-radius:50%;background:rgba(16,62,71,.82);color:#fff;transition:transform .15s,background-color .15s}
.scv-card__play .scv-i{width:34px;height:34px}
.scv-card:hover .scv-card__play{transform:scale(1.06);background:#146d78}
.scv-card__durata{position:absolute;right:10px;bottom:10px;padding:3px 8px;border-radius:999px;background:rgba(9,35,42,.78);color:#fff;font-family:Poppins,system-ui,sans-serif;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.scv-card__t{font-family:Poppins,system-ui,sans-serif;font-size:15px;font-weight:700;line-height:1.3;color:#193239}
.scv-card__riserva{font-weight:600;font-style:normal;color:#587077;font-size:12px;white-space:nowrap}
.scv-card__p{color:#587077;font-size:13.5px;line-height:1.5}
@media (min-width:640px){.scv-card--come{grid-column:span 2}}