/* Trame Napoletane: percorso del ricamo nel passo Personalizza (mobile first) */
.sa-ric { --ric-navy: #0E2449; --ric-gold: #EEB53E; --ric-ivory: #FAF7F0; --ric-line: rgba(14, 36, 73, .12); --ric-muted: #5E6472; margin-top: .4rem; }
.sa-ric *, .sa-ric-zoom * { box-sizing: border-box; }

/* passi */
.sa-ric__passi { display: flex; gap: 4px; margin: 0 0 1rem; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.sa-ric__passi::-webkit-scrollbar { display: none; }
.sa-ric__passi li { flex: 1 0 auto; }
.sa-ric__passi button { display: flex; align-items: center; gap: .35rem; width: 100%; min-height: 36px; padding: 0 .6rem; border: 0; border-radius: 999px; background: #fff; color: var(--ric-muted); font: 600 .74rem/1 inherit; white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 1px var(--ric-line); }
.sa-ric__passi button span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #F1ECE2; font-size: .7rem; }
.sa-ric__passi .is-att button { background: var(--ric-navy); color: var(--ric-ivory); box-shadow: none; }
.sa-ric__passi .is-att button span { background: var(--ric-gold); color: var(--ric-navy); }
.sa-ric__passi .is-fatto button span { background: var(--ric-gold); color: var(--ric-navy); }
.sa-ric__passi button:disabled { opacity: .5; cursor: default; }

.sa-ric__titolo { margin: 0 0 .7rem; font-family: 'Libre Bodoni', Georgia, serif; font-size: 1.4rem; font-weight: 500; color: var(--ric-navy); }
.sa-ric__titolo em { color: #C8912A; }
.sa-ric__nota { margin: .2rem 0 .8rem; font-size: .84rem; color: var(--ric-muted); }
.sa-ric__avviso { margin: .8rem 0 0; padding: .6rem .8rem; border-radius: 12px; background: #FFF6E0; font-size: .82rem; color: var(--ric-navy); }

/* griglie ricami e varianti */
.sa-ric__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@media (min-width: 640px) { .sa-ric__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sa-ric__card { position: relative; display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: .6rem .6rem .7rem; border: 0; border-radius: 18px; background: #fff; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--ric-line); transition: box-shadow .25s, transform .25s; font: inherit; color: var(--ric-navy); }
.sa-ric__card:hover { box-shadow: inset 0 0 0 2px var(--ric-navy); }
.sa-ric__card.is-sel { box-shadow: inset 0 0 0 2.5px var(--ric-navy), 0 10px 24px rgba(14, 36, 73, .12); }
.sa-ric__img { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 8%; border: 0; border-radius: 12px; background: var(--ric-ivory); cursor: pointer; overflow: visible; }
.sa-ric__img { width: 100%; }
.sa-ric__img > img:first-child { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
/* bollino Sartys come un timbro: in basso a destra, inclinato e sempre in trasparenza */
.sa-ric .sa-ric__bollino, .sa-ric__img .sa-ric__bollino { position: absolute; right: -5%; bottom: -5%; left: auto; width: 26%; height: auto; object-fit: contain; opacity: .42; transform: rotate(-14deg); pointer-events: none; mix-blend-mode: multiply; }
.sa-ric__nome { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.sa-ric__prezzo { font-size: .8rem; color: #C8912A; font-weight: 600; }
.sa-ric__spunta { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: transparent; box-shadow: inset 0 0 0 1.5px var(--ric-line); font-size: .8rem; font-weight: 700; }
.sa-ric__card.is-sel .sa-ric__spunta { background: var(--ric-gold); color: var(--ric-navy); box-shadow: none; }
.sa-ric__lente { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--ric-navy); color: var(--ric-ivory); cursor: zoom-in; }
.sa-ric__lente svg { width: 17px; height: 17px; }
.sa-ric__card--var { cursor: default; padding-bottom: 2.9rem; }
.sa-ric__card--var .sa-ric__nome { position: absolute; left: .7rem; bottom: .95rem; right: 3.2rem; }
.sa-ric__annulla { margin: .8rem 0 0; padding: 0; border: 0; background: none; color: var(--ric-navy); font: 600 .85rem inherit; text-decoration: underline; cursor: pointer; }

/* modifica e misura */
.sa-ric__modifica { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sa-ric__modifica { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.sa-ric__anteprima { position: relative; aspect-ratio: 1; padding: 6%; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--ric-line); background-image: linear-gradient(rgba(14, 36, 73, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 36, 73, .04) 1px, transparent 1px); background-size: 20px 20px; }
.sa-ric__angolo { position: absolute; width: 22px; height: 22px; border-color: #C8912A; border-style: solid; border-width: 0; }
.sa-ric__angolo--a { left: 12px; bottom: 12px; border-left-width: 2px; border-bottom-width: 2px; }
.sa-ric__angolo--b { right: 12px; top: 12px; border-right-width: 2px; border-top-width: 2px; }
.sa-ric-art { position: relative; display: block; width: 100%; height: 100%; }
.sa-ric-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sa-ric__parti { display: grid; gap: .5rem; align-content: start; }
.sa-ric__parte { display: flex; align-items: center; gap: .7rem; min-height: 50px; padding: 0 1rem; border: 0; border-radius: 999px; background: #fff; color: var(--ric-navy); font: 600 .95rem inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--ric-line); transition: background .2s, box-shadow .2s; }
.sa-ric__parte:hover { box-shadow: inset 0 0 0 2px var(--ric-navy); }
.sa-ric__parte.is-on { background: var(--ric-navy); color: var(--ric-ivory); box-shadow: none; }
.sa-ric__check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font-size: .78rem; }
.sa-ric__parte.is-on .sa-ric__check { background: var(--ric-gold); color: var(--ric-navy); box-shadow: none; }
.sa-ric__misure { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.sa-ric__misura { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; border: 0; border-radius: 14px; background: #fff; color: var(--ric-navy); font: 700 .95rem inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--ric-line); }
.sa-ric__misura small { font-size: .66rem; font-weight: 500; opacity: .7; }
.sa-ric__misura.is-on { background: var(--ric-navy); color: var(--ric-ivory); box-shadow: none; }
.sa-ric__totale { margin: .8rem 0 0; display: flex; justify-content: space-between; font-size: .9rem; color: var(--ric-muted); }
.sa-ric__totale strong { font-family: 'Libre Bodoni', Georgia, serif; font-size: 1.3rem; color: var(--ric-navy); }

/* posizione sul capo */
.sa-ric__lati { display: flex; gap: .4rem; margin-bottom: .6rem; }
.sa-ric__lato { min-height: 40px; padding: 0 1rem; border: 0; border-radius: 999px; background: #fff; color: var(--ric-navy); font: 600 .85rem inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--ric-line); }
.sa-ric__lato.is-on { background: var(--ric-navy); color: var(--ric-ivory); box-shadow: none; }
.sa-ric__lato--zoom { margin-left: auto; display: grid; place-items: center; width: 40px; padding: 0; }
.sa-ric__lato--zoom svg { width: 18px; height: 18px; }
.sa-ric__stage { position: relative; height: 380px; border-radius: 18px; background: var(--ric-ivory); background-image: linear-gradient(rgba(14, 36, 73, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 36, 73, .045) 1px, transparent 1px); background-size: 22px 22px; overflow: hidden; }
.sa-ric__stage.is-grande { height: min(78vh, 760px); width: min(92vw, 760px); }
.sa-ric__foto { position: absolute; inset: 0; }
.sa-ric__foto > img { width: 100%; height: 100%; object-fit: contain; }
.sa-ric__punti { position: absolute; inset: 0; }
.sa-ric__punto { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 2.5px solid #E0473C; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; box-shadow: 0 0 0 4px rgba(224, 71, 60, .18); animation: saRicPulse 2s ease-in-out infinite; }
.sa-ric__punto:hover { background: #fff; }
.sa-ric__punto.is-on { border-color: var(--ric-gold); background: transparent; box-shadow: none; animation: none; z-index: 2; }
.sa-ric__sul-capo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
@keyframes saRicPulse { 50% { box-shadow: 0 0 0 9px rgba(224, 71, 60, .05); } }
@media (prefers-reduced-motion: reduce) { .sa-ric__punto { animation: none; } }

/* navigazione e riepilogo */
.sa-ric__nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1rem; }
.sa-ric__btn { min-height: 46px; padding: 0 1.3rem; border: 0; border-radius: 999px; background: var(--ric-navy); color: var(--ric-ivory); font: 600 .9rem inherit; cursor: pointer; }
.sa-ric__btn:disabled { opacity: .4; cursor: not-allowed; }
.sa-ric__btn--ghost { background: #fff; color: var(--ric-navy); box-shadow: inset 0 0 0 1.5px var(--ric-line); }
.sa-ric__btn:focus-visible, .sa-ric__card:focus-visible, .sa-ric__parte:focus-visible, .sa-ric__punto:focus-visible { outline: 3px solid var(--ric-gold); outline-offset: 2px; }
.sa-ric__riep { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .8rem; align-items: center; padding: .8rem; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ric-navy); }
.sa-ric__riep-img { position: relative; aspect-ratio: 1; padding: 6px; border-radius: 12px; background: var(--ric-ivory); }
.sa-ric__riep-txt { display: flex; flex-direction: column; gap: .2rem; font-size: .84rem; color: var(--ric-muted); min-width: 0; }
.sa-ric__riep-txt strong { font-size: 1rem; color: var(--ric-navy); }
.sa-ric__riep-azioni { grid-column: 1 / -1; display: flex; gap: .5rem; }
.sa-ric__riep-azioni .sa-ric__btn { flex: 1; min-height: 40px; }

/* zoom */
.sa-ric-zoom { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 16px; background: rgba(14, 36, 73, .82); opacity: 0; transition: opacity .2s; }
.sa-ric-zoom.is-open { opacity: 1; }
.sa-ric-zoom__corpo { max-width: min(92vw, 760px); text-align: center; color: #FAF7F0; }
.sa-ric-zoom__corpo > img { width: min(86vw, 640px); max-height: 74vh; object-fit: contain; padding: 4%; border-radius: 20px; background: #FAF7F0; }
.sa-ric-zoom__corpo p { margin: .8rem 0 0; font-weight: 600; }
.sa-ric-zoom__chiudi { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: #0E2449; font-size: 1.1rem; cursor: pointer; }
.sa-ric-zoom--capo .sa-ric__punto { width: 36px; height: 36px; margin: -18px 0 0 -18px; }

/* variante completa nella scheda e nello zoom */
.sa-ric__img > .sa-ric-art--card { position: absolute; inset: 8%; width: 84%; height: 84%; }
.sa-ric-zoom__art { width: min(86vw, 640px); aspect-ratio: 1; padding: 4%; border-radius: 20px; background: #FAF7F0; }

/* fino a due ricami per capo */
.sa-ric__lista { display: grid; gap: .7rem; }
.sa-ric__aggiungi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem .5rem; width: 100%; margin-top: .7rem; min-height: 48px; padding: .6rem 1rem; border: 1.5px dashed var(--ric-navy); border-radius: 18px; background: transparent; color: var(--ric-navy); font: 600 .92rem inherit; cursor: pointer; }
.sa-ric__aggiungi span { font-size: 1.2rem; line-height: 1; }
.sa-ric__aggiungi small { font-weight: 400; color: var(--ric-muted); }
.sa-ric__aggiungi:hover { background: #fff; }
.sa-ric__quale { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 .6rem; padding: .45rem .8rem; border-radius: 12px; background: var(--ric-ivory); font-size: .84rem; font-weight: 600; color: var(--ric-navy); }
.sa-ric__quale button { padding: 0; border: 0; background: none; color: var(--ric-muted); font: 500 .82rem inherit; text-decoration: underline; cursor: pointer; }
.sa-ric__punto.is-preso { border-color: transparent; background: transparent; box-shadow: none; animation: none; cursor: default; opacity: .9; }

/* i ricami confermati sul capo dell'anteprima grande (e nella vista a schermo intero) */
.sa-ric-sulcapo { position: absolute; inset: 0; z-index: 95; pointer-events: none; container-type: size; }
.sa-ric-sulcapo__foto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100cqw, calc(100cqh * var(--r))); aspect-ratio: var(--r); }
.sa-ric-sulcapo__ricamo { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .22)); }
.sa-ric-sulcapo__ricamo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* immagine di riferimento: messaggio di errore */
.upload-errore { margin: .5rem 0 0; font-size: .84rem; color: #B3261E; }

/* ======================================================= finestra a tutto schermo del percorso */
html.sa-ric-aperto, html.sa-ric-aperto body { overflow: hidden; }
.sa-ric-win { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: stretch; justify-content: center; background: rgba(14, 36, 73, .55); opacity: 0; transition: opacity .25s; }
.sa-ric-win[hidden] { display: none; }
.sa-ric-win.is-open { opacity: 1; }
.sa-ric-win__box { --ric-navy: #0E2449; --ric-gold: #EEB53E; --ric-ivory: #FAF7F0; --ric-line: rgba(14, 36, 73, .12); --ric-muted: #5E6472;
	display: flex; flex-direction: column; width: 100%; max-width: 920px; height: 100%; background: #FBF8F2; transform: translateY(24px); transition: transform .35s cubic-bezier(.2, .8, .2, 1); font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif; color: #0E2449; }
.sa-ric-win.is-open .sa-ric-win__box { transform: none; }
@media (min-width: 760px) { .sa-ric-win { align-items: center; padding: 24px; } .sa-ric-win__box { height: min(92vh, 900px); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); } }
.sa-ric-win__testa { position: relative; flex: 0 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px 10px; background: #fff; border-bottom: 1px solid var(--ric-line); }
.sa-ric-win__titolo { display: flex; align-items: baseline; gap: .6rem; padding-right: 52px; margin-bottom: 10px; font: 600 1.15rem 'Libre Bodoni', Georgia, serif; }
.sa-ric-win__titolo small { font: 600 .75rem 'Outfit', sans-serif; color: #C8912A; letter-spacing: .04em; }
.sa-ric-win__chiudi { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #F1ECE2; color: var(--ric-navy); font-size: 1rem; cursor: pointer; }
.sa-ric-win__testa .sa-ric__passi { margin: 0; }
.sa-ric-win__corpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 16px 24px; margin: 0; }
.sa-ric-win__piede { flex: 0 0 auto; display: flex; justify-content: space-between; gap: .6rem; padding: 10px 16px max(12px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--ric-line); }
.sa-ric-win__piede .sa-ric__btn { min-height: 50px; flex: 0 1 auto; }
.sa-ric-win__piede .sa-ric__btn:last-child { flex: 1 1 auto; max-width: 320px; margin-left: auto; }

/* transizioni tra le schermate e dei pezzi del ricamo */
.sa-ric-win__schermata.is-entra { animation: saRicEntra .38s cubic-bezier(.2, .8, .2, 1) both; }
.sa-ric-win__schermata.is-entra-indietro { animation: saRicEntraIndietro .38s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes saRicEntra { from { opacity: 0; transform: translateX(28px); } }
@keyframes saRicEntraIndietro { from { opacity: 0; transform: translateX(-28px); } }
.sa-ric-art img.is-entra { animation: saRicPezzo .42s cubic-bezier(.2, .8, .2, 1) both; }
.sa-ric-art img.is-esce { animation: saRicPezzoEsce .38s ease both; }
@keyframes saRicPezzo { from { opacity: 0; transform: scale(.94); filter: blur(3px); } }
@keyframes saRicPezzoEsce { to { opacity: 0; transform: scale(1.04); filter: blur(3px); } }
.sa-ric-win__schermata.is-entra .sa-ric__card, .sa-ric-win__schermata.is-entra-indietro .sa-ric__card { animation: saRicCarta .45s cubic-bezier(.2, .8, .2, 1) both; }
.sa-ric__griglia .sa-ric__card:nth-child(2) { animation-delay: .03s; } .sa-ric__griglia .sa-ric__card:nth-child(3) { animation-delay: .06s; }
.sa-ric__griglia .sa-ric__card:nth-child(4) { animation-delay: .09s; } .sa-ric__griglia .sa-ric__card:nth-child(5) { animation-delay: .12s; }
.sa-ric__griglia .sa-ric__card:nth-child(n+6) { animation-delay: .15s; }
@keyframes saRicCarta { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.sa-ric__card.is-sel .sa-ric__spunta { animation: saRicSpunta .35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes saRicSpunta { from { transform: scale(.4); } }
[data-ric-prezzo].is-cambia { animation: saRicPrezzo .5s ease; display: inline-block; }
@keyframes saRicPrezzo { 40% { transform: scale(1.12); color: #C8912A; } }
@media (prefers-reduced-motion: reduce) { .sa-ric-win__schermata, .sa-ric-art img, .sa-ric__card, [data-ric-prezzo] { animation: none !important; } }

/* modifica: parti con icona, interruttore e tendina */
.sa-ric__evidenza { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: 12px; background: #FFF1CF; color: #6B4A00; font-size: .86rem; font-weight: 600; }
.sa-ric__evidenza::before { content: 'i'; flex: 0 0 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--ric-gold); color: var(--ric-navy); font: 700 .78rem Georgia, serif; }
.sa-ric__opzione { border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--ric-line); overflow: hidden; transition: box-shadow .25s; }
.sa-ric__opzione.is-on { box-shadow: inset 0 0 0 1.5px var(--ric-navy); }
.sa-ric__opzione .sa-ric__parte { width: 100%; border-radius: 0; box-shadow: none; background: transparent; color: var(--ric-navy); min-height: 56px; }
.sa-ric__opzione .sa-ric__parte:hover { box-shadow: none; background: #FBF8F2; }
.sa-ric__icona { flex: 0 0 34px; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: #F1ECE2; color: var(--ric-navy); transition: background .25s, color .25s; }
.sa-ric__opzione.is-on .sa-ric__icona { background: var(--ric-navy); color: var(--ric-gold); }
.sa-ric__parte-nome { flex: 1; }
.sa-ric__parte-nome small { display: block; font-weight: 500; font-size: .76rem; color: var(--ric-muted); }
.sa-ric__switch { position: relative; flex: 0 0 46px; height: 28px; border-radius: 999px; background: #D7D1C5; transition: background .25s; }
.sa-ric__switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.sa-ric__opzione.is-on .sa-ric__switch { background: #1E7B4F; }
.sa-ric__opzione.is-on .sa-ric__switch i { transform: translateX(18px); }
.sa-ric__tendina { padding: 0 1rem .9rem 3.6rem; animation: saRicTendina .3s ease both; }
.sa-ric__tendina[hidden] { display: none; }
@keyframes saRicTendina { from { opacity: 0; transform: translateY(-6px); } }
.sa-ric__sotto > span { display: block; margin-bottom: .4rem; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ric-muted); }
.sa-ric__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sa-ric__chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .9rem; border: 0; border-radius: 999px; background: #F7F3EC; color: var(--ric-navy); font: 600 .84rem inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--ric-line); transition: background .2s, transform .2s; }
.sa-ric__chip i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.sa-ric__chip.is-on { background: var(--ric-navy); color: #fff; box-shadow: none; }
.sa-ric__chip:active { transform: scale(.96); }

/* pannello: il bottone che apre il percorso */
.sa-ric__inizia { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .8rem 1rem; border: 0; border-radius: 20px; background: var(--ric-navy); color: #fff; text-align: left; cursor: pointer; font: inherit; }
.sa-ric__inizia-img { display: flex; flex: 0 0 auto; }
.sa-ric__inizia-img img { width: 42px; height: 42px; object-fit: contain; padding: 3px; border-radius: 10px; background: #FAF7F0; margin-left: -12px; box-shadow: 0 0 0 2px var(--ric-navy); }
.sa-ric__inizia-img img:first-child { margin-left: 0; }
.sa-ric__inizia strong { display: block; font-size: 1rem; }
.sa-ric__inizia small { display: block; font-size: .78rem; opacity: .75; }
.sa-ric__inizia b { margin-left: auto; color: var(--ric-gold); font-size: 1.2rem; }
.sa-ric.is-appena .sa-ric__riep { animation: saRicAppena 1.2s ease; }
@keyframes saRicAppena { 30% { box-shadow: inset 0 0 0 1.5px var(--ric-navy), 0 0 0 6px rgba(238, 181, 62, .45); } }

/* posizione: ricami ritagliati sulla sagoma del capo, in scala reale; pallini sopra */
.sa-ric__ricami { position: absolute; inset: 0; pointer-events: none; }
.sa-ric__ricami .sa-ric__sul-capo { filter: drop-shadow(0 .5px .6px rgba(0, 0, 0, .35)) saturate(.94); transition: width .3s, height .3s; }
.sa-ric__ricami .sa-ric__sul-capo.is-mio { animation: saRicPezzo .4s cubic-bezier(.2, .8, .2, 1) both; }
.sa-ric__punto.is-on { width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #fff; background: var(--ric-gold); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); opacity: .9; }
.sa-ric__stage.is-reale .sa-ric__punti { display: none; }
.sa-ric__lato--zoom { width: auto; padding: 0 .9rem; display: inline-flex; gap: .4rem; align-items: center; }
.sa-ric-zoom__titolo { margin: 0 0 .7rem; font: 600 1.15rem 'Libre Bodoni', Georgia, serif; color: #FAF7F0; }
.sa-ric-zoom__punti { margin-top: .8rem; }
.sa-ric-zoom { z-index: 100002; }
.sa-ric-zoom { --ric-navy: #0E2449; --ric-gold: #EEB53E; --ric-ivory: #FAF7F0; --ric-line: rgba(14, 36, 73, .12); --ric-muted: #5E6472; font-family: "Outfit", "Helvetica Neue", Arial, sans-serif; }
.sa-ric-zoom .sa-ric__stage { box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }

/* ======================================================= telefono: finestra ricami piu' pulita */
/* timbro dentro l'angolo dell'immagine (non copre nome e prezzo) */
.sa-ric__img .sa-ric__bollino, .sa-ric__riep-img .sa-ric__bollino { right: 3%; bottom: 3%; width: 24%; }
/* passi: barra di avanzamento compatta, il nome solo del passo attuale */
.sa-ric-win__testa .sa-ric__passi { position: relative; display: flex; gap: 0; overflow: visible; }
.sa-ric-win__testa .sa-ric__passi li { flex: 1 1 0; position: relative; display: flex; justify-content: center; }
.sa-ric-win__testa .sa-ric__passi li::before { content: ''; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px; background: #E6DFD2; z-index: 0; }
.sa-ric-win__testa .sa-ric__passi li:first-child::before { display: none; }
.sa-ric-win__testa .sa-ric__passi li.is-fatto::before, .sa-ric-win__testa .sa-ric__passi li.is-att::before { background: var(--ric-gold); }
.sa-ric-win__testa .sa-ric__passi button { position: relative; z-index: 1; flex-direction: column; gap: 4px; width: auto; min-height: 0; padding: 0; background: none; box-shadow: none; color: var(--ric-muted); font-size: .68rem; letter-spacing: .02em; }
.sa-ric-win__testa .sa-ric__passi button span { width: 30px; height: 30px; font-size: .78rem; background: #fff; box-shadow: inset 0 0 0 1.5px #E6DFD2; transition: background .3s, transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.sa-ric-win__testa .sa-ric__passi .is-fatto button span { background: var(--ric-gold); box-shadow: none; color: var(--ric-navy); }
.sa-ric-win__testa .sa-ric__passi .is-att button { background: none; color: var(--ric-navy); }
.sa-ric-win__testa .sa-ric__passi .is-att button span { background: var(--ric-navy); color: var(--ric-gold); box-shadow: 0 0 0 4px rgba(238, 181, 62, .3); transform: scale(1.08); }
@media (max-width: 520px) {
	.sa-ric-win__testa .sa-ric__passi li:not(.is-att) button { font-size: 0; gap: 0; }
	.sa-ric-win__testa .sa-ric__passi li:not(.is-att) button span { font-size: .78rem; }
	.sa-ric-win__titolo { font-size: 1.05rem; margin-bottom: 8px; }
	.sa-ric-win__corpo { padding: 14px 14px 20px; }
	.sa-ric__titolo { font-size: 1.25rem; }
	.sa-ric__griglia { gap: .55rem; }
	.sa-ric__card { padding: .45rem .45rem .6rem; border-radius: 16px; }
	.sa-ric__nome { font-size: .86rem; }
	.sa-ric__misure { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
	.sa-ric__misura { min-height: 58px; font-size: .88rem; border-radius: 12px; }
	.sa-ric__anteprima { max-width: 340px; margin: 0 auto; width: 100%; }
	.sa-ric__stage { height: min(56vh, 460px); }
}
/* tocco: i bottoni e le schede rispondono al dito */
.sa-ric__card:active, .sa-ric__misura:active, .sa-ric__lato:active, .sa-ric__btn:active, .sa-ric__parte:active { transform: scale(.97); }
.sa-ric__misura, .sa-ric__lato, .sa-ric__btn { transition: transform .15s, background .2s, color .2s, box-shadow .2s; }
.sa-ric__misura.is-on { animation: saRicSpunta .35s cubic-bezier(.3, 1.6, .5, 1); }
/* finestra ricami su schermi grandi */
@media (min-width: 1920px) { .sa-ric-win__box { max-width: 1120px; } .sa-ric__griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 2240px) { .sa-ric-win__box { max-width: 1280px; } }
/* finestra mai piu alta dello schermo (anche con la barra del browser o lo zoom) */
@media (min-width: 760px) { .sa-ric-win__box { height: auto; max-height: calc(100dvh - 48px); min-height: min(640px, calc(100dvh - 48px)); } }

/* il ricamo "cucito" sul capo: pieghe e ombre della foto del capo moltiplicate sul disegno */
.sa-ric-ombra { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-repeat: no-repeat; mix-blend-mode: multiply; filter: contrast(1.55) brightness(1.06); }
.sa-ric-trama { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-repeat: repeat; background-size: 22%; mix-blend-mode: soft-light; opacity: .55; }
/* fili, non stampa: colori un filo piu' morbidi e bordo appena rilevato */
.sa-ric__sul-capo .sa-ric-art, .sa-ric-sulcapo__ricamo img { filter: saturate(.9); }
.sa-ric__sul-capo .sa-ric-art, .sa-ric-sulcapo__ricamo .sa-ric-art { position: absolute; inset: 0; }

/* schede delle varianti: il nome sotto l'immagine (non sopra il disegno), la lente in alto a sinistra
   cosi' non copre il timbro Sartys in basso a destra */
.sa-ric__card--var { padding-bottom: .7rem; }
.sa-ric__card--var .sa-ric__nome { position: static; margin-top: .15rem; padding-right: 0; }
.sa-ric__card--var .sa-ric__lente { top: 12px; left: 12px; right: auto; bottom: auto; width: 32px; height: 32px; box-shadow: 0 4px 10px rgba(14, 36, 73, .25); }
.sa-ric__card--var .sa-ric__lente svg { width: 15px; height: 15px; }

/* intestazione della finestra: marchio a sinistra, titolo al centro, chiudi a destra */
.sa-ric-win__barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; min-height: 42px; margin-bottom: 10px; padding-right: 0; }
.sa-ric-win__marchio { justify-self: start; display: flex; align-items: center; font: 600 1rem 'Libre Bodoni', Georgia, serif; color: var(--ric-navy); }
.sa-ric-win__marchio img { height: 28px; width: auto; }
.sa-ric-win__barra .sa-ric-win__titolo { justify-self: center; flex-direction: column; align-items: center; gap: 0; margin: 0; padding: 0; text-align: center; white-space: nowrap; }
.sa-ric-win__barra .sa-ric-win__titolo small:empty { display: none; }
.sa-ric-win__testa .sa-ric-win__chiudi { top: max(10px, env(safe-area-inset-top)); }
@media (max-width: 400px) { .sa-ric-win__marchio img { height: 22px; } .sa-ric-win__barra .sa-ric-win__titolo { font-size: .98rem; } }
/* misura non disponibile */
.sa-ric__misura:disabled { opacity: .45; cursor: not-allowed; background: #F3EFE7; }
.sa-ric__misura:disabled small { font-size: .6rem; opacity: 1; }

/* disegno sempre centrato nel riquadro (su Safari l'altezza al 100% non funzionava e il ricamo scendeva) */
.sa-ric__anteprima > .sa-ric-art { position: absolute; inset: 6%; width: auto; height: auto; }
.sa-ric__riep-img > .sa-ric-art { position: absolute; inset: 6px; width: auto; height: auto; }
.sa-ric-zoom__art { position: relative; }
.sa-ric-zoom__art > .sa-ric-art { position: absolute; inset: 4%; width: auto; height: auto; }

/* logo piu' grande nell'intestazione della finestra (Peppe) */
.sa-ric-win__marchio img { height: 42px; }
@media (max-width: 400px) { .sa-ric-win__marchio img { height: 34px; } }
.sa-ric-win__barra { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }

/* pannello Stampa: propria immagine oppure un nostro disegno */
.sa-stampa__intro { margin: 0 0 .8rem; color: #5E6472; font-size: .92rem; }
.sa-stampa .personalize-upload { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.sa-stampa .personalize-upload::before { content: none !important; }
.sa-stampa__oppure { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; color: #5E6472; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sa-stampa__oppure::before, .sa-stampa__oppure::after { content: ''; flex: 1; height: 1px; background: rgba(14, 36, 73, .15); }

/* Personalizza a fisarmonica: il pannello sta sotto la sua scelta (anche nella griglia desktop) */
.personalize-options .sa-perso-fisa { grid-column: 1 / -1; margin: .2rem 0 .6rem !important; padding-top: .4rem !important; border-top: 0 !important; }
.sa-perso-fisa::before { content: none !important; }
.sa-perso-testa { display: flex; align-items: center; gap: .6rem; width: 100%; margin: 0 0 .6rem; padding: .7rem 1rem; border: 0; border-radius: 14px; background: #F3EEE4; color: #0E2449; font: 600 .9rem 'Outfit', sans-serif; cursor: pointer; text-align: left; }
.sa-perso-testa small { display: none; margin-left: auto; font-weight: 500; font-size: .76rem; color: #8A7A5C; }
.sa-perso-testa i { width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg); transition: transform .25s; }
.sa-perso-fisa.is-chiuso > :not(.sa-perso-testa) { display: none !important; }
.sa-perso-fisa.is-chiuso .sa-perso-testa { margin: 0; }
.sa-perso-fisa.is-chiuso .sa-perso-testa small { display: inline; }
.sa-perso-fisa.is-chiuso .sa-perso-testa i { margin-left: .6rem; transform: rotate(45deg); }

/* ===== finestra Trame Napoletane su ogni risoluzione (Marco, 17/10/2026)
   logo proporzionato alla finestra, schede piu' piccole sugli schermi bassi (portatili 13", tablet) */
.sa-ric-win__marchio img { height: clamp(28px, 4.8vh, 38px); max-width: 100%; }
.sa-ric-win__marchio { min-width: 0; }
.sa-ric-win__barra .sa-ric-win__titolo { font-size: clamp(.95rem, 1.6vw + .4rem, 1.2rem); }
@media (max-width: 400px) {
	.sa-ric-win__marchio img { height: 26px; }
	.sa-ric-win__barra { gap: .3rem; }
	.sa-ric-win__barra .sa-ric-win__titolo { font-size: .92rem; }
}
/* le schede si adattano alla larghezza: mai giganti */
@media (min-width: 640px) { .sa-ric__griglia { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); } }
@media (min-width: 1920px) { .sa-ric__griglia { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
/* schermi bassi: intestazione, piede e titoli compatti, cosi' resta spazio al contenuto */
@media (max-height: 760px) {
	.sa-ric-win__testa { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 6px; }
	.sa-ric-win__barra { min-height: 36px; margin-bottom: 4px; }
	.sa-ric-win__testa .sa-ric__passi button span { width: 26px; height: 26px; }
	.sa-ric-win__testa .sa-ric__passi button { font-size: .68rem; }
	.sa-ric-win__corpo { padding-top: 10px; }
	.sa-ric__titolo { font-size: 1.2rem; margin-bottom: .3rem; }
	.sa-ric-win__piede { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
	.sa-ric-win__piede .sa-ric__btn { min-height: 44px; }
	.sa-ric__stage { height: min(52vh, 420px); }
}
@media (min-width: 760px) and (max-height: 760px) {
	.sa-ric-win { padding: 12px; }
	.sa-ric-win__box { max-height: calc(100dvh - 24px); min-height: 0; }
	.sa-ric__griglia { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* iniziali ricamate sull'anteprima del capo: filo leggermente in rilievo */
.sa-iniziali-sulcapo { position: absolute; z-index: 30; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; letter-spacing: .04em; pointer-events: none;
	text-shadow: 0 .5px 0 rgba(255, 255, 255, .35), 0 1px 1.5px rgba(0, 0, 0, .35); animation: saInizialiEntra .3s ease both; }
@keyframes saInizialiEntra { from { opacity: 0; transform: translate(-50%, -40%); } }