/* Home "viva" (home-viva.php): si carica solo nella pagina che usa [negotio_home]. Colori dalle variabili del tema (--ns-*). */
body.ns-pagina-home { overflow-x: clip; }
.ns-v-largo { width: 100vw; position: relative; left: 50%; margin-left: -50vw !important; }
.ns-home.ns-v > section { margin-bottom: clamp(3em, 6vw, 5.5em); }
.ns-v-occhiello { display: inline-flex; align-items: center; gap: .7em; font-size: .78em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.ns-v-occhiello::before { content: ""; width: 2.4em; height: 2px; background: var(--ns-accento); }

/* ---- 1) apertura ---- */
.ns-home.ns-v > .ns-v-apertura { background: var(--ns-testata); color: var(--ns-testata-testo); margin-top: -1.5em; margin-bottom: 0; padding: clamp(1.4em, 2.6vw, 2.6em) 0 clamp(2.6em, 4.4vw, 4.4em); overflow: hidden; }
.ns-v-dentro { max-width: 1340px; margin: 0 auto; padding: 0 clamp(1.2em, 4vw, 3.5em); display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(1.5em, 4vw, 4.2em); align-items: center; }
.ns-v-apertura h1 { color: inherit !important; font-size: clamp(2.3em, 4.5vw, 4.4em); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; margin: .4em 0 .42em; }
.ns-v-apertura h1 em { font-style: normal; color: var(--ns-accento); }
.ns-v-apertura p { font-size: clamp(1.05em, 1.3vw, 1.22em); opacity: .86; max-width: 24em; margin: 0 0 1.7em; }
.ns-v-azioni { display: flex; flex-wrap: wrap; gap: 1.2em; align-items: center; }
.ns-v-secondo { color: inherit !important; font-weight: 500; text-decoration: none !important; border-bottom: 1px solid currentColor; padding-bottom: 2px; opacity: .9; }
.ns-v-secondo:hover { opacity: 1; color: var(--ns-accento) !important; }
.ns-v-parole > * { animation: ns-v-entra .8s cubic-bezier(.2, .8, .2, 1) both; }
.ns-v-parole > :nth-child(2) { animation-delay: .08s; } .ns-v-parole > :nth-child(3) { animation-delay: .16s; } .ns-v-parole > :nth-child(4) { animation-delay: .24s; }
@keyframes ns-v-entra { from { opacity: 0; transform: translateY(26px); } }

.ns-v-finestre { display: flex; gap: clamp(8px, 1vw, 14px); height: min(70vh, 620px); min-height: 420px; padding: 20px 0; }
/* il tema mette in minuscolo i collegamenti alle categorie: qui no (selettore doppio per vincere su quella regola) */
.ns-v a.ns-v-finestra { text-transform: none !important; }
.ns-v-finestra { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; background: #2a313c; color: #fff !important; text-decoration: none !important; transform: translateY(var(--ns-su, 0)); transition: flex-grow .55s cubic-bezier(.2, .8, .2, 1); animation: ns-v-sale .95s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.15s + var(--i, 0) * .09s); }
.ns-v-finestra:nth-child(odd) { --ns-su: 18px; }
.ns-v-finestra:nth-child(even) { --ns-su: -18px; }
@keyframes ns-v-sale { from { opacity: 0; transform: translateY(calc(var(--ns-su, 0px) + 70px)); } }
.ns-v-finestra:hover, .ns-v-finestra:focus-visible { flex-grow: 1.75; }
.ns-v-finestra video, .ns-v-finestra > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; transition: filter .45s, transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.ns-v-finestra:hover video, .ns-v-finestra:hover > img { transform: scale(1.05); }
.ns-v-finestre:hover .ns-v-finestra:not(:hover) video, .ns-v-finestre:hover .ns-v-finestra:not(:hover) > img { filter: brightness(.55) saturate(.8); }
.ns-v-finestra::after { content: ""; position: absolute; inset: 48% 0 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .74)); pointer-events: none; }
.ns-v-etichetta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.1em 1.15em 1.25em; display: flex; flex-direction: column; gap: .12em; }
.ns-v-etichetta strong { font-size: clamp(1.05em, 1.5vw, 1.5em); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.ns-v-etichetta small { font-size: .82em; opacity: .88; display: flex; align-items: center; gap: .45em; white-space: nowrap; }
.ns-v-etichetta small::after { content: "→"; transition: transform .3s; }
.ns-v-finestra:hover .ns-v-etichetta small::after { transform: translateX(6px); }

/* timbro rotondo sull'angolo delle finestre: la scritta gira, il numero resta fermo */
.ns-v-palco { position: relative; min-width: 0; }
.ns-v-timbro { position: absolute; left: clamp(-62px, -3.8vw, -30px); top: clamp(-14px, -.6vw, 0px); z-index: 3; width: clamp(108px, 10.5vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--ns-accento); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); transform: rotate(-8deg); animation: ns-v-entra .8s .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.ns-v-timbro svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: ns-v-gira 22s linear infinite; }
.ns-v-timbro text { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; fill: currentColor; }
.ns-v-timbro > span { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ns-v-timbro strong { font-size: clamp(1.7em, 2.9vw, 2.5em); font-weight: 700; letter-spacing: -.04em; }
.ns-v-timbro small { font-size: .78em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-top: .25em; }
@keyframes ns-v-gira { to { transform: rotate(360deg); } }

/* ---- 2) striscia che scorre ---- */
.ns-home.ns-v > .ns-v-striscia, .ns-v-striscia { display: block; background: var(--ns-accento); color: #fff !important; overflow: hidden; white-space: nowrap; padding: .78em 0; font-weight: 600; letter-spacing: .02em; text-decoration: none !important; margin-bottom: 0; }
.ns-v-scorre { display: inline-flex; animation: ns-v-scorri 60s linear infinite; }
.ns-v-scorre span { padding: 0 1.1em; }
.ns-v-scorre i { font-style: normal; opacity: .75; }
.ns-v-striscia:hover .ns-v-scorre { animation-play-state: paused; }
@keyframes ns-v-scorri { to { transform: translateX(-50%); } }

/* ---- 3) garanzie ---- */
.ns-home.ns-v .ns-garanzie { margin-top: clamp(2em, 3.4vw, 3em) !important; }

/* ---- 3b) promo con la locandina ---- */
.ns-v-promo { --ns-pr: #0b0b0c; --ns-pr-testo: #fff; --ns-pr-accento: #e30613; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(1.5em, 4vw, 4em); border-radius: 24px; padding: clamp(1.6em, 3.4vw, 3em) clamp(1.6em, 4vw, 3.6em); background: var(--ns-pr); color: var(--ns-pr-testo); overflow: hidden; }
.ns-v-promo-img { justify-self: center; width: min(100%, 19em); transform: rotate(-4deg); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.ns-v-promo:hover .ns-v-promo-img { transform: rotate(0deg) scale(1.04); }
.ns-v-promo-img img { width: 100%; height: auto; display: block; border-radius: 14px !important; box-shadow: 0 22px 44px rgba(0, 0, 0, .55); }
.ns-v-promo h2 { color: inherit !important; font-size: clamp(2.2em, 5vw, 4.4em); letter-spacing: -.04em; line-height: 1; margin: .3em 0 .3em; }
.ns-v-promo h2 em { font-style: normal; color: var(--ns-pr-accento); }
.ns-v-promo p { font-size: 1.12em; opacity: .9; max-width: 25em; margin: 0 0 1.5em; }
.ns-v-promo .ns-v-occhiello::before { background: var(--ns-pr-accento); }
.ns-v-promo .button { background: var(--ns-pr-accento) !important; border-color: var(--ns-pr-accento) !important; color: #fff !important; }

/* ---- 3c) capi scelti: la foto scontornata sporge dal riquadro colorato ---- */
.ns-v-capi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.8em, 1.4vw, 1.4em); }
.ns-v-capo { display: block; text-decoration: none !important; color: var(--ns-testo) !important; min-width: 0; }
.ns-v-capo-fondo { display: block; position: relative; height: clamp(150px, 13.2vw, 190px); margin-top: clamp(62px, 6.2vw, 90px); border-radius: 22px; background: var(--ns-capo, #eadfce); clip-path: inset(-80% 0 0 0 round 22px); transition: background .3s; }
.ns-v-capo-fondo img { position: absolute; left: 50%; bottom: -4%; width: 82%; height: auto; max-height: 150%; object-fit: contain; object-position: center bottom; border-radius: 0 !important; transform: translateX(-50%); transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.2, 1.3, .4, 1); filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .2)); }
.ns-v-capo:hover .ns-v-capo-fondo img { transform: translateX(-50%) translateY(-12px) scale(1.06) rotate(-1.5deg); }
.ns-v-capo strong { display: block; font-weight: 500; font-size: .92em; line-height: 1.3; letter-spacing: -.01em; margin: .8em 0 .2em; }
.ns-v-capo .price { font-size: .9em; }
.ns-v-capo:hover strong { color: var(--ns-accento); }
.ns-js .ns-v .ns-v-capi-sez .ns-v-capo { opacity: 0; transform: translateY(34px); transition: opacity .6s, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * .07s); }
.ns-js .ns-v .ns-v-capi-sez.vista .ns-v-capo { opacity: 1; transform: none; }

/* ---- 4) novita' in un carosello ---- */
.ns-v-frecce { display: flex; align-items: center; gap: .55em; }
.ns-v-frecce button { width: 2.5em; height: 2.5em; border-radius: 50% !important; border: 1px solid #d2d2d7 !important; background: #fff !important; color: var(--ns-testo) !important; font-size: 1.05em; line-height: 1; padding: 0 !important; cursor: pointer; box-shadow: none !important; transition: background .2s, color .2s, border-color .2s; }
.ns-v-frecce button:hover { background: var(--ns-testo) !important; color: #fff !important; border-color: var(--ns-testo) !important; }
.ns-v-frecce a { margin-left: .6em; }
.ns-v-novita ul.products { display: flex !important; flex-wrap: nowrap !important; gap: 1.4em; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 !important; padding: .3em 0 .6em; }
.ns-v-novita ul.products::before, .ns-v-novita ul.products::after { display: none !important; }
.ns-v-novita ul.products::-webkit-scrollbar { display: none; }
.ns-v-novita ul.products li.product { flex: 0 0 calc((100% - 4.2em) / 4); width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; scroll-snap-align: start; }

/* ---- 5) la vetrina in video ---- */
.ns-v-vetrina { position: relative; border-radius: 24px; overflow: hidden; min-height: clamp(20em, 40vw, 33em); display: flex; align-items: flex-end; color: #fff; background: #20252d; }
.ns-v-vetrina video, .ns-v-vetrina > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.ns-v-vetrina::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .25) 55%, transparent 80%); pointer-events: none; }
.ns-v-vetrina-testo { position: relative; z-index: 1; padding: clamp(1.6em, 4vw, 3.4em); max-width: 31em; }
.ns-v-vetrina h2 { color: #fff !important; font-size: clamp(1.8em, 3.5vw, 3.1em); letter-spacing: -.03em; line-height: 1.05; margin: .35em 0 .35em; }
.ns-v-vetrina p { font-size: 1.08em; opacity: .9; margin: 0 0 1.4em; }

/* ---- 6) marchi che scorrono ---- */
.ns-v-marchi { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.ns-v-marchi-fila { display: inline-flex; align-items: center; white-space: nowrap; padding: .8em 0; animation: ns-v-scorri 44s linear infinite; }
.ns-v-doppio { display: inline-flex; align-items: center; }
.ns-v-marchi:hover .ns-v-marchi-fila { animation-play-state: paused; }
.ns-v-marchi a { flex: none; margin-right: clamp(2.6em, 6vw, 5.5em); opacity: .7; transition: opacity .25s, transform .25s; text-decoration: none !important; font-weight: 600; font-size: 1.4em; }
.ns-v-marchi a:hover { opacity: 1; transform: scale(1.07); }
.ns-v-marchi img { height: clamp(40px, 4.8vw, 62px); width: auto; max-width: none; border-radius: 0 !important; display: block; }

/* ---- 7) riquadro in evidenza ---- */
.ns-v-riquadro { --ns-rq: #1e2e5e; --ns-rq-testo: #fff; --ns-rq-tondo: #ffd23f; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 2em; border-radius: 24px; overflow: hidden; padding: clamp(2em, 4.4vw, 3.8em); background: var(--ns-rq); color: var(--ns-rq-testo); }
.ns-v-riquadro-logo { height: clamp(46px, 5vw, 66px); width: auto; border-radius: 0 !important; margin: 0 0 1.4em; display: block; }
.ns-v-riquadro h2 { color: inherit !important; font-size: clamp(2em, 4vw, 3.5em); letter-spacing: -.035em; line-height: 1.02; margin: .3em 0 .35em; }
.ns-v-riquadro h2 em { font-style: normal; color: var(--ns-accento); }
.ns-v-riquadro p { font-size: 1.1em; opacity: .9; max-width: 26em; margin: 0 0 1.5em; }
.ns-v-riquadro-img { position: relative; justify-self: center; width: min(100%, 21em); aspect-ratio: 1; display: grid; place-items: center; }
.ns-v-riquadro-img::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--ns-rq-tondo); }
.ns-v-riquadro-img img { position: relative; max-width: 92%; max-height: 92%; width: auto; height: auto; border-radius: 0 !important; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .3)); animation: ns-v-galleggia 6s ease-in-out infinite; }
@keyframes ns-v-galleggia { 0%, 100% { transform: translateY(-7px) rotate(-1.5deg); } 50% { transform: translateY(9px) rotate(1.5deg); } }

/* ---- 8) chi siamo ---- */
.ns-v-chi { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5em, 4vw, 4em); align-items: center; }
.ns-v-chi-foto { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; }
.ns-v-chi-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; display: block; transform: scale(1.12); transition: transform 7s cubic-bezier(.2, .6, .2, 1); }
.ns-v-chi.vista .ns-v-chi-foto img { transform: scale(1); }
.ns-v-chi h2 { font-size: clamp(1.7em, 2.8vw, 2.4em); letter-spacing: -.03em; margin: 0 0 .5em; }
.ns-v-chi-testo > p { font-size: 1.05em; line-height: 1.7; color: #3a3a3c; }
.ns-v-motivi { list-style: none; margin: 1.5em 0 0 !important; padding: 0; counter-reset: motivo; display: grid; gap: 1em; }
.ns-v-motivi li { display: grid; grid-template-columns: 2.3em 1fr; column-gap: .9em; counter-increment: motivo; align-items: start; }
.ns-v-motivi li::before { content: counter(motivo); grid-row: span 2; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--ns-accento); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .95em; }
.ns-v-motivi strong { font-weight: 600; }
.ns-v-motivi span { color: #6e6e73; font-size: .95em; }
.ns-v-orari { background: #f5f5f7; border-radius: 16px; padding: 1.1em 1.3em; font-size: .95em; margin: 1.5em 0 1em; line-height: 1.6; }

/* ---- comparsa allo scorrere (solo se lo script gira: senza, tutto resta visibile) ---- */
.ns-js .ns-v [data-vedi] { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .85s cubic-bezier(.2, .8, .2, 1); }
.ns-js .ns-v [data-vedi].vista { opacity: 1; transform: none; }

/* ---- apertura su schermi stretti (telefono, tablet, finestra del PC ristretta): testo sopra, finestre sotto in una fila che si scorre.
   Ogni finestra tiene la proporzione del video (verticale), cosi' l'inquadratura non viene tagliata male a nessuna larghezza. ---- */
@media (max-width: 1100px) {
  .ns-v-dentro { grid-template-columns: 1fr; gap: 1.6em; padding: 0; }
  .ns-v-parole { padding: 0 1.3em; }
  .ns-v-finestre { height: auto; min-height: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 1.3em; scroll-padding-left: 1.3em; }
  .ns-v-finestre::-webkit-scrollbar { display: none; }
  .ns-v-finestra { flex: 0 0 clamp(190px, 58vw, 270px); height: auto; aspect-ratio: 9 / 14; --ns-su: 0px !important; scroll-snap-align: start; }
  .ns-v-timbro { left: auto; right: .8em; top: -1.1em; width: 92px; }
  .ns-v-finestra:hover, .ns-v-finestra:focus-visible { flex-grow: 0; }
  .ns-v-finestre:hover .ns-v-finestra:not(:hover) video, .ns-v-finestre:hover .ns-v-finestra:not(:hover) > img { filter: none; }
}

/* ---- schermi piccoli ---- */
@media (max-width: 900px) {
  .ns-v-capi { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: .9em; padding-bottom: .4em; }
  .ns-v-capi::-webkit-scrollbar { display: none; }
  .ns-v-capo { flex: 0 0 42vw; max-width: 200px; scroll-snap-align: start; }
  .ns-v-capo-fondo { height: 40vw; max-height: 190px; margin-top: 84px; }
  .ns-v-novita ul.products { gap: 1em; }
  .ns-v-novita ul.products li.product { flex-basis: calc((100% - 1em) / 2.15); }
  .ns-v-frecce button { display: none; }
  .ns-v-riquadro, .ns-v-chi, .ns-v-promo { grid-template-columns: 1fr; }
  .ns-v-promo-img { width: min(70%, 15em); }
  .ns-v-riquadro-img { width: min(78%, 17em); }
  .ns-v-vetrina { min-height: 24em; }
  .ns-v-vetrina::after { background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .15) 70%); }
}

/* ---- chi preferisce meno movimento ---- */
@media (prefers-reduced-motion: reduce) {
  .ns-v *, .ns-v *::before, .ns-v *::after { animation: none !important; transition: none !important; }
  .ns-js .ns-v [data-vedi] { opacity: 1; transform: none; }
  .ns-v-chi-foto img { transform: none; }
  .ns-v-striscia, .ns-v-marchi { overflow-x: auto; }
}