/* ============================================================
   LumaLaser — sito vetrina
   Riferimento "Shop": schede grandi e molto arrotondate su fondo chiaro,
   ombre morbide, un solo colore acceso. Qui il fondo è l'avorio della
   bozza logo "su chiaro" e l'accento è il blu del raggio laser.
   Il raggio (linea + punto luminoso) è l'unico elemento "scenico":
   compare nel video iniziale e, in piccolo, nel logo e nei segnaposto.
   ============================================================ */

:root {
  --avorio: #F3EFE8;        /* fondo pagina */
  --carta: #FCFAF7;         /* schede */
  --inchiostro: #1B1F24;    /* testo, dal logo */
  --ardesia: #4A535E;       /* testo secondario, la scritta LASER del logo */
  --filo: #E3DACD;          /* bordi sottili */
  --laser: #0F62C8;         /* unico colore acceso, il raggio del logo */
  --laser-acceso: #1A72DD;
  --laser-chiaro: #8CC0FF;  /* raggio su fondo scuro */
  --alone: rgba(15, 98, 200, .34);

  --ombra: 0 1px 2px rgba(52, 40, 24, .06), 0 10px 28px -12px rgba(52, 40, 24, .22);
  --ombra-su: 0 2px 4px rgba(52, 40, 24, .07), 0 20px 40px -16px rgba(52, 40, 24, .32);

  --r-scheda: 28px;
  --r-foto: 20px;
  --r-pill: 9999px;

  --font-titoli: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-testo: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max: 1200px;
  --margine: clamp(1rem, 4vw, 2.5rem);
  --sezione: clamp(4.5rem, 10vw, 7.5rem);
  --testata-h: 72px;

  /* Colori del logo SVG (cambiano sopra il video e nel piè di pagina) */
  --raggio: var(--laser);
  --logo-laser: var(--ardesia);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata-h) + 1rem);
}
body {
  margin: 0;
  background: var(--avorio);
  color: var(--inchiostro);
  font: 400 1rem/1.6 var(--font-testo);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
/* Foto e video: niente trascinamento sul desktop e niente menu "salva" con
   il dito premuto a lungo (insieme al blocco del tasto destro in comune.js).
   Non impedisce screenshot o download dal codice: la vera protezione è il
   logo dentro le foto (npm run filigrana). */
img, video { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; }
button { font: inherit; color: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--laser); outline-offset: 3px; border-radius: 8px; }

.solo-lettori {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: .75rem; top: -4rem; z-index: 100;
  padding: .65rem 1.1rem; border-radius: var(--r-pill);
  background: var(--inchiostro); color: #fff; text-decoration: none;
}
.salta:focus { top: .75rem; }

.ico { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Pulsanti (tutti a pillola) ── */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: 0 1.4rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: 500 .9375rem/1 var(--font-testo); letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.pulsante:active { transform: scale(.98); }
.pulsante--laser { background: var(--laser); color: #fff; box-shadow: 0 4px 24px var(--alone); }
.pulsante--laser:hover { background: var(--laser-acceso); box-shadow: 0 6px 30px rgba(15, 98, 200, .46); }
.pulsante--vetro {
  background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pulsante--vetro:hover { background: rgba(255, 255, 255, .22); }
.pulsante--chiaro { background: var(--carta); color: var(--inchiostro); border-color: var(--filo); box-shadow: 0 2px 8px rgba(52, 40, 24, .06); }
.pulsante--chiaro:hover { border-color: #CDBFAD; }
.pulsante--piccolo { min-height: 40px; padding: 0 1rem; font-size: .875rem; }
/* Contatto non ancora impostato (si vede solo in locale) */
.pulsante.in-arrivo { background: transparent; color: var(--ardesia); border: 1px dashed #BFB2A1; box-shadow: none; cursor: default; }
.pulsante.in-arrivo:active { transform: none; }

/* ── Testata ── */
.testata {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--testata-h);
  color: var(--inchiostro);
  background: rgba(243, 239, 232, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(227, 218, 205, .9);
  transition: background-color .3s, color .3s, border-color .3s;
}
.testata--trasparente {
  color: #fff; background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  --raggio: var(--laser-chiaro);
  --logo-laser: rgba(255, 255, 255, .78);
}
.testata-dentro {
  height: 100%; max-width: calc(var(--max) + 2 * var(--margine)); margin: 0 auto;
  padding: 0 var(--margine); display: flex; align-items: center; gap: .6rem;
}
.testata-logo { margin-right: auto; padding: 6px 4px 6px 0; border-radius: 8px; }
.logo { width: 90px; height: 36px; }
@media (min-width: 900px) { .testata .logo { width: 105px; height: 42px; } }
.testata-nav { display: none; }
.testata-nav a { padding: .5rem 0; font-size: .9375rem; text-decoration: none; opacity: .85; }
.testata-nav a:hover, .testata-nav a[aria-current="page"] { opacity: 1; }
.testata-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.testata-wa { width: 44px; min-height: 44px; padding: 0; }
.testata-wa .testo { display: none; }
.testata--trasparente .testata-wa { box-shadow: 0 4px 24px rgba(15, 98, 200, .5); }
.testata-menu {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer;
  opacity: .9;
}
@media (min-width: 900px) {
  .testata-nav { display: flex; gap: 2rem; margin-right: 1.25rem; }
  .testata-menu { display: none; }
  .testata-wa { width: auto; padding: 0 1.1rem; }
  .testata-wa .testo { display: inline; }
}

/* Menu a tutto schermo (telefono) */
.menu-mobile {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  padding: 0 var(--margine) calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--avorio); color: var(--inchiostro); overflow-y: auto;
}
.menu-mobile-testa { height: var(--testata-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
.menu-mobile nav { display: flex; flex-direction: column; margin-top: 1.5rem; }
.menu-mobile nav a {
  padding: .6rem 0; border-bottom: 1px solid var(--filo);
  font: 300 2rem/1.25 var(--font-titoli); letter-spacing: -0.03em; text-decoration: none;
}
.menu-mobile .pulsante { margin-top: 2rem; }
body.menu-aperto { overflow: hidden; }

/* ── Apertura con video ── */
.eroe {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; justify-content: center;
  background: #221C18; color: #fff;
}
/* Finché il video non c'è: una scena calda di sera, con una luce in basso
   dove nel video ci saranno la famiglia e il gatto. */
.eroe-segnaposto {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 55% 40% at 50% 76%, rgba(222, 178, 126, .42), transparent 70%),
    radial-gradient(ellipse 28% 24% at 84% 30%, rgba(255, 222, 176, .14), transparent 70%),
    linear-gradient(180deg, #2B241F 0%, #3B3029 58%, #241E1A 100%);
}
.eroe-segnaposto-nota {
  position: absolute; left: 50%; top: calc(var(--testata-h) + 1.25rem); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 2 * var(--margine)); text-align: center;
  font-size: .8125rem; color: rgba(255, 255, 255, .62); display: none;
}
.eroe.video-mancante .eroe-segnaposto-nota { display: block; }
.eroe-video {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
}
.eroe.video-pronto .eroe-video { opacity: 1; }
/* Velo scuro solo dove serve: in alto per il menu, in basso a destra per il testo */
.eroe-velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(18, 15, 13, .5) 0%, rgba(18, 15, 13, 0) 22%),
    radial-gradient(80% 70% at 100% 100%, rgba(18, 15, 13, .74) 0%, rgba(18, 15, 13, .38) 45%, rgba(18, 15, 13, 0) 78%);
}
/* Slogan e pulsanti in basso a destra, accanto al pulsante pausa/play:
   il centro del video (la famiglia, poi la polaroid incisa) resta libero. */
.eroe-testo {
  position: absolute; bottom: 1.5rem; right: calc(var(--margine) + 44px + .75rem);
  width: min(34rem, calc(100% - 2 * var(--margine) - 44px - .75rem));
  text-align: right;
  text-shadow: 0 1px 2px rgba(18, 15, 13, .35), 0 2px 22px rgba(18, 15, 13, .45); /* leggibile anche su zone chiare */
}
.eroe h1 {
  font: 300 clamp(2.25rem, 4.6vw, 3.5rem)/1.05 var(--font-titoli);
  letter-spacing: -0.035em; text-wrap: balance;
}
.eroe-sotto {
  max-width: 26rem; margin: .7rem 0 0 auto;
  font-size: clamp(.9375rem, 1.3vw, 1.0625rem); color: rgba(255, 255, 255, .88); text-wrap: pretty;
}
.eroe-azioni { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.eroe :focus-visible { outline-color: var(--laser-chiaro); }

/* Il raggio: scende e si ferma sopra la fine del titolo, come nel logo. */
.raggio {
  position: absolute; right: 0; bottom: calc(100% + 1.1rem);
  width: 2px; height: clamp(5rem, 22svh, 11rem);
  background: linear-gradient(180deg, rgba(140, 192, 255, 0) 0%, rgba(140, 192, 255, .5) 45%, #D6E8FF 100%);
  transform-origin: top; pointer-events: none;
}
.raggio::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: #EEF5FF;
  box-shadow: 0 0 0 3px rgba(140, 192, 255, .35), 0 0 18px 6px rgba(56, 140, 255, .75), 0 0 52px 16px rgba(15, 98, 200, .45);
}
@media (prefers-reduced-motion: no-preference) {
  .raggio { animation: raggio-scende .95s cubic-bezier(.3, .7, .2, 1) .15s both; }
  .raggio::after { animation: punto-acceso .55s ease-out 1s both; }
  .eroe-testo > :not(.raggio) { animation: testo-appare .9s cubic-bezier(.2, .7, .2, 1) both; }
  .eroe h1 { animation-delay: 1.05s; }
  .eroe-sotto { animation-delay: 1.2s; }
  .eroe-azioni { animation-delay: 1.35s; }
}
@keyframes sale-scorrendo { from { opacity: 0; transform: translateY(28px); } }
@keyframes raggio-scende { from { transform: scaleY(0); } }
@keyframes punto-acceso { from { opacity: 0; transform: scale(.2); } }
@keyframes testo-appare { from { opacity: 0; transform: translateY(10px); filter: blur(5px); } }

.eroe-pausa {
  position: absolute; right: var(--margine); bottom: 1.5rem;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .38); border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.eroe-pausa .ico { width: 18px; height: 18px; }

/* ── Collezione Natale: la tavola con il camino dietro le schede ──
   Il video (4 s in loop) copre tutta la sezione; il velo scurisce in alto
   per il titolo e in basso per le schede, il centro (fuoco e candele) resta
   libero. Sul telefono le schede scorrono di lato. */
.natale {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 52rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  margin-top: var(--sezione);
  padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(1.25rem, 3vw, 2.5rem);
  background: #1E1611 url('/media/natale/tavola-loop.jpg') 72% 50% / cover no-repeat;
  color: #fff;
}
@media (min-width: 900px) { .natale { min-height: min(56.25vw, 100svh); } }
.natale-video {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%;
}
.natale-velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(20, 14, 10, .78) 0%, rgba(20, 14, 10, .3) 34%, rgba(20, 14, 10, .08) 52%,
    rgba(20, 14, 10, .22) 68%, rgba(20, 14, 10, .7) 100%);
}
.natale-testa {
  width: 100%; max-width: calc(var(--max) + 2 * var(--margine)); margin: 0 auto;
  padding: 0 var(--margine);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  text-shadow: 0 1px 2px rgba(18, 15, 13, .35), 0 2px 22px rgba(18, 15, 13, .45);
}
.natale-occhiello {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .84);
}
/* Il punto del raggio laser, come nel logo */
.natale-occhiello::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #EEF5FF;
  box-shadow: 0 0 0 3px rgba(140, 192, 255, .3), 0 0 14px 4px rgba(56, 140, 255, .7);
}
.natale .titolo-sezione { max-width: 15ch; margin-top: .85rem; }
.natale-sotto { max-width: 29rem; margin-top: .75rem; color: rgba(255, 255, 255, .86); text-wrap: pretty; }
.natale .link-vai { margin-top: .9rem; color: #fff; }
.natale .link-vai:hover { color: var(--laser-chiaro); }
.natale :focus-visible { outline-color: var(--laser-chiaro); }
.natale-pausa {
  flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .38); border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.natale-pausa .ico { width: 18px; height: 18px; }
.natale-schede {
  display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 6px var(--margine) 12px; scroll-padding-inline: var(--margine);
  scrollbar-width: none; /* niente barra: si scorre trascinando, con il dito o il trackpad */
}
/* Bordo bianco sottile (4px): raggio della scheda = raggio della foto + 4px */
.natale-schede > .scheda {
  min-width: 0; scroll-snap-align: start; color: var(--inchiostro);
  padding: 4px; border-radius: 24px;
}
/* Testo centrato. Il nome ha sempre lo spazio di 2 righe (centrato lì dentro),
   così il prezzo sta alla stessa altezza in tutte le schede. */
.natale-schede .scheda-testo { padding: .6rem .5rem .45rem; align-items: center; text-align: center; gap: .2rem; }
.natale-schede .scheda-nome {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.6em; /* 2 righe da 1.3 */
}
.natale-schede .scheda-prezzo { font-weight: 500; color: var(--inchiostro); }
@media (max-width: 719px) {
  .natale-schede > .scheda { border-radius: 20px; }
  .natale-schede .scheda-testo { padding: .55rem .4rem .4rem; }
}
/* Con il mouse la fila si trascina (js/home.js): manina "afferra" quando scorre */
@media (hover: hover) and (pointer: fine) and (max-width: 1179px) { .natale-schede { cursor: grab; } }
.natale-schede::-webkit-scrollbar { display: none; }
.natale-schede.trascina { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.natale-schede.trascina * { cursor: grabbing; }
@media (min-width: 600px) { .natale-schede { grid-auto-columns: 30%; } }
@media (min-width: 900px) { .natale-schede { grid-auto-columns: 22%; gap: 16px; } }
/* Su schermo largo le sei schede stanno tutte in fila, senza scorrere */
@media (min-width: 1180px) {
  .natale-schede {
    grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%; max-width: calc(var(--max) + 2 * var(--margine)); margin: 0 auto; overflow: visible;
  }
}

/* Collezione Cocktail: stesso stile, con il bar tiki di notte.
   Attaccata alla sezione Natale, così scorrendo si passa da un ambiente all'altro. */
.natale--cocktail { background-image: url('/media/cocktail/tiki-loop.jpg'); background-position: 50% 50%; }
.natale--cocktail .natale-video { object-position: 50% 50%; }
.natale + .natale { margin-top: 0; }
/* Passaggio morbido tra due collezioni attaccate: il fondo della prima e la
   cima della seconda sfumano nello stesso scuro (sul telefono: vedi in fondo). */
.natale:has(+ .natale)::after, .natale + .natale::before,
.eroe:has(+ .natale:not([hidden]))::after, .eroe + .natale::before {
  content: ''; position: absolute; left: 0; right: 0; height: 72px; z-index: -1; pointer-events: none;
}
.natale:has(+ .natale)::after, .eroe:has(+ .natale:not([hidden]))::after { bottom: 0; background: linear-gradient(180deg, transparent, #120D0A); }
.natale + .natale::before, .eroe + .natale::before { top: 0; background: linear-gradient(180deg, #120D0A, transparent); }
/* Anche il video iniziale è attaccato alla prima collezione, con la stessa sfumatura */
.eroe + .natale { margin-top: 0; }
@media (min-width: 1180px) {
  .natale--cocktail .natale-schede { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
}

/* ── Sezioni ── */
.sezione { max-width: calc(var(--max) + 2 * var(--margine)); margin: 0 auto; padding: var(--sezione) var(--margine) 0; }
.sezione-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.titolo-sezione { font: 400 clamp(1.75rem, 3.4vw, 2.5rem)/1.12 var(--font-titoli); letter-spacing: -0.035em; text-wrap: balance; }
.intro { max-width: 38rem; margin-top: .75rem; color: var(--ardesia); text-wrap: pretty; }
.link-vai {
  display: inline-flex; align-items: center; gap: .2rem; flex-shrink: 0;
  padding: .55rem 0; font-size: .9375rem; font-weight: 500; text-decoration: none;
}
.link-vai:hover { color: var(--laser); }
.link-vai .ico { width: 18px; height: 18px; }

/* Avviso "prodotti di esempio" (solo bozza in locale) */
.avviso {
  margin-bottom: 1.25rem; padding: .8rem 1.1rem;
  border: 1px dashed rgba(15, 98, 200, .45); border-radius: 16px;
  background: rgba(15, 98, 200, .05); font-size: .875rem; text-wrap: pretty;
}

/* Collezioni: una tessera per categoria, la foto è la tessera */
/* (dal 11/11/2026) cerchi con la foto, nome e "da X €" sotto: una riga che sul
   telefono scorre di lato da bordo a bordo, come nelle app di shopping. */
.collezioni {
  display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--margine)); padding: 6px var(--margine) 10px;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--margine); overscroll-behavior-x: contain;
}
.collezioni::-webkit-scrollbar { display: none; }
.tessera {
  flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  scroll-snap-align: start; text-align: center; text-decoration: none;
}
.tessera-foto {
  position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: .5rem;
  border: 3px solid var(--carta); border-radius: 50%; background: var(--filo); box-shadow: var(--ombra);
  transition: box-shadow .25s, transform .25s;
}
.tessera-foto > img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.tessera strong { font: 500 .9375rem/1.25 var(--font-testo); letter-spacing: -0.012em; }
.tessera > span:not(.tessera-foto) { font-size: .8125rem; line-height: 1.3; color: var(--ardesia); font-variant-numeric: tabular-nums; }
.tessera:active .tessera-foto { transform: scale(.96); }
@media (hover: hover) {
  .tessera:hover .tessera-foto { box-shadow: var(--ombra-su), 0 0 0 2px var(--laser); transform: translateY(-3px); }
  .tessera:hover .tessera-foto > img { transform: scale(1.06); }
}
@media (min-width: 760px) {
  .collezioni { gap: clamp(1.25rem, 3vw, 2.5rem); margin-inline: 0; padding-inline: 4px; }
  .tessera { flex-basis: 136px; }
  .tessera-foto { border-width: 4px; margin-bottom: .7rem; }
  .tessera strong { font-size: 1rem; }
}

/* Schede prodotto: la foto ha un bordino di carta intorno (raggi 28/20) */
.griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1040px) { .griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
/* Righe piene: con 3 colonne la home mostra 3 prodotti invece di 4 */
@media (min-width: 720px) and (max-width: 1039px) { .griglia--riga > :nth-child(n + 4) { display: none; } }
.scheda {
  display: flex; flex-direction: column; padding: 8px;
  border-radius: var(--r-scheda); background: var(--carta); box-shadow: var(--ombra);
  text-decoration: none; transition: box-shadow .25s, transform .25s;
}
.scheda-foto { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-foto); background: var(--filo); }
.scheda-foto > img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
/* Effetti al passaggio solo dove c'è un mouse: sul telefono resterebbero "incollati" dopo il tocco */
@media (hover: hover) {
  .scheda:hover { box-shadow: var(--ombra-su); transform: translateY(-3px); }
  .scheda:hover .scheda-foto > img { transform: scale(1.04); }
}
.scheda:active { transform: scale(.985); }
.scheda-testo { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .6rem .55rem; }
.scheda-nome { font: 500 .9375rem/1.3 var(--font-testo); letter-spacing: -0.012em; text-wrap: pretty; }
.scheda-prezzo { font-size: .9375rem; color: var(--ardesia); font-variant-numeric: tabular-nums; }
.scheda-nota { margin-top: .15rem; font-size: .75rem; color: var(--ardesia); }
.scheda--attesa { pointer-events: none; }
.scheda--attesa .scheda-testo::before,
.scheda--attesa .scheda-testo::after { content: ''; display: block; height: .8rem; border-radius: 6px; background: var(--filo); }
.scheda--attesa .scheda-testo::after { width: 40%; margin-top: .35rem; }
@media (max-width: 719px) {
  .scheda { padding: 6px; border-radius: 22px; }
  .scheda-foto { border-radius: 16px; }
  .scheda-testo { padding: .7rem .45rem .45rem; }
}

/* Segnaposto foto: il colore del materiale con il simbolo "inciso" al centro */
.segnaposto {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding: 14px 16px; background: var(--sp-fondo); color: var(--sp-testo);
  font-size: .75rem; letter-spacing: 0;
}
.segnaposto-simbolo {
  position: absolute; left: 50%; top: 50%; width: 24%; max-width: 110px;
  transform: translate(-50%, -56%); color: var(--sp-incisione); --raggio: var(--sp-incisione);
}
.segnaposto--ardesia {
  --sp-fondo: radial-gradient(120% 90% at 25% 15%, #5A626B 0%, #383E45 50%, #272B30 100%);
  --sp-testo: rgba(255, 255, 255, .62); --sp-incisione: rgba(232, 238, 244, .22);
}
.segnaposto--legno {
  --sp-fondo:
    repeating-linear-gradient(97deg, transparent 0 11px, rgba(110, 70, 35, .05) 11px 13px, transparent 13px 29px),
    linear-gradient(150deg, #DDBF97 0%, #C49A6C 60%, #B48858 100%);
  --sp-testo: rgba(60, 36, 14, .66); --sp-incisione: rgba(70, 40, 15, .28);
}
.segnaposto--natale {
  --sp-fondo: radial-gradient(110% 90% at 30% 20%, #51695B 0%, #34473C 55%, #26342C 100%);
  --sp-testo: rgba(255, 255, 255, .62); --sp-incisione: rgba(236, 226, 200, .24);
}
.segnaposto--neutro {
  --sp-fondo: linear-gradient(150deg, #E9E1D5, #D9CDBD);
  --sp-testo: rgba(27, 31, 36, .58); --sp-incisione: rgba(27, 31, 36, .16);
}

/* Su misura: foto grande + i tre passi */
.su-misura { display: grid; gap: 2.25rem; align-items: center; }
.su-misura-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-scheda); box-shadow: var(--ombra); }
.passi { display: grid; gap: 1.35rem; margin: 2rem 0 2.25rem; padding: 0; list-style: none; counter-reset: passo; }
.passi li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .15rem 1rem; counter-increment: passo; }
.passi li::before {
  content: counter(passo); grid-row: span 2;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 1px solid var(--filo); border-radius: 50%; background: var(--carta);
  font: 400 1rem/1 var(--font-titoli); color: var(--laser);
}
.passi strong { font-weight: 500; padding-top: .45rem; }
.passi span { font-size: .9375rem; color: var(--ardesia); }
@media (min-width: 900px) {
  .su-misura { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5.5rem); }
  .su-misura-foto { max-height: 620px; }
}

/* Chi siamo: una frase grande, centrata */
.chi-siamo { max-width: 66rem; text-align: center; }
/* Tre punti brevi, ognuno con il punto del laser: in colonna sul telefono, in riga su schermo largo */
.punti { display: grid; gap: 1.6rem; margin: 2.25rem 0 0; padding: 0; list-style: none; text-align: left; }
.punti li { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; }
.punti li::before {
  content: ''; grid-row: span 2; width: 9px; height: 9px; margin-top: .45rem; border-radius: 50%;
  background: var(--laser); box-shadow: 0 0 0 4px rgba(15, 98, 200, .12), 0 0 18px 5px rgba(15, 98, 200, .3);
}
.punti strong { font: 500 1.0625rem/1.3 var(--font-titoli); letter-spacing: -0.02em; }
.punti span { font-size: .9375rem; color: var(--ardesia); text-wrap: pretty; }
@media (min-width: 760px) {
  .punti { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-top: 3rem; text-align: center; }
  .punti li { grid-template-columns: 1fr; justify-items: center; gap: .35rem; }
  .punti li::before { grid-row: auto; margin: 0 0 .75rem; }
}
.punto-laser {
  display: block; width: 10px; height: 10px; margin: 0 auto 2rem; border-radius: 50%;
  background: var(--laser); box-shadow: 0 0 0 4px rgba(15, 98, 200, .12), 0 0 22px 6px rgba(15, 98, 200, .32);
}
.dichiarazione { font: 300 clamp(1.6rem, 3.6vw, 2.6rem)/1.3 var(--font-titoli); letter-spacing: -0.03em; text-wrap: balance; }
.chi-siamo .intro { margin: 1.5rem auto 0; }

/* Contatti */
.contatti {
  padding: clamp(2.25rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem);
  border-radius: var(--r-scheda); background: var(--carta); box-shadow: var(--ombra);
  text-align: center;
}
.contatti .intro { margin-left: auto; margin-right: auto; }
.contatti-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }

/* ── Pagine interne (catalogo, prodotto) ── */
.pagina { padding-top: var(--testata-h); }
.pagina > .sezione:first-child { padding-top: clamp(2.5rem, 6vw, 4rem); }
.titolo-pagina { font: 300 clamp(2.5rem, 6vw, 3.75rem)/1.05 var(--font-titoli); letter-spacing: -0.04em; }
.filtri { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 1.25rem; }
.filtro {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem;
  border: 1px solid var(--filo); border-radius: var(--r-pill); background: var(--carta);
  font-size: .9375rem; text-decoration: none; box-shadow: 0 2px 8px rgba(52, 40, 24, .05);
  transition: background-color .2s, color .2s, border-color .2s;
}
.filtro:hover { border-color: #CDBFAD; }
.filtro[aria-current="page"] { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.conteggio { margin-bottom: 1rem; font-size: .875rem; color: var(--ardesia); }
.vuoto { padding: 3rem 1rem; text-align: center; color: var(--ardesia); }
.vuoto .pulsante { margin-top: 1.25rem; }

.briciole { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .875rem; color: var(--ardesia); }
.briciole a { text-decoration: none; }
.briciole a:hover { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 4px; }

.prodotto { display: grid; gap: 2rem; margin-top: 1.5rem; }
.prodotto-foto { padding: 10px; border-radius: 32px; background: var(--carta); box-shadow: var(--ombra); }
.prodotto-cornice { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 22px; }
.prodotto-cornice > img { width: 100%; height: 100%; object-fit: cover; }
/* Pagina di un set: griglia delle foto dei singoli pezzi, con la scritta sotto */
.prodotto-set { margin: 0; }
.prodotto-set-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { .prodotto-set-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prodotto-set-pezzo { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 1; }
.prodotto-set-pezzo img { width: 100%; height: 100%; object-fit: cover; }
.prodotto-set-pezzo span {
  position: absolute; left: 8px; bottom: 8px; padding: .25rem .6rem; border-radius: var(--r-pill);
  background: rgba(252, 250, 247, .9); color: var(--inchiostro); font-size: .75rem; font-weight: 500;
}
.prodotto-set figcaption { padding: .85rem .5rem .35rem; text-align: center; font-size: .9375rem; font-weight: 500; color: var(--inchiostro); }
.prodotto h1 { font: 400 clamp(2rem, 4.4vw, 3rem)/1.1 var(--font-titoli); letter-spacing: -0.035em; text-wrap: balance; }
.prodotto-prezzo { margin-top: 1rem; font: 500 1.5rem/1.2 var(--font-testo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* Disponibilità: etichetta a pillola con il punto del laser */
.prodotto-stato {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .85rem;
  padding: .4rem .85rem .4rem .7rem; border-radius: var(--r-pill);
  background: rgba(15, 98, 200, .07); font-size: .8125rem; font-weight: 500; color: var(--inchiostro);
}
.prodotto-stato::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--laser); box-shadow: 0 0 0 3px rgba(15, 98, 200, .14); }
.prodotto-descrizione { max-width: 34rem; margin-top: 1.5rem; color: #30353C; white-space: pre-line; text-wrap: pretty; }
.prodotto-azioni { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.prodotto-nota { max-width: 32rem; margin-top: 1.25rem; font-size: .875rem; color: var(--ardesia); text-wrap: pretty; }
@media (min-width: 900px) {
  .prodotto { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .prodotto-info { position: sticky; top: calc(var(--testata-h) + 2rem); padding-top: 1rem; }
}

/* Pagine di solo testo (privacy) */
.testo-legale { max-width: 42rem; margin-top: 1.5rem; }
.testo-legale h2 { margin: 2.25rem 0 .6rem; font: 500 1.25rem/1.3 var(--font-titoli); letter-spacing: -0.02em; }
.testo-legale p { margin-top: .75rem; color: #30353C; text-wrap: pretty; }
.testo-legale p.intro { margin-top: 0; color: var(--ardesia); }
.testo-legale a { color: var(--laser); text-underline-offset: 3px; }
.testo-legale-data { margin-top: 2.5rem !important; font-size: .875rem; color: var(--ardesia) !important; }

/* ── Piè di pagina ── */
.piede { margin-top: var(--sezione); background: var(--inchiostro); color: #C3C9D1; --raggio: var(--laser-chiaro); --logo-laser: #A9B2BD; }
.piede-dentro {
  max-width: calc(var(--max) + 2 * var(--margine)); margin: 0 auto;
  padding: 3.5rem var(--margine) calc(2rem + env(safe-area-inset-bottom));
  display: grid; gap: 2rem;
}
.piede .logo { width: 95px; height: 38px; color: #fff; }
.piede-motto { margin-top: 1rem; max-width: 22rem; font-size: .9375rem; }
.piede nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.piede nav a { padding: .35rem 0; text-decoration: none; }
.piede a:hover { color: #fff; }
.piede-legale {
  display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8125rem; color: #8E97A3;
}
.piede :focus-visible { outline-color: var(--laser-chiaro); }
@media (min-width: 760px) {
  .piede-dentro { grid-template-columns: 1fr auto; align-items: start; }
  .piede-legale { grid-column: 1 / -1; }
}

/* ── Rifinitura (11/11/2026): dettagli e versione telefono ── */
/* Invito a scendere: al posto del pulsante, la scritta con il punto del laser
   che scende lungo una linea. Porta all'inizio delle collezioni (#scopri). */
#scopri { display: block; height: 0; scroll-margin-top: -1rem; }
.eroe-scopri {
  display: inline-flex; align-items: center; gap: .9rem; min-height: 48px;
  font: 500 1rem/1 var(--font-testo); letter-spacing: -0.01em; color: #fff; text-decoration: none;
}
.eroe-scopri-raggio { position: relative; width: 1px; height: 38px; background: rgba(255, 255, 255, .28); }
.eroe-scopri-raggio::after {
  content: ''; position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin: -3px 0 0 -3.5px; border-radius: 50%;
  background: #EEF5FF; box-shadow: 0 0 0 2px rgba(140, 192, 255, .3), 0 0 12px 4px rgba(56, 140, 255, .75);
  transform: translateY(34px);
}
@media (prefers-reduced-motion: no-preference) {
  .eroe-scopri-raggio::after { animation: punto-scende 1.9s cubic-bezier(.45, 0, .55, 1) infinite; }
}
@keyframes punto-scende {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  75% { transform: translateY(38px); opacity: 1; }
  100% { transform: translateY(38px); opacity: 0; }
}
@media (hover: hover) { .eroe-scopri:hover span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; } }
/* Prezzi nascosti su richiesta (11/11/2026): schede, pagina prodotto e "da X €"
   sotto i cerchi delle collezioni. Per farli tornare: cancellare questa regola. */
.scheda-prezzo, .prodotto-prezzo, .tessera > span:not(.tessera-foto) { display: none; }
/* Su misura: la foto vera (quadrata) riempie il riquadro */
.su-misura-foto { aspect-ratio: 1; }
.su-misura-foto > img { width: 100%; height: 100%; object-fit: cover; }
/* WhatsApp è già fisso nella testata: nell'apertura non si ripete */
.eroe-azioni .pulsante--vetro { display: none; }
.t-stretto { display: none; } /* testi corti, solo sul telefono in verticale (.t-largo: il contrario) */
::selection { background: rgba(15, 98, 200, .2); }
.intro { font-size: 1.0625rem; line-height: 1.6; }
.scheda-prezzo { color: var(--inchiostro); }
.scheda-nome { font-weight: 400; color: #30353C; }
.natale-schede .scheda-nome { font-weight: 500; color: var(--inchiostro); }

/* Contatti: un velo di luce blu dall'alto, come il raggio */
.contatti { background: radial-gradient(70% 90% at 50% 0%, rgba(15, 98, 200, .08), transparent 70%), var(--carta); }
/* Piè di pagina: una linea di luce in cima */
.piede { position: relative; }
.piede::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140, 192, 255, .7), transparent);
}

@media (max-width: 899px) {
  :root { --testata-h: 64px; }
  .piede nav { gap: 0 1.5rem; }
  .piede nav a { padding: .7rem 0; }
  .filtro { min-height: 44px; }

  /* Pagina prodotto: i pulsanti di contatto restano sempre a portata di pollice */
  .prodotto-azioni {
    position: fixed; inset: auto 0 0; z-index: 40; margin: 0; flex-wrap: nowrap;
    padding: .7rem var(--margine) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(243, 239, 232, .92); border-top: 1px solid var(--filo);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  }
  .prodotto-azioni .pulsante--laser { flex: 1; min-width: 0; }
  .prodotto-azioni .pulsante--chiaro { flex-shrink: 0; width: 48px; padding: 0; }
  .prodotto-azioni .pulsante--chiaro .testo {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  body:has(.prodotto-azioni) .piede-dentro { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 719px) {
  /* Filtri del catalogo: una riga sola che scorre di lato, da bordo a bordo */
  .filtri {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding: 4px var(--margine);
    scroll-padding-inline: var(--margine); overscroll-behavior-x: contain;
  }
  .filtri::-webkit-scrollbar { display: none; }
  .filtro { flex-shrink: 0; }
  .sezione-testa { margin-bottom: 1.25rem; }
}

/* Telefono in verticale: i video orizzontali si vedono INTERI (16:9, larghi
   quanto lo schermo, senza scritte sopra) e testo e schede vanno sotto su
   fondo scuro. Se un giorno arriva il video iniziale verticale (9:16),
   togliere le regole .eroe di questo blocco. */
@media (max-width: 719px) and (orientation: portrait) {
  .eroe { min-height: 0; flex-direction: column; justify-content: flex-start; padding-top: var(--testata-h); }
  .eroe-video { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 16 / 9; }
  .eroe-velo, .raggio { display: none; }
  .eroe-testo {
    position: relative; right: auto; bottom: auto; width: auto;
    padding: 1.6rem var(--margine) 2.25rem; text-align: left; text-shadow: none;
  }
  .eroe-sotto { margin-left: 0; }
  .eroe-azioni { justify-content: flex-start; }
  .eroe-pausa { top: calc(var(--testata-h) + 56.25vw - 44px - .6rem); right: .6rem; bottom: auto; }

  .natale { min-height: 0; gap: 1.5rem; padding-top: 0; background-image: none; }
  .natale--cocktail { background-color: #14110F; }
  .natale-video {
    position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 16 / 9;
    background: url('/media/natale/tavola-loop.jpg') 50% 50% / cover no-repeat; /* finché il video non parte */
  }
  .natale--cocktail .natale-video { background-image: url('/media/cocktail/tiki-loop.jpg'); }
  .natale-velo { display: none; }
  .natale-testa { text-shadow: none; }

  /* Intestazione da negozio: una riga con il nome della collezione e "Vedi tutti".
     Titolo lungo e descrizione restano nel codice (per lettori di schermo e
     motori di ricerca) ma si vedono solo su schermi più grandi. */
  .natale { gap: 1rem; margin-top: 0; --fondo: #1E1611; --sopra: #241E1A; background-color: var(--fondo); }
  .natale--cocktail { --fondo: #14110F; --sopra: #1E1611; }
  /* Passaggio morbido: il bordo alto del video sfuma dal colore della sezione
     sopra, quello basso sfuma nel fondo della propria sezione. */
  .natale::before, .natale + .natale::before, .eroe + .natale::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 56.25vw; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, var(--sopra) 0%, transparent 9%, transparent 86%, var(--fondo) 100%);
  }
  .natale:has(+ .natale)::after, .eroe:has(+ .natale:not([hidden]))::after { display: none; }
  .natale-pausa { z-index: 2; }
  /* Mentre si scorre, titolo e schede salgono e compaiono (solo nei browser
     che lo supportano e se l'utente non ha chiesto meno animazioni). */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .natale-testa, .natale-schede {
        animation: sale-scorrendo linear both; animation-timeline: view(); animation-range: entry 0% cover 28%;
      }
    }
  }
  .natale-testa > div { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .natale-occhiello {
    font: 400 1.5rem/1.2 var(--font-titoli); letter-spacing: -0.03em; text-transform: none; color: #fff;
  }
  .natale .titolo-sezione, .natale-sotto {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .natale .link-vai { margin-top: 0; }
  .natale-pausa { position: absolute; top: calc(56.25vw - 44px - .6rem); right: .6rem; }
  .t-largo { display: none; }
  .t-stretto { display: inline; }
}

@media (max-width: 479px) {
  /* Pulsanti larghi quanto lo schermo: più facili da toccare */
  .contatti-azioni { display: grid; grid-template-columns: 1fr; }
  .eroe-azioni .pulsante { min-height: 46px; padding: 0 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}