/* 777 Store · rebranding "Nero laccato" (28/10/2026)
   Richiesto dal titolare: più minimal e più lussuoso, sul nero, sul riferimento di Lossantos (Savona).
   Nero lucido come una lacca (riflessi e un bagliore dall'alto), cromo argento come il logo, titoli corsivi larghi.
   Si carica DOPO stile.css: le funzioni e le classi restano le stesse, cambia solo il vestito. */
:root {
  --lacca: #030303;
  --lacca-piano: linear-gradient(180deg, #1a1a1c 0%, #0b0b0c 34%, #030303 70%, #070708 100%);
  --lacca-tasto: linear-gradient(180deg, #2b2b2e 0%, #121213 48%, #050505 52%, #0c0c0d 100%);
  --riflesso: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.02) 54%, transparent 62%);
  --bordo: #232325;
  --bordo-chiaro: #3a3a3d;
  --cromo-lucido: linear-gradient(180deg, #ffffff 0%, #f1f1f1 22%, #b9b9bb 46%, #6f6f73 52%, #d8d8da 68%, #ffffff 100%);
  --argento: linear-gradient(180deg, #fbfbfb 0%, #dcdcde 40%, #a7a7aa 52%, #ececee 100%);
  --bianco-lucido: linear-gradient(180deg, #ffffff 0%, #f3f3f3 45%, #c9c9cc 100%);
  --grigio: #8e8e93;
  --bianco: #f2f2f2;
  --accento: #f2f2f2;
  --f-logo: 'Archivo', system-ui, sans-serif;
  --f-titoli: 'Archivo', system-ui, sans-serif;
  --f-motto: 'Inter', system-ui, sans-serif;
  --f-testo: 'Inter', system-ui, sans-serif;
}
body {
  background:
    radial-gradient(1400px 520px at 50% -260px, rgba(255,255,255,.075), transparent 70%) no-repeat,
    var(--lacca);
  color: var(--bianco); font: 400 15px/1.6 var(--f-testo); letter-spacing: .005em;
}
body::after { display: none; }                     /* niente grana: il nero è lucido */
.scintilla, .scia { display: none !important; }   /* niente brillantini */
::selection { background: #fff; color: #000; }
:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

/* ---------- testi ---------- */
.cromo, .iced {
  background: var(--cromo-lucido); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: none; filter: none;
}
.brillo { color: #fff; text-shadow: none; }
.motto { font: 500 11px/1.4 var(--f-motto); letter-spacing: .32em; text-transform: uppercase; font-style: normal; color: var(--grigio); }
.titolo-xl, .titolo-l, .titolo-m {
  font-family: var(--f-titoli); font-style: italic; font-weight: 900; font-stretch: 125%; letter-spacing: -.01em; line-height: .9;
  background: var(--bianco-lucido); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.titolo-xl .cromo, .titolo-l .cromo, .titolo-m .cromo, .titolo-xl .iced, .titolo-l .iced, .titolo-m .iced { background: var(--cromo-lucido); -webkit-background-clip: text; background-clip: text; }
.occhio { font: 500 11px/1 var(--f-testo); letter-spacing: .32em; color: var(--grigio); }
.occhio::before { width: 26px; height: 1px; background: #6d6d70; }
.piccolo-grigio { color: var(--grigio); }

/* ---------- la riga in alto: ferma, sottile, su lacca ---------- */
.demo-nota { background: #0a0a0b; color: #8e8e93; border-bottom: 1px solid var(--bordo); }
.demo-nota b { color: #fff; }
.striscia { background: linear-gradient(180deg, #121213, #070707); animation: none; border-bottom: 1px solid var(--bordo); color: #cfcfd1; }
.striscia-nastro { animation: none; width: auto; justify-content: center; }
.striscia span { font: 500 10.5px/1 var(--f-testo); letter-spacing: .26em; text-shadow: none; padding: 10px 16px; color: #bdbdc0; }
.striscia span::after { content: none; }
.striscia span + span::before { content: '·'; margin-right: 32px; color: #555; }
.striscia span:nth-child(n+7), .striscia span:nth-child(2), .striscia span:nth-child(6) { display: none; }

/* ---------- testata in lacca ---------- */
.testata { background: linear-gradient(180deg, rgba(24,24,26,.9), rgba(5,5,5,.92)); }
.testata::after { height: 1px; animation: none; background: linear-gradient(90deg, transparent, #4a4a4e 20%, #8a8a8e 50%, #4a4a4e 80%, transparent); }
.testata::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: rgba(255,255,255,.06); }
.marchio b { font: 300 22px/1 var(--f-logo); font-stretch: 125%; letter-spacing: .01em; }
.marchio .tigrino { border: 1px solid #5a5a5e; box-shadow: 0 0 0 3px #000, 0 0 0 4px #2a2a2c; filter: grayscale(1) contrast(1.1); }
.naviga a { font: 500 11.5px/1 var(--f-testo); letter-spacing: .18em; color: #bdbdc0; padding: 10px 13px; transition: color .3s; }
.naviga a:hover, .naviga a[aria-current] { color: #fff; }
.naviga a::after { height: 1px; bottom: 1px; background: #fff; }
.naviga a.drop-voce { color: #fff; }
.naviga a.drop-voce::before { width: 5px; height: 5px; background: #fff; box-shadow: none; animation: pulsa 2.4s infinite; }
.icona svg { stroke-width: 1.3; }
.icona:hover svg { color: #fff; }
.icona .conta { background: #fff; color: #000; box-shadow: none; font: 600 10.5px/18px var(--f-testo); }

/* menu del telefono */
.menu-mob { background: radial-gradient(900px 400px at 50% -160px, rgba(255,255,255,.08), transparent 70%), #030303; }
.menu-mob::before { filter: grayscale(1); opacity: .12; }
.menu-mob nav a { font: 300 clamp(30px, 9vw, 46px)/1 var(--f-titoli); font-stretch: 125%; border-bottom-color: var(--bordo); padding: 12px 0; }
.menu-mob nav a small { font: 500 10px/1 var(--f-testo); letter-spacing: .2em; color: var(--grigio); }
.menu-mob .menu-piccolo a { border-bottom: 1px solid #555; font-weight: 400; }

/* ---------- bottoni: lacca e cromo, angoli vivi ---------- */
.bott {
  background: var(--lacca-tasto); color: #fff; clip-path: none; border-radius: 0;
  font: 600 11.5px/1 var(--f-testo); letter-spacing: .2em; min-height: 52px; padding: 0 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.6), 0 0 0 1px var(--bordo-chiaro), 0 12px 30px rgba(0,0,0,.5);
  transition: box-shadow .3s, transform .15s, filter .3s;
}
.bott:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px #6a6a6e, 0 14px 34px rgba(0,0,0,.6); }
.bott-tigre, .bott.bott-tigre { background: var(--argento); color: #050505; text-shadow: none; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #9a9a9e, 0 12px 30px rgba(0,0,0,.5); }
.bott.bott-tigre:hover { background: var(--argento); filter: brightness(1.06); }
.bott-tigre:hover { filter: brightness(1.06); }
.bott-vuoto { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #6a6a6e; }
.bott-vuoto:hover { background: #fff; color: #000; }
.bott-piccolo { min-height: 40px; padding: 0 16px; font-size: 10.5px; }
.link-freccia { font-weight: 500; border-bottom: 1px solid #8a8a8e; }
.link-mappa { border-bottom: 1px solid #8a8a8e; font-weight: 500; }
.link-mappa:hover { color: #fff; border-color: #fff; }

/* ---------- intro: il logo cromato che si accende, una volta ---------- */
.intro { background: radial-gradient(900px 420px at 50% 30%, rgba(255,255,255,.07), transparent 70%), #000; }
/* (giro 2: la slot di apertura è tornata, vedi in fondo) */
.intro-logo { margin: 0; font: 300 clamp(46px, 11vw, 150px)/1 var(--f-titoli); font-stretch: 125%; letter-spacing: -.01em;
  background: linear-gradient(105deg, #5d5d61 0%, #5d5d61 38%, #ffffff 50%, #5d5d61 62%, #5d5d61 100%) 0 0 / 280% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: accende 1.5s cubic-bezier(.3,.6,.2,1) forwards;
  -webkit-box-reflect: below -.12em linear-gradient(transparent 62%, rgba(255,255,255,.16)); }
.intro.vinto .intro-logo { background-image: var(--cromo-lucido); background-size: 100% 100%; transition: background .4s; }
@keyframes accende { from { background-position: 100% 0; opacity: .2; } to { background-position: 0 0; opacity: 1; } }

/* ---------- apertura della home: piano di lacca ---------- */
.apertura {
  background:
    radial-gradient(70% 55% at 30% 0%, rgba(255,255,255,.08), transparent 70%),
    linear-gradient(180deg, #0c0c0d 0%, #000 58%, #070708 100%);
}
.apertura::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #3d3d40, transparent); }
.apertura h1 .riga1 { font: 500 12px/1 var(--f-testo); letter-spacing: .4em; text-transform: uppercase; color: var(--grigio); margin-bottom: 18px; }
.apertura h1 .riga2 { font: 300 clamp(110px, 18vw, 280px)/.8 var(--f-titoli); font-stretch: 125%; letter-spacing: -.035em;
  -webkit-box-reflect: below -.06em linear-gradient(transparent 64%, rgba(255,255,255,.2)); }
.apertura-sotto { color: #b9b9bc; margin: 54px 0 30px; font-size: 16px; }
.apertura-sotto b { color: #fff; font-weight: 500; }
.apertura-tigre img { filter: grayscale(1) contrast(1.12) brightness(.85); }
.apertura-tigre .alone { display: none; }
.stato-testo { font-weight: 600; font-size: 14px; }

/* ---------- sezioni ---------- */
.sezione-testa p { color: #a9a9ac; }
.fascia-gemme, .fascia-tigre {
  background: radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.07), transparent 70%), linear-gradient(180deg, #0e0e0f 0%, #020202 60%, #080809 100%);
  animation: none; color: var(--bianco);
}
.drop-box { background: var(--lacca-piano); clip-path: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px var(--bordo), 0 40px 80px rgba(0,0,0,.6); position: relative; overflow: hidden; }
.drop-box::before { content: ''; position: absolute; inset: 0; background: var(--riflesso); pointer-events: none; }
.drop-dx { background: #050505; gap: 1px; }
.conto b { font: 300 clamp(32px, 4.6vw, 58px)/1 var(--f-titoli); font-stretch: 125%; background: var(--lacca-tasto); border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px var(--bordo-chiaro); padding: 12px 10px; }
.conto small { font: 500 9.5px/1 var(--f-testo); letter-spacing: .24em; color: var(--grigio); }
.sagoma { background: radial-gradient(circle at 50% 30%, #1d1d1f, #050505 75%); }
.sagoma .capo-svg { filter: brightness(0) drop-shadow(0 0 1px rgba(255,255,255,.35)); }
.sagoma::after { font: 300 46px/1 var(--f-titoli); font-stretch: 125%; color: #fff; text-shadow: none; opacity: .75; }

/* lui / lei */
.porte { background: #000; gap: 1px; }
.porta-lui, .porta-lei { background: radial-gradient(60% 50% at 50% 30%, #1d1d1f, #030303 75%); }
.porta::after { content: ''; position: absolute; inset: 0; background: var(--riflesso); pointer-events: none; }
.porta .motto { color: var(--grigio); font-size: 11px; }
.porta .freccia { background: var(--argento); clip-path: none; width: 52px; height: 52px; font: 400 20px var(--f-testo); }

/* ---------- capi su piano lucido, con il riflesso sotto ---------- */
.capo { background: #070707; box-shadow: 0 0 0 1px var(--bordo); }
.capo-foto { background: radial-gradient(80% 60% at 50% 18%, #1e1e20, #070707 70%), #050505; }
.capo-foto::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
.capo-foto .capo-svg { filter: drop-shadow(0 0 1px rgba(255,255,255,.32)) drop-shadow(0 16px 18px rgba(0,0,0,.7)); -webkit-box-reflect: below 2px linear-gradient(transparent 72%, rgba(255,255,255,.12)); }
.capo-foto::before { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.08) 47%, transparent 54%); }
.capo-info { padding: 14px 14px 16px; }
.capo-marca { font: 500 10px/1.2 var(--f-testo); letter-spacing: .24em; color: var(--grigio); }
.capo-nome { font-weight: 500; }
.capo-prezzo { font: 500 15px/1.1 var(--f-testo); letter-spacing: .04em; }
.capo-taglie span { font: 500 10px/1 var(--f-testo); border-color: #2c2c2f; color: #bdbdc0; }
.capo-taglie span.mia { border-color: #fff; color: #fff; }
.etichetta { background: rgba(10,10,10,.82); color: #fff; text-shadow: none; clip-path: none; font: 600 9.5px/1 var(--f-testo); letter-spacing: .22em; padding: 7px 10px; box-shadow: 0 0 0 1px #4a4a4e; backdrop-filter: blur(6px); }
.etichetta.ultimi { background: #fff; color: #000; box-shadow: none; }
.timbro-sold span { font: 600 13px/1 var(--f-testo); letter-spacing: .3em; color: #fff; border: 1px solid #fff; transform: none; background: rgba(0,0,0,.7); padding: 12px 18px; box-shadow: none; }

/* ---------- categoria e scheda ---------- */
.cat-testa .cat-tigre { filter: grayscale(1); opacity: .12; }
.cat-testa .motto { font-size: 11px; color: var(--grigio); margin-bottom: 10px; }
.filtri { background: linear-gradient(180deg, rgba(18,18,19,.94), rgba(5,5,5,.94)); border-bottom-color: var(--bordo); }
.filtri::after { background: linear-gradient(to right, transparent, rgba(5,5,5,.94)); }
.filtro { background: transparent; border-color: #333336; font: 500 11px var(--f-testo); letter-spacing: .14em; }
.filtro[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
select.filtro { background-color: transparent; }
.scheda .prezzo { font: 300 clamp(30px, 3.6vw, 42px)/1 var(--f-testo); letter-spacing: .02em; }
.blocco { border-top-color: var(--bordo); }
.blocco h3 { font: 500 11px/1 var(--f-testo); letter-spacing: .26em; }
.taglia { background: var(--lacca-tasto); border-color: #2e2e31; font-weight: 600; }
.taglia[aria-pressed="true"] { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; background: #121213; }
.taglia small.poche { color: #fff; }
.taglia .consiglio-bollo { background: #fff; color: #000; text-shadow: none; font: 600 8.5px/1 var(--f-testo); letter-spacing: .12em; }
.consiglio { background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0)); border-left: 1px solid #fff; }
.consiglio svg { color: #fff; }
.veste span.si { background: #fff; }
.scheda-foto .miniature div { background: #0b0b0b; border-color: var(--bordo); }

/* ---------- finestre e avvisi ---------- */
.foglio { background: var(--lacca-piano); clip-path: none; border: 1px solid var(--bordo-chiaro); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 90px rgba(0,0,0,.8); }
.foglio::before { height: 1px; right: 0; background: linear-gradient(90deg, transparent, #a9a9ad, transparent); }
.foglio h2 { font: 300 26px/1 var(--f-titoli); font-stretch: 125%; }
.campo label, .campo .etic { font: 500 10.5px/1 var(--f-testo); letter-spacing: .2em; color: var(--grigio); }
.campo input, .campo select, .campo textarea { background: #0b0b0c; border-color: #2e2e31; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: #fff; }
.scelte button { background: #0b0b0c; border-color: #2e2e31; font-weight: 500; }
.scelte button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.ricevuta .codice { font: 300 30px/1 var(--f-titoli); font-stretch: 125%; border: 1px solid #8a8a8e; color: #fff; }
.avviso { background: var(--argento); clip-path: none; font-weight: 600; }

/* WhatsApp: stessa forma, in lacca nera */
.wa { background: var(--lacca-tasto); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px #4a4a4e, 0 14px 34px rgba(0,0,0,.6); }
.wa:hover { background: var(--lacca-tasto); filter: brightness(1.25); }
.wa svg { filter: none; width: 30px; height: 30px; }

/* ---------- slot dell'outfit: stessa funzione, mobile in lacca ---------- */
.slot { background: var(--lacca-piano); border-radius: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px var(--bordo-chiaro), 0 40px 80px rgba(0,0,0,.6); }
.slot::before { content: ''; position: absolute; inset: 0; background: var(--riflesso); pointer-events: none; }
.slot-luci { display: none; }
.slot-cartello b { font: 300 clamp(22px, 3vw, 34px)/1 var(--f-titoli); font-stretch: 125%; }
.slot-rullo { background: #050505; box-shadow: 0 0 0 1px var(--bordo-chiaro); }
.slot-rullo::after { background: linear-gradient(rgba(0,0,0,.6), transparent 20%, transparent 80%, rgba(0,0,0,.6)); }
.slot-nastro > div { background: radial-gradient(70% 55% at 50% 25%, #1f1f21, #060606 75%); }
.slot-nome { background: rgba(5,5,5,.86); backdrop-filter: blur(6px); }
.slot-nome b { font: 500 12px/1 var(--f-testo); color: #fff; }
.slot-blocca { background: transparent; border-color: #333336; font: 500 10px/1 var(--f-testo); letter-spacing: .2em; }
.slot-blocca[aria-pressed="true"] { background: #fff; color: #000; text-shadow: none; border-color: #fff; }
.leva .asta { width: 6px; margin-left: -3px; background: var(--argento); }
.leva .pomo { background: radial-gradient(circle at 35% 30%, #fff, #c9c9cc 45%, #5a5a5e 80%); box-shadow: 0 6px 16px rgba(0,0,0,.6); }
.leva .base { background: var(--lacca-tasto); border: 1px solid #5a5a5e; }
.slot-totale { border-top: 1px solid var(--bordo); }
.slot-totale .somma { font: 300 clamp(26px, 3.2vw, 38px)/1 var(--f-titoli); font-stretch: 125%; }
.slot-totale .sconto { color: #cfcfd1; font-weight: 500; }
.slot.vince { animation: none; }
.look { background: #070707; box-shadow: 0 0 0 1px var(--bordo); }
.look-capi div { background: radial-gradient(70% 55% at 50% 25%, #1c1c1e, #060606 75%); }
.look h3 { font: 300 18px/1.1 var(--f-titoli); font-stretch: 125%; }

/* ---------- gift card, club, negozio, piè ---------- */
.carta-regalo { background: var(--lacca-piano); box-shadow: 0 0 0 1px #3a3a3d, 0 30px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18); }
.carta-regalo::before { filter: grayscale(1); opacity: .35; }
.carta-regalo::after { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12) 45%, transparent 55%); background-size: 250% 100%; }
.carta-regalo .importo { font: 300 clamp(44px, 7vw, 64px)/1 var(--f-titoli); font-stretch: 125%; }
.carta-regalo .chip { background: var(--argento); }
.carta-regalo .per { font: 500 12px/1.4 var(--f-testo); letter-spacing: .24em; text-transform: uppercase; font-style: normal; }
.carta-regalo .codice-carta { font: 500 12px/1 var(--f-testo); }
.club-rulli div { background: var(--lacca-tasto); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px var(--bordo-chiaro); font: 300 clamp(54px, 10vw, 84px)/1 var(--f-titoli); font-stretch: 125%; color: #2c2c2f; }
.club-rulli div.preso { color: transparent; background: var(--lacca-tasto); text-shadow: none; }
.club-rulli div.preso { -webkit-text-fill-color: transparent; background-image: var(--cromo-lucido), var(--lacca-tasto); -webkit-background-clip: text, padding-box; background-clip: text, padding-box; }
.insegna img { box-shadow: 0 0 0 1px #4a4a4e, 0 0 0 8px #050505, 0 0 0 9px #2c2c2f, 0 40px 80px rgba(0,0,0,.7); }
.insegna { -webkit-box-reflect: below 18px linear-gradient(transparent 78%, rgba(255,255,255,.12)); }
.orari div { border-bottom-color: var(--bordo); }
.pie { background: var(--lacca-piano); border-top: 1px solid var(--bordo); }
.pie-grande { font: 300 clamp(44px, 11.4vw, 178px)/.85 var(--f-titoli); font-stretch: 125%; -webkit-box-reflect: below -.08em linear-gradient(transparent 66%, rgba(255,255,255,.12)); margin-bottom: 70px; }
.pie h6 { font: 500 10.5px/1 var(--f-testo); letter-spacing: .26em; color: var(--grigio); }
.firma { border-top-color: var(--bordo); }

/* ---------- pannello di Angelo ---------- */
.pannello-indice a { background: #0b0b0c; font-weight: 500; box-shadow: 0 0 0 1px var(--bordo); }
.pannello-indice a b { color: #fff; }
.registro { background: var(--lacca-piano); border-color: var(--bordo); }
.registro > h2 { font: 300 16px/1 var(--f-titoli); font-stretch: 125%; border-bottom-color: var(--bordo); }
.numeri div { background: #0b0b0c; border-left: 1px solid #fff; box-shadow: 0 0 0 1px var(--bordo); }
.numeri b { font: 300 28px/1 var(--f-titoli); font-stretch: 125%; }
.risultato-taglia { background: #0b0b0c; box-shadow: 0 0 0 1px var(--bordo); }
.risultato-taglia b { font: 300 44px/1 var(--f-titoli); font-stretch: 125%; color: #fff; }

@media (max-width: 860px) {
  .apertura-tigre { opacity: .42; }
  .apertura h1 .riga2 { font-size: clamp(96px, 30vw, 180px); }
  .striscia span:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-logo { animation: none; background-image: var(--cromo-lucido); background-size: 100% 100%; }
}
@media (max-width: 520px) {
  .marchio b { font-size: 17px; }
  .marchio svg.gruccia { width: 38px; }
  .icona { width: 38px; }
  .icone { gap: 0; }
}
@media (max-width: 400px) {
  .marchio svg.gruccia { display: none; }
}

/* ==================== Giro 2 (28/10 sera): più elegante ====================
   Scritte leggere invece del grassetto pieno, argento discreto, nero pieno e lucido,
   la slot machine di apertura come prima ma in versione nera e argento. */
:root {
  --cromo-lucido: linear-gradient(180deg, #f3f3f4 0%, #dadadc 42%, #b4b4b7 54%, #e6e6e8 100%);
  --argento: linear-gradient(180deg, #f1f1f2 0%, #d9d9db 50%, #c3c3c6 100%);
  --bianco-lucido: linear-gradient(180deg, #ffffff 0%, #ececed 60%, #cfcfd2 100%);
}
.titolo-xl, .titolo-l, .titolo-m { font-style: normal; font-weight: 300; font-stretch: 112%; letter-spacing: .03em; line-height: 1; }
.titolo-xl { font-size: clamp(48px, 9vw, 140px); }
.titolo-l { font-size: clamp(34px, 5.4vw, 80px); }
.titolo-m { font-size: clamp(24px, 3vw, 40px); }
.marchio b { font: italic 500 21px/1 var(--f-logo); font-stretch: 118%; letter-spacing: .04em; }
.bott, .bott-tigre, .bott.bott-tigre { font-weight: 500; letter-spacing: .24em; }
.bott-tigre, .bott.bott-tigre { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px #8d8d91, 0 10px 26px rgba(0,0,0,.5); }
.naviga a { font-weight: 400; }

/* apertura: un solo nero, pieno e lucido, da un lato all'altro */
.apertura { background: #000; }
.apertura::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 38%; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent); }
.apertura-tigre img { -webkit-mask-image: radial-gradient(ellipse 75% 72% at 58% 45%, #000 50%, transparent 92%); mask-image: radial-gradient(ellipse 75% 72% at 58% 45%, #000 50%, transparent 92%); }
.apertura h1 .riga2 { font: 200 clamp(110px, 17vw, 260px)/.85 var(--f-titoli); font-stretch: 118%; letter-spacing: .01em; }
.apertura h1 .riga1 { letter-spacing: .5em; font-weight: 400; }

/* il resto delle scritte grandi, leggere */
.menu-mob nav a, .foglio h2, .slot-cartello b, .look h3, .registro > h2 { font-weight: 300; font-stretch: 112%; letter-spacing: .04em; }
.conto b { font-weight: 200; font-stretch: 112%; }
.slot-totale .somma, .carta-regalo .importo, .numeri b, .risultato-taglia b, .ricevuta .codice { font-weight: 300; font-stretch: 112%; }
.club-rulli div { font-weight: 200; font-stretch: 112%; }
.pie-grande { font-weight: 200; font-stretch: 118%; letter-spacing: .02em; }
.sagoma::after { font-weight: 200; }

/* slot machine di apertura: rulli in lacca nera, 7 d'argento, cornice sottile */
.intro { background: #000; }
.intro-logo { display: none; }
.intro-rulli { display: flex; gap: clamp(8px, 1.6vw, 14px); padding: clamp(10px, 1.6vw, 14px); border-radius: 2px;
  background: linear-gradient(180deg, #161618, #050505); box-shadow: 0 0 0 1px #4a4a4e, 0 0 0 6px #000, 0 0 0 7px #2a2a2d, 0 30px 80px rgba(0,0,0,.8); }
.intro-rullo { background: linear-gradient(180deg, #0a0a0b 0%, #1b1b1d 50%, #0a0a0b 100%); border-radius: 1px; box-shadow: inset 0 0 0 1px #2c2c2f; }
.intro-rullo::after { background: linear-gradient(rgba(0,0,0,.75), transparent 30%, transparent 70%, rgba(0,0,0,.75)); }
.intro-nastro > div { font: 200 clamp(70px, 18vw, 160px)/1 var(--f-titoli); font-stretch: 112%; color: #d6d6d8; }
.intro-nastro > div.sette { color: transparent; text-shadow: none; background: var(--cromo-lucido); -webkit-background-clip: text; background-clip: text; }
.intro-nastro > div.simbolo svg { width: 52%; height: 52%; filter: grayscale(1) brightness(1.6); }
.intro-nastro > div.simbolo img { filter: grayscale(1); }
.intro-nastro > div.simbolo use { fill: #cfcfd2; }
.intro-scritta { font: 400 10.5px/1 var(--f-testo); letter-spacing: .4em; color: #6d6d71; }
.intro-jackpot .titolo-l { font-weight: 200; letter-spacing: .4em; margin-right: -.4em; font-size: clamp(26px, 4vw, 48px); }
.intro.vinto .intro-rulli { animation: vinto-elegante 1.2s ease-out 1; }
@keyframes vinto-elegante { 40% { box-shadow: 0 0 0 1px #d9d9dc, 0 0 0 6px #000, 0 0 0 7px #8d8d91, 0 0 60px rgba(255,255,255,.18); } }

/* ==================== Giro 3 (28/10): via di mezzo ====================
   Corsivi larghi come la prima versione, ma con uno spessore medio: eleganti, non massicci. */
.titolo-xl, .titolo-l, .titolo-m { font-style: italic; font-weight: 600; font-stretch: 125%; letter-spacing: 0; line-height: .92; }
.apertura h1 .riga2 { font: italic 600 clamp(110px, 17vw, 260px)/.82 var(--f-titoli); font-stretch: 125%; letter-spacing: -.02em; }
.marchio b { font: italic 600 21px/1 var(--f-logo); font-stretch: 125%; letter-spacing: .01em; }
.menu-mob nav a, .foglio h2, .slot-cartello b, .look h3, .registro > h2 { font-style: italic; font-weight: 600; font-stretch: 125%; letter-spacing: 0; }
.conto b, .slot-totale .somma, .carta-regalo .importo, .numeri b, .risultato-taglia b, .ricevuta .codice, .club-rulli div, .sagoma::after { font-style: italic; font-weight: 500; font-stretch: 125%; }
.pie-grande { font-style: italic; font-weight: 500; font-stretch: 125%; letter-spacing: -.01em; }
.intro-nastro > div { font-style: italic; font-weight: 500; font-stretch: 125%; }
.intro-jackpot .titolo-l { font-style: italic; font-weight: 500; letter-spacing: .3em; }
@media (max-width: 520px) { .marchio b { font-size: 17px; } }

/* ==================== Giro 4 (28/10): semplice ====================
   Via la tigre dalla home e dalle pagine (resta solo il tondo nel piè di pagina).
   L'apertura è solo testo, centrato, senza aggiungere altro. */
.marchio .tigrino, .apertura-tigre, .cat-tigre, .insegna { display: none !important; }
.menu-mob::before, .carta-regalo::before { content: none; }
.apertura { grid-template-columns: 1fr; place-items: center; text-align: center; min-height: calc(100svh - 110px); }
.apertura::before { height: 45%; }
.apertura-testo { padding: 70px 16px 90px; max-width: 760px; margin: 0 auto; }
.apertura h1 .riga1 { margin: 0 -.5em 26px 0; }
.apertura h1 .riga2 { -webkit-box-reflect: below -.04em linear-gradient(transparent 70%, rgba(255,255,255,.14)); }
.apertura-sotto { margin: 56px auto 30px; max-width: 520px; line-height: 1.8; }
.apertura-bott { justify-content: center; }
.negozio { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.negozio .orari { margin-inline: auto; width: min(420px, 100%); text-align: left; }
.negozio [style*="display:flex"] { justify-content: center; }
.pie-testa { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); margin: 0 0 56px; }
.pie-testa .pie-grande { margin: 0; }
.pie-tigre { width: clamp(64px, 8vw, 112px); height: auto; aspect-ratio: 1; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px #4a4a4e, 0 0 0 6px #050505, 0 0 0 7px #2a2a2d; }
@media (max-width: 520px) { .pie-testa { gap: 14px; } .pie-tigre { width: 56px; } }
@media (max-width: 860px) { .pie-testa .pie-grande { font-size: 10.5vw; } }

/* ==================== Giro 5 (28/10): al computer su due colonne ====================
   Al telefono resta tutto centrato com'è. Dal computer in su il 777 sta a sinistra e grande,
   testo e bottoni a destra; la sezione del negozio fa lo stesso. Nessun elemento in più. */
@media (min-width: 861px) {
  .apertura { place-items: stretch; text-align: left; }
  .apertura-testo {
    width: var(--largo); max-width: none; margin: 0 auto; padding: 70px 0 90px;
    display: grid; grid-template-columns: 1.25fr .75fr; column-gap: clamp(40px, 6vw, 110px); align-content: center; align-items: end;
  }
  .apertura-testo h1 { grid-column: 1; grid-row: 1 / span 2; }
  .apertura h1 .riga1 { margin: 0 0 28px; }
  .apertura h1 .riga2 { font-size: clamp(160px, 21vw, 330px); }
  .apertura-sotto { grid-column: 2; grid-row: 1; margin: 0 0 30px; max-width: 420px; text-align: left; }
  .apertura-bott { grid-column: 2; grid-row: 2; justify-content: flex-start; align-self: start; padding-bottom: 6.5vw; }

  .negozio { justify-items: stretch; text-align: left; }
  .negozio > div { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: clamp(40px, 6vw, 110px); grid-auto-flow: dense; align-items: start; }
  .negozio > div > .occhio, .negozio > div > h2 { grid-column: 1; }
  .negozio > div > h2 { grid-row: 2 / span 5; align-self: start; }
  .negozio > div > :not(.occhio):not(h2) { grid-column: 2; }
  .negozio > div > p:first-of-type:not(.occhio) { margin-top: 0; }
  .negozio .orari { margin: 0 0 18px; width: 100%; }
  .negozio [style*="display:flex"] { justify-content: flex-start; }
}

/* ==================== Giro 6 (28/10): l'argento dell'anteprima del link ====================
   Lo stesso argento spazzolato dell'immagine che si vede su WhatsApp, tenuto basso:
   menu, icone in alto a destra, JACKPOT, testo dell'apertura e titoli. */
:root {
  --argento-spazzolato: linear-gradient(100deg, #a9abb0 0%, #e9eaec 22%, #bfc1c5 42%, #f4f5f6 58%, #b3b5b9 78%, #dcdde0 100%);
  --argento-testo: #c6c8cc;
  --argento-chiaro: #e3e4e7;
}
.argentato, .naviga a, .titolo-xl, .titolo-l, .titolo-m, .intro-jackpot .titolo-l, .apertura h1 .riga2 {
  background: var(--argento-spazzolato); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.naviga a { -webkit-text-fill-color: transparent; }
.naviga a:hover, .naviga a[aria-current] { background-image: linear-gradient(100deg, #d5d7da, #ffffff 40%, #dfe0e3 70%, #ffffff); }
.naviga a::after { background: var(--argento-spazzolato); }
.naviga a.drop-voce::before { background: #d8d9dc; }
.icona { color: var(--argento-testo); }
.icona svg { color: var(--argento-testo); }
.icona:hover svg { color: #f2f3f4; }
.icona .conta { background: var(--argento-spazzolato); color: #050505; }
.marchio svg.gruccia use { color: var(--argento-testo); }
/* testo della parte alta della home */
.apertura h1 .riga1 { color: var(--argento-testo); }
.apertura-sotto { color: var(--argento-testo); }
.apertura-sotto b { color: var(--argento-chiaro); }
.apertura-sotto .link-mappa { color: var(--argento-chiaro); border-bottom-color: #8e9095; }
.striscia span { color: var(--argento-testo); }
/* titoli: argento appena accennato, con lo stesso riflesso dell'apertura */
.titolo-xl .cromo, .titolo-l .cromo, .titolo-m .cromo { background: var(--argento-spazzolato); -webkit-background-clip: text; background-clip: text; }

/* ===================== Giro 7 (29/10): foto in apertura, For Him/Her, carrello, titoli LES (ART)ISTS ===================== */
:root { --f-brand: 'Saira Condensed', 'Archivo', system-ui, sans-serif; }

/* titoli: bianchi, nel carattere squadrato e stretto del biglietto LES (ART)ISTS */
.titolo-xl, .titolo-l, .titolo-m, .foglio h2, .look h3, .menu-mob nav a, .slot-cartello b, .registro > h2, .testo-lungo h2, .pie-grande {
  font-family: var(--f-brand) !important; font-style: normal !important; font-weight: 700 !important; font-stretch: normal !important;
  letter-spacing: .01em !important; text-transform: uppercase;
  background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: none !important;
}
.titolo-xl { line-height: .9; }
.titolo-l, .titolo-m { line-height: .95; }
.titolo-xl .cromo, .titolo-l .cromo, .titolo-m .cromo, .titolo-xl .iced, .titolo-l .iced, .titolo-m .iced, .titolo-l .motto { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.pie-grande { -webkit-box-reflect: none; }
.registro > h2 { font-size: 18px !important; }

/* testata senza gruccia */
.marchio svg.gruccia { display: none !important; }

/* striscia in alto: i marchi */
.striscia span:nth-child(n) { display: inline-block; }
@media (max-width: 860px) { .striscia span:nth-child(n+4) { display: none; } }

/* ---------- vetrina: foto grande che cambia + quadrati sotto ---------- */
.vetrina { background: #000; padding: 0 0 clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--bordo); }
.vetrina-grande { position: relative; height: min(78svh, 860px); min-height: 420px; overflow: hidden; background: #050505; touch-action: pan-y; user-select: none; }
.vetrina-strato { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.vetrina-strato.su { opacity: 1; }
.vetrina-strato img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vetrina-strato img.bg { object-fit: cover; filter: blur(38px) brightness(.45) saturate(.8); transform: scale(1.15); }
.vetrina-strato img.fg { object-fit: contain; }
.vetrina-strato.su img.fg { animation: vetrina-zoom 6s ease-out both; }
@keyframes vetrina-zoom { from { transform: scale(1.04); } to { transform: scale(1); } }
.vetrina-freccia { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font: 300 28px/1 var(--f-testo); cursor: pointer; backdrop-filter: blur(6px); }
.vetrina-freccia.prima { left: 16px; } .vetrina-freccia.dopo { right: 16px; }
.vetrina-freccia:hover { background: rgba(0,0,0,.6); border-color: #fff; }
.vetrina-mini { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; padding: 6px max(16px, (100vw - 1320px) / 2) 2px; scrollbar-width: none; }
.vetrina-mini::-webkit-scrollbar { display: none; }
.vetrina-mini button { flex: none; width: clamp(84px, 9vw, 128px); aspect-ratio: 1; padding: 0; border: 0; background: #111; cursor: pointer; scroll-snap-align: center; opacity: .5; transition: opacity .3s; position: relative; }
.vetrina-mini button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vetrina-mini button[aria-current="true"] { opacity: 1; }
.vetrina-mini button[aria-current="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; }
.vetrina-mini button:hover { opacity: .85; }
.vetrina-testo { width: var(--largo, min(1320px, calc(100% - 32px))); margin: clamp(26px, 4vw, 44px) auto 0; display: grid; gap: 18px; justify-items: center; text-align: center; }
.vetrina-frase { margin: 0; max-width: 760px; font: 400 clamp(18px, 1.7vw, 22px)/1.55 var(--f-testo); color: #ececee; }
.vetrina-info { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; font-size: 15px; color: var(--argento-testo); }
.vetrina-info .link-mappa { color: #fff; border-bottom: 1px solid #8e9095; text-decoration: none; }
.vetrina .apertura-bott { justify-content: center; }
@media (max-width: 860px) {
  .vetrina-grande { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .vetrina-strato img.fg { object-fit: cover; }
  .vetrina-freccia { display: none; }
  .vetrina .apertura-bott { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .vetrina .apertura-bott .bott:first-child { grid-column: 1 / -1; }
}

/* ---------- striscia dei marchi in home ---------- */
.marche { overflow: hidden; border-bottom: 1px solid var(--bordo); background: #050505; }
.marche-nastro { display: flex; width: max-content; animation: nastro 30s linear infinite; }
.marche-nastro span { padding: 22px clamp(28px, 4vw, 60px); font: 700 clamp(22px, 2.6vw, 34px)/1 var(--f-brand); text-transform: uppercase; letter-spacing: .02em; color: #fff; white-space: nowrap; }
.marche-nastro span::after { content: '·'; margin-left: clamp(28px, 4vw, 60px); color: #555; }
@media (prefers-reduced-motion: reduce) { .marche-nastro { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* ---------- For Him/Her: tre foto in apertura ---------- */
.trittico { position: relative; }
.trittico-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: min(70svh, 720px); }
.trittico-foto figure { position: relative; margin: 0; overflow: hidden; background: #0b0b0b; }
.trittico-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.trittico-foto figure:hover img { transform: scale(1.04); }
.trittico-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 18px 18px; background: linear-gradient(transparent, rgba(0,0,0,.75)); font: 700 clamp(16px, 1.8vw, 24px)/1 var(--f-brand); text-transform: uppercase; color: #fff; letter-spacing: .04em; }
.trittico-testo { padding: clamp(30px, 5vw, 60px) 0 10px; }
.trittico-testo .motto { display: block; font-size: 11px; color: var(--grigio); margin-bottom: 10px; }
.trittico-testo p { color: #c9c9cc; max-width: 560px; margin: 18px 0 0; font-size: 16px; }
@media (max-width: 860px) {
  .trittico-foto { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: 46svh 30svh; }
  .trittico-foto figure:first-child { grid-row: 1; grid-column: 1 / -1; }
}

/* ---------- filtri: tendine scure, niente bordo bianco doppio ---------- */
.tendina { display: inline-flex; flex: none; }
select.filtro { color-scheme: dark; background-color: #0b0b0c !important; color: #e8e8ea; border: 1px solid #333336; border-radius: 0; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; }
select.filtro:focus, select.filtro:focus-visible, select.filtro:active { outline: none; border-color: #8e9095; box-shadow: none; }
select.filtro.attivo { border-color: #fff; color: #fff; }
select.filtro option { background: #0b0b0c; color: #e8e8ea; }

/* ---------- la slot: due rulli, taglia sotto ogni capo ---------- */
.slot { padding: clamp(16px, 3vw, 34px); }
.slot-corpo { display: grid; grid-template-columns: 1fr 64px; gap: clamp(10px, 2vw, 26px); align-items: stretch; }
.slot-finestre { grid-template-columns: repeat(2, 1fr) !important; gap: clamp(8px, 1.6vw, 18px); max-width: 640px; margin: 0 auto; width: 100%; }
.slot-colonna { min-width: 0; }
.slot-etichetta { margin: 0 0 8px; font: 500 10.5px/1 var(--f-testo); letter-spacing: .24em; text-transform: uppercase; color: var(--grigio); }
.slot-rullo { aspect-ratio: 3 / 4; }
.slot-nome { position: static !important; background: none !important; backdrop-filter: none !important; padding: 10px 0 0 !important; min-height: 46px !important; font-size: 13px; line-height: 1.3; }
.slot-nome a { color: #fff; text-decoration: none; }
.slot-nome b { margin-top: 4px; }
.slot-taglie { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; min-height: 36px; }
.slot-taglie button { min-width: 36px; height: 34px; padding: 0 6px; background: #0b0b0c; border: 1px solid #2e2e31; color: #e8e8ea; font: 500 12px/1 var(--f-testo); cursor: pointer; }
.slot-taglie button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.slot-taglie button:disabled { opacity: .28; cursor: default; text-decoration: line-through; }
.slot .leva { position: relative !important; inset: auto !important; margin: 0 !important; width: 64px !important; height: auto !important; min-height: 240px; align-self: center; }
.slot .leva .asta { left: 50% !important; bottom: 10% !important; width: 6px !important; height: 70% !important; margin: 0 0 0 -3px !important; transform-origin: bottom center !important; }
.slot .leva .pomo { left: 50% !important; right: auto !important; top: -14px !important; margin: 0 0 0 -18px !important; }
.slot .leva .base { display: block !important; }
.slot .leva.tirata .asta { transform: scaleY(-.4) !important; }
.slot-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .slot { padding: 14px 12px 16px !important; }
  .slot-corpo { grid-template-columns: 1fr 40px; gap: 8px; }
  .slot .leva { width: 40px !important; min-height: 200px; }
  .slot .leva .pomo { width: 30px; height: 30px; margin-left: -15px !important; }
  .slot .leva .base { width: 24px; height: 24px; margin-left: -12px; }
  .slot-blocca { min-height: 36px; letter-spacing: .14em; }
  .slot-totale { flex-direction: column; align-items: stretch; text-align: center; }
  .slot-azioni { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------- scheda del capo: info del modello e guida alle taglie ---------- */
.info-modello { display: flex; gap: 10px; align-items: center; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--bordo); font-size: 14px; color: #d7d7da; }
.info-modello svg { width: 22px; height: 22px; flex: none; color: var(--argento-testo); }
.info-modello b { color: #fff; }
.tabella-taglie { overflow-x: auto; margin: 6px 0 12px; }
.tabella-taglie table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella-taglie th { text-align: left; font: 500 10.5px/1.3 var(--f-testo); letter-spacing: .14em; text-transform: uppercase; color: var(--grigio); padding: 10px 8px; border-bottom: 1px solid #333; }
.tabella-taglie td { padding: 10px 8px; border-bottom: 1px solid #1f1f22; color: #8a8a8e; }
.tabella-taglie tr.qui td { color: #fff; }
.tabella-taglie tr.qui td:first-child { font-weight: 600; }
.come-misurare { padding-left: 18px; color: #bdbdc0; font-size: 14px; line-height: 1.7; }

/* ---------- carrello e acquisto ---------- */
.conto-ordine { border: 1px solid var(--bordo); padding: 14px 16px; margin: 10px 0 14px; display: grid; gap: 8px; font-size: 14.5px; }
.conto-ordine > div { display: flex; justify-content: space-between; gap: 10px; color: #cfcfd2; }
.conto-ordine .totale { border-top: 1px solid var(--bordo); padding-top: 10px; color: #fff; font-weight: 600; font-size: 17px; }
.spunta { display: flex; gap: 10px; align-items: center; margin: 4px 0 12px; font-size: 14.5px; cursor: pointer; }
.spunta input { width: 18px; height: 18px; accent-color: #fff; }
.campo-tre { display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 8px; }
.riepilogo-righe .riepilogo { margin-bottom: 8px; }
@media (max-width: 420px) { .campo-tre { grid-template-columns: 1fr 1fr; } .campo-tre .campo:first-child { grid-column: 1 / -1; } }

/* ---------- negozio: mappa al posto dell'indirizzo grande ---------- */
.negozio2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 5vw, 80px); align-items: center; }
.mappa { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--bordo-chiaro); overflow: hidden; background: #111; }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }
.negozio2 .orari { margin: 18px 0; }
@media (max-width: 860px) { .negozio2 { grid-template-columns: 1fr; } .mappa { aspect-ratio: 1; } }

/* ---------- collab ---------- */
.collab { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; padding: clamp(30px, 5vw, 60px) 0; border-bottom: 1px solid var(--bordo); }
.collab.girata .collab-foto { order: 2; }
.collab-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.collab-testo p { color: #cfcfd2; font-size: 17px; max-width: 460px; }
.collab-lancio { display: grid; grid-template-columns: minmax(120px, 260px) 1fr; gap: clamp(18px, 4vw, 50px); align-items: center; text-decoration: none; color: inherit; border: 1px solid var(--bordo); padding: clamp(12px, 2vw, 20px); }
.collab-lancio img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.collab-lancio > span { display: grid; gap: 14px; justify-items: start; }
@media (max-width: 860px) { .collab { grid-template-columns: 1fr; } .collab.girata .collab-foto { order: 0; } }

/* ---------- post Instagram del drop ---------- */
.griglia-post { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 22px; }
.post-ig { background: #fff; border-radius: 4px; overflow: hidden; }
.post-ig iframe { display: block; width: 100%; height: 620px; border: 0; }

/* ---------- pagine di testo (privacy, resi) ---------- */
.testo-lungo { max-width: 760px; padding: clamp(40px, 6vw, 80px) 0 100px; }
.testo-lungo h2 { font-size: clamp(22px, 2.4vw, 30px) !important; margin: 40px 0 10px; }
.testo-lungo p, .testo-lungo li { color: #cfcfd2; font-size: 16px; line-height: 1.7; }
.testo-lungo b { color: #fff; font-weight: 600; }
.testo-lungo a { color: #fff; }
.da-completare { background: #2a2a12; color: #f1e7a1; padding: 0 4px; }

/* ---------- piè: firma DMA al centro, sopra lo spazio del tasto WhatsApp ---------- */
.firma { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; padding-bottom: 96px; }
.firma-dma { flex-direction: column; gap: 6px; }

/* ---------- WhatsApp: tondo ---------- */
.wa { clip-path: none !important; border-radius: 50% !important; width: 58px; height: 58px; overflow: hidden; }

/* ritocchi dopo la prova */
.trittico-foto figure:first-child img { object-position: 50% 12%; }
@media (max-width: 860px) { .slot-azioni .bott, .vetrina .apertura-bott .bott { letter-spacing: .12em; padding: 0 10px; } .slot-taglie button { min-width: 34px; height: 32px; } }

/* ===================== Giro 8 (29/10): tre foto in apertura, griglia più fitta, pagina drop con foto ===================== */

/* apertura: un blocco unico di tre foto che cambiano da sole (al telefono una sola, grande) */
.vetrina-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; height: min(82svh, 880px); min-height: 460px; background: #000; }
.tre-foto { position: relative; overflow: hidden; background: #0b0b0b; }
.tre-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: 0; transition: opacity 1.1s ease, transform 6s ease-out; transform: scale(1.06); }
.tre-foto img.su { opacity: 1; transform: scale(1); }
@media (max-width: 860px) {
  .vetrina-tre { grid-template-columns: 1fr; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .tre-foto:not(:first-child) { display: none; }
}

/* griglia degli articoli: più fitta, schede più piccole, colonne sfalsate senza buchi in fondo */
.rulli-capi { gap: clamp(10px, 1.2vw, 16px); }
.rulli-capi .colonna { gap: clamp(10px, 1.2vw, 16px); will-change: auto; transform: none !important; }
.rulli-capi .colonna:nth-child(odd) { margin-top: 0; padding-bottom: 44px; }
.rulli-capi .colonna:nth-child(even) { margin-top: 44px; padding-bottom: 0; }
.rulli-capi .capo-info { padding: 10px 10px 12px; gap: 2px 8px; }
.rulli-capi .capo-marca { font-size: 9px; letter-spacing: .2em; }
.rulli-capi .capo-nome { font-size: 13px; line-height: 1.25; }
.rulli-capi .capo-prezzo { font-size: 13px; }
.rulli-capi .capo-taglie { gap: 3px; margin-top: 6px; }
.rulli-capi .capo-taglie span { font-size: 9.5px; padding: 3px 4px; }
.rulli-capi .etichetta { font-size: 8.5px; padding: 6px 8px; }
.capo-foto img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.capo:hover .capo-foto img { transform: scale(1.04); }
@media (max-width: 860px) {
  .rulli-capi { gap: 8px; }
  .rulli-capi .colonna { gap: 8px; }
  .rulli-capi .colonna:nth-child(odd) { padding-bottom: 28px; }
  .rulli-capi .colonna:nth-child(even) { margin-top: 28px; }
  .rulli-capi .capo-info { padding: 8px 8px 10px; grid-template-columns: 1fr; }
  .rulli-capi .capo-nome { font-size: 12.5px; }
}
/* griglia semplice (drop passati) */
.rulli-capi.griglia-semplice { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* pagina Nuovo drop: titolo a sinistra, foto a destra */
.drop-vetrina { display: grid; grid-template-columns: minmax(260px, .7fr) 1.3fr; gap: clamp(20px, 4vw, 60px); width: var(--largo); margin: 0 auto; padding: clamp(36px, 5vw, 70px) 0 20px; align-items: start; }
.drop-titolo { position: sticky; top: 110px; }
.drop-titolo .titolo-xl { font-size: clamp(64px, 9vw, 150px); }
.drop-foto { column-count: 2; column-gap: 10px; }
.drop-foto figure { margin: 0 0 10px; break-inside: avoid; background: #0b0b0b; }
.drop-foto img { width: 100%; display: block; }
@media (max-width: 860px) {
  .drop-vetrina { grid-template-columns: 1fr; padding-top: 30px; }
  .drop-titolo { position: static; }
  .drop-foto { column-gap: 6px; }
  .drop-foto figure { margin-bottom: 6px; }
}

/* pannello: foto del drop */
.foto-drop-pannello { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.fd-voce { position: relative; border: 1px solid #333; }
.fd-voce img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.fd-azioni { display: grid; grid-template-columns: repeat(3, 1fr); }
.fd-azioni button { min-height: 34px; background: #111; border: 0; border-top: 1px solid #333; color: #eee; cursor: pointer; font-size: 15px; }
.fd-azioni button + button { border-left: 1px solid #333; }
.fd-azioni button:disabled { opacity: .3; cursor: default; }

/* ===================== Giro 9 (29/10): titoli tutti uguali, drop ordinato, collab più piccole ===================== */
/* un'unica misura per i titoli di pagine e sezioni, sempre su un rigo */
.titolo-xl, .titolo-l, .titolo-m { font-size: clamp(30px, 3.4vw, 46px) !important; line-height: 1 !important; }
.trittico-testo .titolo-xl, .drop-titolo .titolo-xl { font-size: clamp(30px, 3.4vw, 46px) !important; }
.sotto-titolo { margin: 34px 0 14px; font: 500 11px/1 var(--f-testo); letter-spacing: .26em; text-transform: uppercase; color: var(--grigio); }

/* Nuovo drop: titolo a sinistra, foto della stessa misura sfalsate a destra */
.drop-vetrina { grid-template-columns: minmax(180px, .38fr) 1.62fr; align-items: start; }
.drop-foto { column-count: auto !important; }
.drop-foto figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #0b0b0b; }
.drop-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 860px) { .drop-vetrina { grid-template-columns: 1fr; gap: 18px; } }

/* collab: foto più piccole */
.collab { grid-template-columns: minmax(180px, 320px) 1fr; justify-content: start; }
.collab.girata { grid-template-columns: 1fr minmax(180px, 320px); }
.collab-foto img { max-width: 320px; }
.collab-lancio { grid-template-columns: minmax(90px, 150px) 1fr; }
@media (max-width: 860px) {
  .collab, .collab.girata { grid-template-columns: 1fr; }
  .collab-foto img { max-width: 240px; }
}

/* ===================== Giro 10 (29/10): titoli via di mezzo, tutto bianco, logo nel font LES (ART)ISTS ===================== */
/* titoli delle pagine e delle sezioni principali: una misura sola, via di mezzo */
.titolo-xl, .titolo-l,
.trittico-testo .titolo-xl, .drop-titolo .titolo-xl { font-size: clamp(38px, 5.2vw, 72px) !important; line-height: .95 !important; }

/* tutte le scritte in bianco (niente più argento) */
:root { --argento-testo: #ffffff; --argento-chiaro: #ffffff; }
.naviga a, .naviga a:hover, .naviga a[aria-current] { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.naviga a::after { background: #fff !important; }
.icona, .icona svg, .icona:hover svg { color: #fff !important; }
.icona .conta { background: #fff !important; color: #000 !important; }
.striscia span, .vetrina-info, .vetrina-frase, .apertura-sotto { color: #fff !important; }
.occhio { color: #e9e9ea; }
.occhio::before { background: #fff; }

/* 777 STORE in testata: carattere LES (ART)ISTS, bianco */
.marchio b { font: 700 26px/1 var(--f-brand) !important; font-style: normal !important; letter-spacing: .02em !important; background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
@media (max-width: 520px) { .marchio b { font-size: 22px !important; } }

/* piè: 777 STORE nello stesso carattere, più piccolo e discreto */
.pie .pie-grande { font-family: var(--f-brand) !important; font-size: clamp(30px, 6vw, 92px) !important; color: #5f5f63 !important; -webkit-text-fill-color: #5f5f63 !important; letter-spacing: .01em !important; }
@media (max-width: 860px) { .pie .pie-testa .pie-grande { font-size: 11vw !important; } }

/* Nuovo drop: titolo sopra, foto sotto */
.drop-vetrina { grid-template-columns: 1fr !important; gap: 22px; }
.drop-titolo { position: static; }

/* 777 Club in home: allineato a sinistra come le altre sezioni */
.club-casa .club-rulli { justify-content: flex-start; }

/* ===================== Giro 11 (29/10): strisce dei titoli tutte a sinistra, stessa distanza ovunque ===================== */
.occhio { display: flex !important; justify-content: flex-start !important; text-align: left !important; margin: 0 0 16px !important; }
.occhio + h1, .occhio + h2, .occhio + .titolo-xl, .occhio + .titolo-l, .occhio + .titolo-m, .occhio + b { margin-top: 0 !important; }
.sezione-testa, .club-casa, .trittico-testo, .drop-titolo, .cat-testa .w, .ricevuta { text-align: left !important; }
.sezione-testa { justify-content: space-between !important; }
#rulli-club, .club-rulli { justify-content: flex-start !important; }
.collab-lancio > span { gap: 0; }
.collab-lancio > span .titolo-m { margin-bottom: 14px; }

/* piè: 777 STORE bianco */
.pie .pie-grande { color: #fff !important; -webkit-text-fill-color: #fff !important; }