/* ============================================================
   idra+ — concept ecommerce
   Palette e tipografia dalle Brand Guidelines IDRA+
   ============================================================ */

/* ---------- Font ---------- */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-var-latinext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-var-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-var-latinext.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #3A3E5C;
  --ink-soft: #565b7e;
  --cipria: #FBEFF0;
  --white: #FFFDFD;

  --focus: #8FA8E8;
  --energy: #E8798F;
  --recovery: #A9C3AC;
  --glow: #F2B8A6;

  --focus-tint: #EDF1FB;
  --energy-tint: #FBEDF0;
  --recovery-tint: #EEF4EF;
  --glow-tint: #FCF0EA;

  --font-display: 'Outfit', 'Helvetica Neue', sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;

  --radius: 22px;
  --radius-pill: 999px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --hairline: 1px solid rgba(58, 62, 92, .16);
  --shadow-soft: 0 18px 50px -18px rgba(58, 62, 92, .35);
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

html { overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--cipria);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
sup { font-size: .55em; color: var(--energy); font-weight: 600; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--energy);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--focus); color: var(--white); }

/* Il + rosa: punteggiatura del brand */
.plus { color: var(--energy); font-weight: 600; }

/* Wordmark SVG: lettere in currentColor, + sempre rosa */
.logo-svg { display: block; height: auto; }
.logo-svg .lg-letter { fill: currentColor; will-change: transform; }
.logo-svg .lg-plus { fill: var(--energy); will-change: transform; }

/* ---------- Sfondo morphing ---------- */
.bg-wash {
  position: fixed; inset: 0; z-index: -1;
  background: var(--cipria);
}

/* ---------- Cursore ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: transform .25s ease, background-color .25s ease, opacity .3s ease;
}
.cursor span {
  font-family: var(--font-display); font-weight: 600;
  color: var(--energy); font-size: 15px; line-height: 1;
  transform: scale(0); transition: transform .2s ease;
}
.cursor.is-active { transform: scale(1.45); background: rgba(255,253,253,.75); border-color: transparent; }
.cursor.is-active span { transform: scale(1); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--cipria);
  display: grid; place-items: center;
  place-content: center; /* senza, le righe della griglia partono dall'alto */
}
.preloader__mark { color: var(--ink); }
.preloader__mark .logo-svg { width: clamp(130px, 20vw, 240px); }

/* ---------- Orologio della giornata ---------- */
.dayclock {
  position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 90;
  display: flex; align-items: center; gap: .6rem;
  background: rgba(255, 253, 253, .8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: var(--hairline);
  padding: .55rem 1rem;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  opacity: 0; transform: translateY(20px);
  pointer-events: none;
}
.dayclock__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--energy);
  transition: background-color .5s ease;
}
.dayclock__time {
  font-family: var(--font-display); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dayclock__label { color: var(--ink-soft); }
@media (max-width: 700px) { .dayclock { display: none; } }

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  transition: background-color .4s ease, box-shadow .4s ease;
}
.header.is-scrolled {
  background: rgba(251, 239, 240, .78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(58,62,92,.08);
}
.header__logo { display: block; }
.header__logo img { display: block; height: 30px; width: auto; }
.header__nav { display: flex; gap: 2.2rem; }
.header__nav a {
  text-decoration: none;
  font-family: var(--font-display); font-weight: 500;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  position: relative;
}
.header__nav a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 2px; background: var(--energy);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.65,.05,.36,1);
}
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__cart {
  font-weight: 600; font-size: .95rem;
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background-color .3s ease, color .3s ease;
}
.header__cart:hover { background: var(--ink); color: var(--cipria); }
.header__cart-count {
  display: grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 5px;
  background: var(--energy); color: var(--white);
  border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 700;
}
@media (max-width: 900px) { .header__nav { display: none; } }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: 1rem 1.9rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, color .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.btn--primary { background: var(--energy); color: var(--white); box-shadow: 0 12px 30px -12px rgba(232,121,143,.65); }
.btn--primary:hover { background: #d9647c; }
.btn--dark { background: var(--ink); color: var(--cipria); }
.btn--dark:hover { background: #2d3049; }
.btn--ghost { border: 1.5px solid var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--cipria); }
.btn--full { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.plus-btn { font-weight: 700; transition: transform .3s ease; }
.btn-add:hover .plus-btn { transform: rotate(90deg); }

/* ---------- Titoli di sezione ---------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.5vw, 3.6rem);
  line-height: 1.05; letter-spacing: -0.02em;
  text-wrap: balance;
}
.section-title--big { font-size: clamp(2rem, 6.5vw, 5.2rem); }
.section-sub {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: 1.2rem;
}

/* ---------- Hero — il tuo momento ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  padding-top: var(--header-h);
}
.hero__washes { position: absolute; inset: -5%; z-index: 0; }
.hero__washes img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; will-change: opacity, transform;
}
.hero__washes img.is-on { opacity: 1; }
.hero__washes::after {
  content: ''; position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(100deg, rgba(251,239,240,.82) 0%, rgba(251,239,240,.4) 42%, rgba(251,239,240,.05) 75%);
}
.hero__bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__bigword {
  position: absolute; z-index: 1;
  right: -3vw; top: 14%;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(7rem, 17vw, 17rem);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--hero-fl); opacity: .3;
  white-space: nowrap; pointer-events: none; user-select: none;
  will-change: transform;
}
.hero__frame {
  position: relative; z-index: 2;
  width: 100%; max-width: 1500px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 2rem var(--gutter);
}
.hero__brandline {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: .01em;
  margin-bottom: clamp(1.2rem, 3vh, 2.4rem);
}
.hero__time {
  display: flex; align-items: center; gap: .18em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4.6rem, 12.5vw, 10.5rem);
  line-height: .95; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--hero-fl);
}
.hero__time-mask { display: inline-block; overflow: hidden; }
.hero__time-digits { display: inline-block; will-change: transform; }
.hero__time-dot {
  width: .16em; height: .16em; border-radius: 50%;
  background: currentColor; align-self: flex-end; margin-bottom: .14em;
  animation: fizzpulse 1.6s ease-in-out infinite;
}
.hero__moment {
  margin-top: 1rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
}
.hero__name {
  font-weight: 800; letter-spacing: .04em;
  color: var(--hero-fl);
}
.hero__claim {
  margin-top: .6rem;
  color: var(--ink-soft);
  font-size: clamp(.98rem, 1.3vw, 1.15rem);
  max-width: 44ch;
}
.hero__cta { margin-top: 1.8rem; display: flex; gap: .9rem; flex-wrap: wrap; }
.hero__micro {
  margin-top: 1.6rem;
  font-size: .78rem; color: var(--ink-soft);
  letter-spacing: .04em; line-height: 1.9;
}
.hero__micro #heroLocal { font-style: italic; }
.hero__boxes {
  position: relative; justify-self: center;
  width: min(32vw, 380px); aspect-ratio: 4 / 5;
  will-change: transform;
}
.hero__boxes img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  opacity: 0; will-change: transform, opacity;
}
.hero__boxes img.is-on { opacity: 1; }

.hero__timeline {
  position: relative; z-index: 2;
  display: flex; gap: clamp(.6rem, 2vw, 1.4rem);
  width: 100%; max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter) 1.8rem;
}
.stop {
  flex: 1 1 0; min-width: 0;
  text-align: left;
  padding: .8rem .2rem 0;
  position: relative;
  border-top: 2px solid rgba(58, 62, 92, .18);
  transition: opacity .3s ease;
  opacity: .55;
}
.stop:hover { opacity: .85; }
.stop.is-active { opacity: 1; }
.stop__bar {
  position: absolute; top: -2px; left: 0;
  width: 100%; height: 2px;
  background: var(--stop);
  transform: scaleX(0); transform-origin: left;
}
.stop__time {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  font-variant-numeric: tabular-nums;
}
.stop.is-active .stop__time { color: var(--stop); }
.stop__name {
  display: block;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .hero__frame { grid-template-columns: 1fr; padding-top: 1rem; gap: 1.5rem; }
  .hero__boxes { width: min(52vw, 240px); order: 2; }
  .hero__left { order: 1; }
  .hero__bigword { top: auto; bottom: 22%; font-size: 26vw; opacity: .25; }
  .hero__time { font-size: clamp(4rem, 19vw, 6rem); }
  .stop__name { font-size: .62rem; }
}

/* ---------- Ticker ---------- */
.ticker {
  overflow: hidden;
  border-top: var(--hairline); border-bottom: var(--hairline);
  padding: 1rem 0;
  background: rgba(255,253,253,.4);
}
.ticker__track {
  display: inline-flex; align-items: center; gap: 2.4rem;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
  will-change: transform;
}
.ticker__track--slow { animation-duration: 44s; }
.ticker__item {
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.ticker--voices .ticker__item { text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
.ticker__plus { color: var(--energy); font-weight: 700; font-size: 1.1rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Divider "risalita": linea + bollicine tra le sezioni ---------- */
.divider {
  position: relative;
  height: 180px;
  display: flex; flex-direction: column; align-items: center;
  gap: .55rem;
  overflow: hidden;
  pointer-events: none;
}
.divider__seg {
  width: 1.5px; flex: 1;
  background: rgba(58, 62, 92, .24);
  transform-origin: top center;
}
.divider__plus {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.45rem; line-height: 1;
  color: var(--energy);
}
.divider__b {
  position: absolute; bottom: -10px; left: 50%;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%;
  background: rgba(58, 62, 92, .3);
  opacity: 0;
  animation: divrise 4.2s linear infinite;
}
.divider__b:nth-child(5) {
  width: 7px; height: 7px;
  background: rgba(232, 121, 143, .55);
  margin-left: 3px;
  animation-delay: 1.4s; animation-duration: 3.6s;
}
.divider__b:nth-child(6) {
  width: 4px; height: 4px;
  margin-left: -8px;
  animation-delay: 2.6s; animation-duration: 5s;
}
@keyframes divrise {
  0% { transform: translateY(0); opacity: 0; }
  14% { opacity: .7; }
  100% { transform: translateY(-185px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .divider__b { animation: none; }
}
/* Con lo slider attivo la sezione è full-bleed: questi margini tengono i
   divisori adiacenti centrati tra la foto e la sezione vicina (JS aggiunge le classi) */
.divider--pre-slider { margin-bottom: calc(clamp(6rem, 14vh, 10rem) - var(--header-h)); }
.divider--post-slider { margin-top: clamp(6rem, 16vh, 11rem); }

/* ---------- Manifesto ---------- */
.manifesto {
  padding: clamp(6rem, 14vh, 10rem) var(--gutter);
  max-width: 1100px; margin: 0 auto;
}
.manifesto__eyebrow {
  font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  margin-bottom: 2rem;
}
.manifesto__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.3; letter-spacing: -0.01em;
}
.manifesto__text .w { opacity: .13; display: inline-block; }
.manifesto__notes {
  margin-top: 3rem; display: flex; gap: 2.5rem; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 500;
  color: var(--ink-soft); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- Come funziona ---------- */
/* Base: card impilate (mobile e reduced-motion). Con JS su desktop
   diventa una sequenza orizzontale pinnata (.how--slider). */
.how { padding: clamp(5rem, 12vh, 9rem) var(--gutter); max-width: 1400px; margin: 0 auto; }
.how__head { max-width: 700px; margin-bottom: 3rem; }
.how__steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem);
}
.how__media {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius);
  margin-bottom: 1.4rem;
}
.how__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.how__step:hover .how__media img { transform: scale(1.06); }
.how__num {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: 2rem; line-height: 1;
  color: var(--step, var(--energy));
  margin-bottom: .4rem;
}
.how__body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin-bottom: .4rem; }
.how__step p { color: var(--ink-soft); max-width: 34ch; }
@media (max-width: 800px) {
  .how__steps { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* Variante slider (attivata da JS su desktop): testi a sinistra che si
   scambiano, immagine a destra full-height senza margini né raggi */
.how--slider {
  position: relative;
  max-width: none;
  height: 100svh;
  padding: 0;
  overflow: hidden;
}
.how--slider .how__head {
  position: absolute; z-index: 2;
  top: calc(var(--header-h) + 4vh);
  left: var(--gutter);
  width: min(42vw, 620px);
  margin: 0;
}
.how--slider .how__viewport {
  position: absolute;
  top: 32svh; bottom: 5svh; left: 0; right: 50%;
  display: flex; align-items: flex-end;
}
.how--slider .how__steps {
  display: grid; grid-template-columns: 1fr;
  align-items: end; /* i tre testi hanno altezze diverse: tutti col fondo a filo */
  width: 100%;
  gap: 0; max-width: none;
  padding: 0 clamp(2rem, 4vw, 4rem) 0 var(--gutter);
}
.how--slider .how__step { display: contents; }
.how--slider .how__body { grid-area: 1 / 1; will-change: transform, opacity; }
.how__mediabox {
  position: absolute; z-index: 1;
  top: var(--header-h); right: 0; bottom: 0; left: 50%;
  overflow: hidden;
  border-top-left-radius: clamp(36px, 5vw, 72px);
  border-bottom-left-radius: clamp(36px, 5vw, 72px);
}
.how--slider .how__media {
  position: absolute; inset: 0;
  height: 100%; aspect-ratio: auto;
  margin: 0; border-radius: 0;
  will-change: clip-path;
}
.how--slider .how__media img { width: 100%; height: 100%; transition: none; }
.how--slider .how__num {
  font-size: clamp(6rem, 16vh, 10rem);
  letter-spacing: -0.02em;
  margin-bottom: .5rem;
}
.how--slider .how__body h3 { font-size: clamp(2rem, 4vh, 3rem); }
.how--slider .how__body p { font-size: 1.15rem; max-width: 38ch; }

/* ---------- Intro capitoli ---------- */
.chapters-intro {
  padding: clamp(6rem, 16vh, 11rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  text-align: center;
}
.chapters-intro .section-sub { margin-inline: auto; }

/* ---------- Capitoli formula ---------- */
.chapter {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(5rem, 10vh, 8rem) var(--gutter);
  overflow: clip;
}
.chapter__bigword {
  position: absolute; top: 8%; left: 50%;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(6rem, 20vw, 19rem);
  letter-spacing: -0.02em; line-height: 1;
  color: var(--fl, var(--focus));
  opacity: .3;
  white-space: nowrap;
  pointer-events: none; user-select: none;
  will-change: transform;
}
.chapter__grid {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) minmax(300px, 4fr) minmax(220px, 3fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  width: 100%; max-width: 1500px; margin: 0 auto;
  position: relative; z-index: 1;
}
.chapter--flip .chapter__grid { direction: rtl; }
.chapter--flip .chapter__grid > * { direction: ltr; }

.chapter__time {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3rem, 6vw, 5rem);
  font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: -0.02em;
  color: var(--fl, var(--focus));
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1.6rem;
}
.chapter__time-colon {
  width: .45em; height: .45em; border-radius: 50%;
  background: currentColor; opacity: .8;
  animation: fizzpulse 1.6s ease-in-out infinite;
}
@keyframes fizzpulse {
  0%, 100% { transform: scale(.6); opacity: .5; }
  50% { transform: scale(1); opacity: .95; }
}
.chapter__eyebrow {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
  margin-bottom: .9rem;
}
.chapter__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  letter-spacing: -0.01em; line-height: 1.05;
}
.chapter__flavor {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  margin-top: .5rem;
}
.chapter__copy { margin-top: 1.4rem; color: var(--ink-soft); max-width: 44ch; }
.chapter__vitamins { display: flex; gap: .6rem; margin-top: 1.6rem; }
.chapter__vitamins li {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  box-shadow: 0 6px 18px -8px rgba(58,62,92,.3);
}
.chapter__buy {
  margin-top: 2.2rem;
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
}
.chapter__price { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; }
.chapter__price small { font-weight: 400; font-size: .85rem; color: var(--ink-soft); }

.chapter__box { position: relative; }
.chapter__box img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  will-change: transform;
}
.chapter__fruit { position: relative; }
.chapter__fruit img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  will-change: transform;
}
.chapter__fruit figcaption {
  margin-top: .8rem; font-size: .85rem; color: var(--ink-soft);
  font-style: italic;
}

@media (max-width: 1024px) {
  .chapter__grid { grid-template-columns: 1fr 1fr; }
  .chapter__fruit { display: none; }
}
@media (max-width: 720px) {
  .chapter { min-height: auto; }
  .chapter__grid { grid-template-columns: 1fr; }
  .chapter__box { order: -1; max-width: 340px; margin-inline: auto; }
  .chapter__bigword { top: 2%; font-size: clamp(5rem, 26vw, 9rem); }
}

/* ---------- Il rituale ---------- */
.ritual { padding: clamp(6rem, 14vh, 10rem) var(--gutter); max-width: 1500px; margin: 0 auto; }
.ritual__head { max-width: 720px; margin-bottom: 2.8rem; }
.ritual__presets { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.chip {
  font-family: var(--font-display); font-weight: 500; font-size: .92rem;
  padding: .65rem 1.3rem;
  border: 1.5px solid rgba(58,62,92,.35);
  border-radius: var(--radius-pill);
  transition: all .3s ease;
}
.chip:hover { border-color: var(--ink); background: var(--white); }
.chip.is-active { background: var(--ink); color: var(--cipria); border-color: var(--ink); }

.ritual__body {
  display: grid; grid-template-columns: 1fr minmax(320px, 400px);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.ritual__tiles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.8rem);
}
.tile {
  position: relative;
  text-align: left;
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.3rem;
  border: 2px solid transparent;
  box-shadow: 0 10px 34px -18px rgba(58,62,92,.28);
  transition: border-color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  display: flex; flex-direction: column; gap: .35rem;
}
.tile:hover { transform: translateY(-4px); }
.tile img { border-radius: calc(var(--radius) - 8px); aspect-ratio: 4/5; object-fit: cover; margin-bottom: .7rem; }
.tile__check {
  position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1;
  box-shadow: 0 4px 14px rgba(58,62,92,.25);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, color .3s ease;
}
.tile.is-selected { border-color: var(--ink); }
.tile.is-selected .tile__check {
  background: var(--energy); color: var(--white);
  transform: rotate(45deg);
}
.tile { cursor: pointer; }
.tile__name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: .02em; }
.tile__flavor { font-size: .85rem; color: var(--ink-soft); }
.tile__qty {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: .7rem;
}
.tile__qbtn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(58, 62, 92, .3);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.tile__qbtn:hover { border-color: var(--energy); background: var(--energy); color: var(--white); }
.tile__qnum {
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 1.2em; text-align: center;
}
.tile__qlabel { font-size: .75rem; color: var(--ink-soft); }

.ritual__panel {
  position: sticky; top: calc(var(--header-h) + 1.5rem);
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; align-items: center;
}

/* Bicchiere */
.glass { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.4rem; }
.glass__vessel {
  position: relative;
  width: 130px; height: 190px;
  border: 3px solid var(--ink);
  border-top-width: 2px;
  border-radius: 10px 10px 26px 26px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(251,239,240,.35), rgba(251,239,240,.05));
}
.glass__liquid {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0%;
  display: flex; flex-direction: column-reverse;
  transition: height .8s cubic-bezier(.22,1,.36,1);
}
.glass__liquid .layer {
  flex: 1;
  position: relative;
  transition: background-color .5s ease;
}
.layer__qty {
  position: absolute; right: 7px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 700; font-size: .68rem;
  background: rgba(255, 253, 253, .85); color: var(--ink);
  padding: 1px 7px; border-radius: var(--radius-pill);
  pointer-events: none;
}
.glass__liquid .layer::after {
  content: ''; position: absolute; top: -4px; left: -20%; right: -20%; height: 8px;
  background: inherit; filter: brightness(1.12);
  border-radius: 50%;
}
.glass__bubbles { position: absolute; inset: 0; pointer-events: none; }
.glass__bubbles i {
  position: absolute; bottom: -10px;
  width: var(--s, 6px); height: var(--s, 6px);
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  animation: bubblerise var(--d, 3s) linear var(--delay, 0s) infinite;
  opacity: 0;
}
@keyframes bubblerise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translateY(-180px); opacity: 0; }
}
.glass__base {
  width: 90px; height: 10px; margin-top: 6px;
  border-radius: 50%;
  background: rgba(58,62,92,.18);
  filter: blur(3px);
}

.ritual__hint { font-size: .9rem; color: var(--ink-soft); text-align: center; min-height: 2.6em; }
.ritual__totals { width: 100%; margin: 1rem 0 1.4rem; }
.ritual__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .5rem 0;
  font-size: .95rem;
}
.ritual__row + .ritual__row { border-top: var(--hairline); }
.ritual__row dd { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.ritual__row--discount dd { color: var(--energy); }
.ritual__row--total { font-size: 1.15rem; }
.ritual__row--total dd { font-size: 1.5rem; }

@media (max-width: 960px) {
  .ritual__body { grid-template-columns: 1fr; }
  .ritual__panel { position: static; width: 100%; }
}
@media (max-width: 560px) {
  .ritual__tiles { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .tile { padding: .7rem .7rem .9rem; }
  .tile__check { top: 1rem; right: 1rem; width: 32px; height: 32px; font-size: 1.1rem; }
}

/* ---------- Voci ---------- */
.voices { padding-top: clamp(4rem, 10vh, 8rem); }
.voices__media {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.voices__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; will-change: transform; }
.voices__quote {
  position: absolute; left: var(--gutter); bottom: clamp(2rem, 6vh, 4rem);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 4.5vw, 3.6rem);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--white);
  text-shadow: 0 2px 30px rgba(58,62,92,.4);
  display: flex; flex-direction: column;
}
.voices .ticker { background: var(--white); }

/* ---------- FAQ ---------- */
.faq {
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  max-width: 860px; margin: 0 auto;
}
.faq .section-title { margin-bottom: 2.5rem; }
.faq__item { border-top: var(--hairline); }
.faq__item:last-child { border-bottom: var(--hairline); }
.faq__item summary {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  padding: 1.4rem 3rem 1.4rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  position: absolute; right: .5rem; top: 50%;
  transform: translateY(-50%);
  color: var(--energy); font-weight: 600; font-size: 1.6em;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { padding: 0 0 1.6rem; color: var(--ink-soft); max-width: 60ch; }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: var(--cipria);
  padding: clamp(4rem, 8vh, 6rem) var(--gutter) 2rem;
  overflow: hidden;
}
.footer__news { max-width: 640px; margin: 0 auto 4rem; text-align: center; }
.footer__news-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: -0.015em;
}
.footer__news-sub { margin-top: .8rem; opacity: .8; }
.footer__news-sub strong { color: var(--energy); }
.footer__form { display: flex; gap: .8rem; margin-top: 1.8rem; flex-wrap: wrap; justify-content: center; }
.footer__form input {
  flex: 1 1 260px;
  font: inherit; color: var(--cipria);
  background: rgba(251,239,240,.08);
  border: 1.5px solid rgba(251,239,240,.35);
  border-radius: var(--radius-pill);
  padding: 1rem 1.5rem;
}
.footer__form input::placeholder { color: rgba(251,239,240,.5); }
.footer__form input:focus-visible { outline-color: var(--energy); }
.footer__wordmark {
  color: var(--cipria);
  user-select: none;
  display: flex; justify-content: center;
}
.footer__wordmark .logo-svg { width: min(88vw, 1080px); }
.footer__meta {
  margin-top: 3rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  font-size: .85rem; opacity: .75;
}
.footer__meta nav { display: flex; gap: 1.6rem; }
.footer__meta a { text-decoration: none; }
.footer__meta a:hover { color: var(--energy); }

/* ---------- Carrello ---------- */
.cart-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(58, 62, 92, .45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .4s ease;
}
.cart-overlay.is-open { opacity: 1; }
.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(440px, 100vw);
  background: var(--cipria);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.22,1,.36,1);
  box-shadow: -20px 0 60px rgba(58,62,92,.25);
}
.cart.is-open { transform: translateX(0); }
.cart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 1.6rem 1.2rem;
  border-bottom: var(--hairline);
}
.cart__head h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.cart__close {
  font-size: 1.8rem; line-height: 1; width: 42px; height: 42px;
  border-radius: 50%; display: grid; place-items: center;
  transition: background-color .25s ease, transform .3s ease;
}
.cart__close:hover { background: rgba(58,62,92,.08); transform: rotate(90deg); }
.cart__shipbar { padding: 1rem 1.6rem; border-bottom: var(--hairline); font-size: .85rem; }
.cart__shipbar p { margin-bottom: .5rem; }
.cart__shipbar strong { color: var(--energy); }
.cart__shiptrack { height: 6px; background: rgba(58,62,92,.12); border-radius: 99px; overflow: hidden; }
.cart__shipfill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--focus), var(--energy));
  border-radius: 99px;
  transition: width .6s cubic-bezier(.22,1,.36,1);
}
.cart__items { flex: 1; overflow-y: auto; padding: .5rem 1.6rem; }
.cart-item {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 1rem; align-items: center;
  padding: 1.1rem 0;
  border-bottom: var(--hairline);
}
.cart-item__thumb { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; }
.cart-item__name { font-family: var(--font-display); font-weight: 600; font-size: .98rem; }
.cart-item__flavor { font-size: .8rem; color: var(--ink-soft); }
.cart-item__qty {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: .5rem;
  border: 1.5px solid rgba(58,62,92,.25); border-radius: var(--radius-pill);
  padding: .2rem .6rem;
}
.cart-item__qty button {
  font-size: 1.1rem; font-weight: 600; width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--ink);
}
.cart-item__qty button:hover { color: var(--energy); }
.cart-item__qty span { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; min-width: 1.2em; text-align: center; }
.cart-item__right { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.cart-item__price { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-item__remove { font-size: 1.2rem; color: var(--ink-soft); line-height: 1; transition: color .25s ease, transform .25s ease; }
.cart-item__remove:hover { color: var(--energy); transform: rotate(90deg); }

.cart__empty { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 2rem; }
.cart__empty-title { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; }
.cart__empty .btn { margin-top: 1rem; }
.cart.is-empty .cart__empty { display: flex; }
.cart.is-empty .cart__items, .cart.is-empty .cart__foot, .cart.is-empty .cart__shipbar { display: none; }

.cart__foot { padding: 1.2rem 1.6rem 1.6rem; border-top: var(--hairline); background: var(--white); }
.cart__totals { margin-bottom: 1.1rem; }
.cart__totals > div { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .95rem; }
.cart__totals dd { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.cart__row-discount dd { color: var(--energy); }
.cart__row-total { font-size: 1.1rem; padding-top: .6rem !important; border-top: var(--hairline); margin-top: .4rem; }
.cart__row-total dd { font-size: 1.35rem; }
.cart__note { margin-top: .9rem; text-align: center; font-size: .78rem; color: var(--ink-soft); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 1.6rem; left: 50%; z-index: 300;
  transform: translate(-50%, calc(100% + 4rem));
  background: var(--ink); color: var(--cipria);
  font-family: var(--font-display); font-weight: 500;
  padding: 1rem 1.7rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 20px 50px -12px rgba(58,62,92,.5);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
  max-width: min(92vw, 480px);
  text-align: center;
}
.toast.is-visible { transform: translate(-50%, 0); }
.toast .plus { color: var(--energy); }

/* ---------- Reveal di default (JS li anima) ---------- */
[data-reveal] { will-change: transform, opacity; }
[data-hero-fade] { will-change: transform, opacity; }

/* ---------- Link "scheda completa" nei capitoli ---------- */
.chapter__more {
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  text-decoration: none; position: relative; white-space: nowrap;
}
.chapter__more::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1.5px; background: var(--energy);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.65,.05,.36,1);
}
.chapter__more:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   Scheda prodotto (prodotto.html) — riusa il sistema dei capitoli
   ============================================================ */

/* ---------- Hero della scheda ---------- */
.pdp-hero {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 0;
  overflow: clip;
}
.pdp-hero .chapter__bigword { left: auto; right: -4vw; top: 9%; }
.pdp-hero__grid {
  align-self: center;
  width: 100%; max-width: 1440px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(340px, 1.05fr) minmax(300px, .95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative; z-index: 1;
}
.pdp-hero .chapter__time { font-size: clamp(3.4rem, 7.5vw, 6.4rem); margin-bottom: 1.4rem; }
.pdp-time-mask { display: inline-block; overflow: hidden; }
.pdp-time-mask > span { display: inline-block; will-change: transform; }
.pdp-hero__timeline { margin-top: clamp(1.5rem, 4vh, 3rem); }
.pdp-hero__timeline .stop.is-active .stop__bar { transform: scaleX(1); }

.pdp-crumb {
  display: flex; align-items: center; gap: .6rem;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
  margin-bottom: 1.8rem;
}
.pdp-crumb a { text-decoration: none; transition: color .25s ease; }
.pdp-crumb a:hover { color: var(--energy); }

/* Comprare */
.pdp-buy { margin-top: 2.2rem; }
.pdp-price { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.pdp-price__note { font-size: .85rem; color: var(--ink-soft); }
.pdp-buy__row { margin-top: 1.2rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.pdp-qty {
  display: inline-flex; align-items: center; gap: .9rem;
  border: 1.5px solid rgba(58, 62, 92, .3);
  border-radius: var(--radius-pill);
  padding: .6rem 1rem;
}
.pdp-qty button {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1;
  transition: background-color .25s ease, color .25s ease;
}
.pdp-qty button:hover { background: var(--energy); color: var(--white); }
.pdp-qty b {
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 1.2em; text-align: center;
}
.pdp-trust { margin-top: 1.1rem; font-size: .78rem; color: var(--ink-soft); letter-spacing: .03em; }

/* Galleria: composizione asimmetrica, scatola grande + viste piccole */
.pdp-gallery { position: relative; display: flex; flex-direction: column; gap: 1rem; align-items: flex-end; }
.pdp-gallery__main {
  width: min(30vw, 440px); aspect-ratio: 4 / 5;
  margin-right: clamp(0px, 3vw, 3rem);
  overflow: hidden; border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  will-change: transform;
}
.pdp-gallery__main img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.pdp-gallery__thumbs { display: flex; gap: .8rem; align-self: flex-start; margin-left: 14%; }
.pdp-thumb {
  width: 74px; aspect-ratio: 4 / 5;
  border-radius: 12px; overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  box-shadow: 0 8px 24px -12px rgba(58,62,92,.35);
  transition: border-color .3s ease, transform .3s ease;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover { transform: translateY(-3px); }
.pdp-thumb.is-active { border-color: var(--fl, var(--ink)); }

/* ---------- Dentro il più (valori) ---------- */
.pdp-values {
  display: grid;
  grid-template-columns: minmax(300px, 2fr) minmax(320px, 3fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  max-width: 1300px; margin: 0 auto;
}
.pdp-none { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.pdp-none li {
  font-family: var(--font-display); font-weight: 500;
  font-size: .8rem; letter-spacing: .05em;
  padding: .45rem 1rem;
  border: 1.5px solid rgba(58, 62, 92, .25);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
}
.vnr {
  display: grid; grid-template-columns: 52px 1fr auto;
  gap: .4rem 1.1rem; align-items: center;
  border-top: var(--hairline);
  padding: 1.2rem 0;
}
.vnr:last-child { border-bottom: var(--hairline); }
.vnr__code {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  box-shadow: 0 6px 18px -8px rgba(58,62,92,.3);
}
.vnr__label { display: flex; flex-direction: column; }
.vnr__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.vnr__does { font-size: .85rem; color: var(--ink-soft); }
.vnr__amount {
  text-align: right;
  font-family: var(--font-display); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vnr__vnr { display: block; font-size: .72rem; color: var(--ink-soft); font-weight: 400; }
.vnr__bar {
  grid-column: 2 / -1;
  height: 6px; border-radius: 99px; overflow: hidden;
  background: rgba(58, 62, 92, .1);
}
.vnr__fill {
  display: block; height: 100%; width: 0%;
  border-radius: 99px;
  transition: width 1s cubic-bezier(.22,1,.36,1);
}
.pdp-values__note { margin-top: 1.2rem; font-size: .75rem; color: var(--ink-soft); max-width: 44ch; }

/* ---------- Il momento ---------- */
/* respiro sopra e sotto, come .voices in home: tiene i divisori
   adiacenti centrati nel vuoto tra le sezioni */
.moment { padding: clamp(4rem, 10vh, 8rem) 0; }
.moment__media { position: relative; height: 100svh; overflow: hidden; }
.moment__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.moment__quote {
  position: absolute; left: var(--gutter); bottom: clamp(2rem, 6vh, 4rem);
  display: flex; flex-direction: column;
  color: var(--white);
  text-shadow: 0 2px 30px rgba(58, 62, 92, .4);
  font-family: var(--font-display); font-weight: 600;
}
.moment__time {
  font-size: clamp(3.4rem, 9vw, 7rem);
  font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: -0.03em;
}
.moment__line {
  margin-top: .4rem;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  line-height: 1.15; letter-spacing: -0.015em;
  max-width: 18ch;
}

/* ---------- Le altre ore ---------- */
.related {
  padding: clamp(5rem, 12vh, 9rem) var(--gutter) clamp(6rem, 14vh, 10rem);
  max-width: 1300px; margin: 0 auto;
}
.related__head { max-width: 720px; margin-bottom: 2.6rem; }
.related__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.rel-card {
  display: flex; flex-direction: column; gap: .2rem;
  text-decoration: none;
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.2rem 1.2rem 1.5rem;
  box-shadow: 0 10px 34px -18px rgba(58,62,92,.28);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.rel-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.rel-card__time {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.5rem; font-variant-numeric: tabular-nums;
  color: var(--rc, var(--energy));
  margin-bottom: .6rem;
}
.rel-card img {
  border-radius: calc(var(--radius) - 8px);
  aspect-ratio: 4 / 5; object-fit: cover;
  margin-bottom: 1rem;
}
.rel-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: .02em; }
.rel-card__flavor { font-size: .85rem; color: var(--ink-soft); }
.rel-card__go { margin-top: .9rem; font-family: var(--font-display); font-weight: 500; font-size: .9rem; }
.related__cta {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  background: var(--ink); color: var(--cipria);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.related__cta p {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 2.1vw, 1.55rem);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---------- Scheda: responsive ---------- */
@media (max-width: 980px) {
  .pdp-values { grid-template-columns: 1fr; }
  .related__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .pdp-hero { min-height: auto; padding-bottom: 1rem; }
  .pdp-hero__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .pdp-gallery { order: -1; align-items: center; }
  .pdp-gallery__main { width: min(62vw, 320px); margin-right: 0; }
  .pdp-gallery__thumbs { align-self: center; margin-left: 0; }
  .pdp-hero .chapter__bigword { top: 2%; font-size: clamp(5rem, 24vw, 9rem); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }
  .hero__scrollhint-line, .chapter__time-colon, .glass__bubbles i { animation: none; }
  .cursor { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}