/* ============================================================
   ALTERA IDENTITY · sistema di design
   Font e colori vengono dal brand reale (etichetta Coral Gables):
   Cinzel per il marchio e i titoli, Jost Light per tutto il resto.
   ============================================================ */

/* --- font locali (OFL, uso commerciale libero) --- */
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

:root {
  /* fondali */
  --ink: #06070a;
  --ink-2: #0b0d12;
  --ink-3: #11141b;

  /* inchiostri */
  --bone: #f2efea;
  --bone-dim: #b9b3aa;
  --bone-mute: #7d786f;

  /* ori del marchio */
  --gold: #ba8d4a;
  --gold-light: #e7cc86;
  --gold-deep: #aa8b5f;

  /* filetti */
  --rule: rgba(242, 239, 234, 0.14);
  --rule-soft: rgba(242, 239, 234, 0.07);

  /* tipografia */
  --display: 'Cinzel', 'Times New Roman', serif;
  --sans: 'Jost', -apple-system, 'Helvetica Neue', sans-serif;

  /* misure */
  --gut: clamp(20px, 4.5vw, 64px);
  --nav-h: 78px;
  --max: 1560px;

  /* moto */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ink);
  /* lo smooth scroll e' gestito in JS con inerzia; niente doppio smoothing */
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.13rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   TIPOGRAFIA

   La scala e' stata alzata l'11/09/2026 COMPRIMENDOLA, non
   moltiplicandola. Il fondo era bassissimo — sedici regole sotto i 10 px, il
   menu a 9,6 — mentre la cima arrivava a 118: alzare tutto del 20% avrebbe
   sistemato il menu e gonfiato il titolo della home, che era gia' giusto.

   La curva applicata:  nuovo = v + 0,13 * v^0,35
     0,50rem -> +20%   le micro-etichette maiuscole
     0,60rem -> +18%   il menu
     0,92rem -> +14%   il testo corrente
     1,90rem -> +9%
     7,40rem -> +3%    il titolo della home, quasi fermo

   Nei clamp() e' scalata anche la parte in `vw`, con lo stesso rapporto:
   altrimenti alle larghezze intermedie — dove a vincere e' il vw — il testo
   non crescerebbe affatto, e la pagina si contraddirebbe a seconda della
   finestra.

   Restano fuori i 16px degli input: sotto quella misura iOS ingrandisce la
   pagina da solo quando si mette a fuoco un campo.
   ============================================================ */

.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  line-height: 1.04;
  margin: 0;
}

.d-hero {
  font-size: clamp(2.782rem, 7.92vw, 7.662rem);
  letter-spacing: 0.035em;
  line-height: 0.98;
}
.d-1 {
  font-size: clamp(2.063rem, 4.45vw, 3.702rem);
}
.d-2 {
  font-size: clamp(1.598rem, 2.98vw, 2.474rem);
}
.d-3 {
  font-size: clamp(1.234rem, 1.91vw, 1.65rem);
}

/* occhiello: la voce minuta che introduce ogni sezione */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.73rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--bone-mute);
  margin: 0;
}

.lede {
  font-size: clamp(1.13rem, 1.41vw, 1.276rem);
  color: var(--bone-dim);
  max-width: 46ch;
  line-height: 1.72;
}

.body-sm {
  font-size: 1.046rem;
  color: var(--bone-mute);
  line-height: 1.78;
  max-width: 52ch;
}

/* il corsivo del payoff: "We create identities." */
.accent {
  font-style: italic;
  color: var(--gold-light);
}

/* colonna di parole-chiave, tutte maiuscole distanziate */
.keys {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.772rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--bone-dim);
}
.keys li + li {
  margin-top: 0.62em;
}

/* ============================================================
   IMPAGINATO
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gut);
}

section {
  position: relative;
}

.band {
  padding-block: clamp(88px, 13vh, 172px);
}
.band--tight {
  padding-block: clamp(60px, 8vh, 104px);
}
.band--ink2 {
  background: var(--ink-2);
}

.center {
  text-align: center;
}

.rule {
  height: 1px;
  background: var(--rule-soft);
  border: 0;
  margin: 0;
}

/* ============================================================
   NAVIGAZIONE
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--gut);
  padding-inline: var(--gut);
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease),
    border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(6, 7, 10, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--rule-soft);
}

.nav__logo {
  flex: 0 0 auto;
  /* aria sopra e sotto il marchio: senza, tocca il bordo della barra */
  padding-block: 12px;
  display: block;
}
.nav__logo img {
  width: 92px;
  height: auto;
  opacity: 0.95;
}

.nav__links {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 40px);
}

.nav__link {
  font-size: 0.709rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bone-dim);
  position: relative;
  padding-block: 6px;
  transition: color 0.35s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--bone);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

/* pulsante-testo con cerchio e freccia */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bone);
  flex: 0 0 auto;
}
.cta__ring {
  width: 26px;
  height: 26px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease),
    transform 0.5s var(--ease);
}
.cta__ring svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}
.cta:hover .cta__ring {
  border-color: var(--gold);
  background: rgba(186, 141, 74, 0.14);
  transform: translateX(3px);
}
.cta--lg {
  font-size: 0.93rem;
}
.cta--lg .cta__ring {
  width: 34px;
  height: 34px;
}

/* apri/chiudi mobile */
.nav__burger {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 1px;
  margin: 5px auto;
  background: var(--bone);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.nav.is-open .nav__burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav.is-open .nav__burger span:nth-child(2) {
  opacity: 0;
}
.nav.is-open .nav__burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(6, 7, 10, 0.97);
  backdrop-filter: blur(18px);
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
}
.drawer a {
  font-family: var(--display);
  font-size: 1.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-block: 0.5em;
  color: var(--bone-dim);
}
.drawer a:hover {
  color: var(--gold-light);
}

/* ============================================================
   HERO · la scena Three.js vive dietro al testo
   ============================================================ */

/* ------------------------------------------------------------
   IL PALCO
   La scena non sta dentro l'hero: e' fissa dietro TUTTA la pagina.
   Lo scroll del documento e' il carrello della camera, e i contenuti
   le scorrono sopra. Nei varchi trasparenti la citta' si rivede.
   ------------------------------------------------------------ */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #04050a;
}
#scene {
  width: 100%;
  height: 100%;
  display: block;
}

/* piano statico: si vede se WebGL non c'e' */
.stage__plate {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #04050a center/cover no-repeat;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.stage.no-webgl .stage__plate {
  opacity: 1;
}
.stage.no-webgl #scene {
  display: none;
}

/* variante del palco: al posto del canvas, dei video guidati dallo scroll.
   Stessa posizione e stesso ruolo, cambia solo cosa produce l'immagine. */
.stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}

/* i contenuti stanno sopra il palco */
main,
.foot {
  position: relative;
  z-index: 1;
}

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  background: transparent; /* qui la scena si vede per intero */
}

/* varco: nessun contenuto, solo la citta' che si muove */
.gap {
  position: relative;
  height: 68vh;
  min-height: 340px;
}
.gap--sm {
  height: 46vh;
  min-height: 220px;
}

/* velo dietro ai blocchi di testo: la scena resta percepibile, il testo si legge */
.band {
  background: rgba(6, 7, 10, 0.84);
}
.band--solid {
  background: rgba(6, 7, 10, 0.94);
}
.band--ink2 {
  background: rgba(9, 11, 16, 0.9);
}

/* raccordi in dissolvenza: nessuno stacco netto fra velo e varco */
.band::before,
.band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
}
.band::before {
  top: -89px;
  background: linear-gradient(to bottom, transparent, rgba(6, 7, 10, 0.84));
}
.band::after {
  bottom: -89px;
  background: linear-gradient(to top, transparent, rgba(6, 7, 10, 0.84));
}
.band--solid::before {
  background: linear-gradient(to bottom, transparent, rgba(6, 7, 10, 0.94));
}
.band--solid::after {
  background: linear-gradient(to top, transparent, rgba(6, 7, 10, 0.94));
}
.band--ink2::before {
  background: linear-gradient(to bottom, transparent, rgba(9, 11, 16, 0.9));
}
.band--ink2::after {
  background: linear-gradient(to top, transparent, rgba(9, 11, 16, 0.9));
}

/* velo che tiene leggibile il testo sopra la scena */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
      100deg,
      rgba(4, 5, 10, 0.86) 0%,
      rgba(4, 5, 10, 0.5) 38%,
      rgba(4, 5, 10, 0.14) 62%,
      rgba(4, 5, 10, 0.42) 100%
    ),
    linear-gradient(to bottom, rgba(4, 5, 10, 0.72) 0%, transparent 26%, transparent 62%, rgba(4, 5, 10, 0.82) 100%);
}

.hero__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h);
}

.hero__sub {
  margin: 1.9em 0 0;
  font-size: clamp(1.078rem, 1.36vw, 1.234rem);
  color: var(--bone-dim);
  letter-spacing: 0.02em;
}

/* rotaia sinistra: numero del capitolo + filetto che cresce */
.rail {
  position: absolute;
  left: var(--gut);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
.rail__num {
  font-family: var(--display);
  font-size: 0.794rem;
  letter-spacing: 0.16em;
  color: var(--bone-mute);
}
.rail__line {
  width: 1px;
  height: clamp(80px, 16vh, 150px);
  background: var(--rule-soft);
  position: relative;
  overflow: hidden;
}
.rail__line::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--rail-fill, 0%);
  background: linear-gradient(to bottom, var(--gold), rgba(186, 141, 74, 0.1));
  transition: height 0.25s linear;
}

/* etichetta di sezione, in basso a sinistra come nel riferimento */
.tag {
  position: fixed;
  left: var(--gut);
  bottom: 22px;
  z-index: 45;
  font-size: 0.666rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--bone-mute);
  display: flex;
  align-items: center;
  gap: 0.8em;
  pointer-events: none;
  mix-blend-mode: difference;
}
.tag::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--gold);
}

/* parola verticale a destra */
.vertical {
  position: absolute;
  right: calc(var(--gut) * 0.55);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-size: clamp(0.73rem, 1vw, 0.899rem);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(242, 239, 234, 0.3);
  pointer-events: none;
}

/* invito a scorrere */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.623rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--bone-mute);
  pointer-events: none;
}
.scroll-hint__line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--rule), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-hint__line::after {
  content: '';
  position: absolute;
  top: -46px;
  left: 0;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, var(--gold-light));
  animation: drip 2.6s var(--ease-io) infinite;
}
@keyframes drip {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(92px);
  }
}

/* ============================================================
   RIVELAZIONI SU SCROLL
   ============================================================ */

/* riga di testo che sale da sotto una maschera */
.line {
  display: block;
  overflow: hidden;
}
.line > * {
  display: block;
  transform: translateY(105%);
  transition: transform 1.15s var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-in .line > *,
.line.is-in > * {
  transform: translateY(0);
}

/* dissolvenza con lieve salita */
.rise {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-in .rise,
.rise.is-in {
  opacity: 1;
  transform: none;
}

/* filetto che si apre da sinistra */
.draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-in .draw,
.draw.is-in {
  transform: scaleX(1);
}

/* immagine che si svela dietro una tendina + lieve zoom-out */
.veil {
  position: relative;
  overflow: hidden;
}
.veil > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  transition: transform 1.6s var(--ease);
}
.veil::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: bottom;
  transition: transform 1.25s var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-in .veil > img,
.veil.is-in > img {
  transform: scale(1);
}
.is-in .veil::after,
.veil.is-in::after {
  transform: scaleY(0);
}

/* ============================================================
   SEZIONE FILOSOFIA
   ============================================================ */

.philo {
  text-align: center;
}
.philo__title {
  margin-top: 1.1em;
}
.philo__list {
  list-style: none;
  margin: 2.6em auto 0;
  padding: 0;
  font-size: 0.772rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--bone-mute);
  line-height: 2.5;
}

/* ============================================================
   CITTA · "WHO ARE YOU?"
   ============================================================ */

.cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: clamp(38px, 5vw, 64px);
}

.city {
  position: relative;
  aspect-ratio: 3 / 3.6;
  overflow: hidden;
  display: block;
  background: var(--ink-3);
  isolation: isolate;
}
.city__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.5s var(--ease), filter 1.1s var(--ease);
  filter: saturate(0.86) brightness(0.76);
}
.city:hover .city__img {
  transform: scale(1.11);
  filter: saturate(1) brightness(0.92);
}
.city::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6, 7, 10, 0.42) 0%,
    rgba(6, 7, 10, 0.16) 40%,
    rgba(6, 7, 10, 0.88) 100%
  );
  z-index: 1;
  transition: opacity 0.9s var(--ease);
}
.city:hover::after {
  opacity: 0.86;
}
.city__body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 38px);
}
.city__name {
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.86vw, 2.679rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.85em;
  line-height: 1;
}
.city__cta {
  margin-top: auto;
}

/* ============================================================
   OUR PROJECT · testo a sinistra, immagini a destra
   ============================================================ */

.project {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) 1.18fr;
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
/* Frasi in caso frase: NON in Cinzel.
   Cinzel e' un carattere epigrafico: le sue minuscole sono maiuscoletto, quindi
   una frase normale diventa un maiuscoletto involontario. Il display in
   maiuscolo resta a Cinzel; qui serve un carattere con minuscole vere. */
.project__title {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.422rem, 2.28vw, 2.011rem);
  text-transform: none;
  letter-spacing: 0.005em;
  line-height: 1.42;
  margin: 1.1em 0 1.5em;
  color: var(--bone);
}
.project__figs {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 2px;
}
.project__figs .veil {
  aspect-ratio: 1 / 1.32;
}
.project__figs .veil:last-child {
  aspect-ratio: auto;
}

/* ============================================================
   STRISCIA INSPIRATION · scorre da sola
   ============================================================ */

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--rule-soft);
  padding-block: 0;
  background: var(--ink-2);
}
.marquee__label {
  position: absolute;
  left: var(--gut);
  top: 14px;
  z-index: 3;
  font-size: 0.645rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--bone-mute);
  display: flex;
  align-items: center;
  gap: 0.7em;
  pointer-events: none;
}
.marquee__label::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--gold);
}
.marquee__track {
  display: flex;
  gap: 2px;
  width: max-content;
  animation: slide 64s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__track img {
  height: clamp(150px, 21vh, 232px);
  width: auto;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.72);
  transition: filter 0.8s var(--ease);
}
.marquee__track img:hover {
  filter: saturate(1) brightness(0.95);
}
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ============================================================
   QUARTIERI · pagina citta
   ============================================================ */

.hoods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 2px;
  margin-top: clamp(34px, 4vw, 56px);
}
.hood {
  position: relative;
  aspect-ratio: 3 / 4.1;
  overflow: hidden;
  background: var(--ink-3);
}
.hood img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.84) brightness(0.7);
  transform: scale(1.03);
  transition: transform 1.4s var(--ease), filter 1s var(--ease);
}
.hood:hover img {
  transform: scale(1.1);
  filter: saturate(1) brightness(0.88);
}
.hood::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 7, 10, 0.2), rgba(6, 7, 10, 0.9));
  z-index: 1;
}
.hood__body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(18px, 1.8vw, 26px);
}
.hood__name {
  font-family: var(--display);
  font-size: clamp(1.067rem, 1.53vw, 1.339rem);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.9em;
}

/* ============================================================
   HERO INTERNO · pagine secondarie
   ============================================================ */

.subhero {
  position: relative;
  min-height: clamp(58vh, 64vh, 78vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-2);
}
.subhero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.9);
  transform: scale(1.06);
  animation: driftIn 12s var(--ease) forwards;
}
@keyframes driftIn {
  to {
    transform: scale(1);
  }
}
.subhero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 7, 10, 0.68) 0%, transparent 34%, rgba(6, 7, 10, 0.92) 100%);
}
.subhero__body {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(46px, 7vh, 96px);
  padding-top: calc(var(--nav-h) + 40px);
  width: 100%;
}

/* ============================================================
   DUE COLONNE · manifesto
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.stack > * + * {
  margin-top: 1.15em;
}

.manifesto p {
  margin: 0 0 1.05em;
  color: var(--bone-dim);
}
.manifesto strong {
  color: var(--bone);
  font-weight: 300;
}

/* tre pilastri della visione */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(26px, 3.4vw, 54px);
  margin-top: clamp(40px, 5vw, 70px);
}
.pillar__mark {
  width: 30px;
  height: 30px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1;
  margin-bottom: 1.4em;
  opacity: 0.9;
}
.pillar h3 {
  font-family: var(--sans);
  font-size: 0.751rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--bone);
  margin: 0 0 0.9em;
}

/* citazione centrata · minuscole vere, quindi Jost e non Cinzel */
.quote {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.234rem, 2.19vw, 1.857rem);
  line-height: 1.62;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--bone);
  max-width: 34ch;
  margin: 0 auto;
  text-align: center;
}

/* ============================================================
   GRIGLIA INSPIRATION · pagina dedicata
   ============================================================ */

.mosaic {
  columns: 3;
  column-gap: 2px;
  margin-top: clamp(34px, 4vw, 58px);
}
.mosaic > * {
  margin-bottom: 2px;
  break-inside: avoid;
}
.mosaic img {
  width: 100%;
  filter: saturate(0.82) brightness(0.74);
  transition: filter 0.9s var(--ease), transform 1.3s var(--ease);
}
.mosaic a:hover img {
  filter: saturate(1) brightness(0.95);
}

/* ============================================================
   PIEDE
   ============================================================ */

.foot {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(40px, 5vw, 68px) 26px;
  background: var(--ink);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
.foot__logo img {
  width: 128px;
  opacity: 0.9;
}
.foot__claim {
  font-size: 0.709rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--bone-dim);
  line-height: 2.2;
  text-align: center;
}
.foot__links {
  display: flex;
  gap: clamp(16px, 2vw, 34px);
  justify-content: flex-end;
  font-size: 0.687rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bone-mute);
}
.foot__links a:hover {
  color: var(--gold-light);
}
.foot__legal {
  margin-top: clamp(28px, 4vw, 46px);
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.623rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(125, 120, 111, 0.75);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* ============================================================
   QUARTIERE CON PROFUMO
   La scheda mostra il quartiere; avvicinandosi compare il flacone che
   ne porta il nome. Il prodotto non si annuncia: si lascia trovare.
   ============================================================ */

.hood--shop {
  cursor: pointer;
}
.hood__pack {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  /* il fondo generoso tiene il flacone sopra il blocco di testo della scheda */
  padding: 6% 11% 42%;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
  pointer-events: none;
}
.hood__pack img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.7));
}
.hood--shop:hover .hood__pack,
.hood--shop:focus-visible .hood__pack {
  opacity: 1;
  transform: none;
}
/* la foto del quartiere arretra per lasciare la scena al flacone */
.hood--shop:hover img.hood__bg {
  transform: scale(1.12);
  filter: saturate(0.6) brightness(0.4) blur(2px);
}
.hood--shop:hover::after {
  background: linear-gradient(to bottom, rgba(6, 7, 10, 0.55), rgba(6, 7, 10, 0.95));
}
.hood__price {
  display: block;
  margin-top: 1em;
  font-size: 0.709rem;
  letter-spacing: 0.24em;
  color: var(--gold-light);
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.1s;
}
.hood--shop:hover .hood__price {
  opacity: 1;
}

/* ============================================================
   SCHEDA PRODOTTO
   ============================================================ */

.prod {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.prod__fig {
  position: relative;
  background: linear-gradient(160deg, #14161d, #0a0b10);
  border: 1px solid var(--rule-soft);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.prod__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prod__eyebrow {
  color: var(--gold-light);
}
.prod__name {
  font-family: var(--display);
  font-size: clamp(2.166rem, 4.55vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1;
  margin: 0.35em 0 0.5em;
}
.prod__price {
  font-family: var(--sans);
  font-size: 1.391rem;
  color: var(--bone);
  letter-spacing: 0.04em;
}
.prod__price small {
  font-size: 0.73rem;
  letter-spacing: 0.24em;
  color: var(--bone-mute);
  margin-left: 1em;
  text-transform: uppercase;
}

/* piramide olfattiva */
.notes {
  list-style: none;
  margin: 2.2em 0 0;
  padding: 1.4em 0 0;
  border-top: 1px solid var(--rule-soft);
}
.notes li {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 1em;
  padding-block: 0.7em;
  font-size: 1.025rem;
  color: var(--bone-dim);
  border-bottom: 1px solid var(--rule-soft);
}
.notes b {
  font-weight: 300;
  font-size: 0.709rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bone-mute);
  padding-top: 0.35em;
}

/* riga d'acquisto */
.buy {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 2.4em;
}
.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule);
}
.qty button {
  width: 42px;
  background: none;
  border: 0;
  color: var(--bone);
  font-size: 1rem;
  cursor: pointer;
  font-family: var(--sans);
}
.qty button:hover {
  background: rgba(242, 239, 234, 0.07);
}
.qty span {
  min-width: 42px;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  border-inline: 1px solid var(--rule);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  padding: 17px 34px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #100c05;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
.btn:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}
.btn--ghost {
  background: none;
  color: var(--bone);
  border-color: var(--rule);
}
.btn--ghost:hover {
  background: rgba(242, 239, 234, 0.07);
  border-color: var(--bone-mute);
  color: var(--bone);
}
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn--wide {
  width: 100%;
}

/* ============================================================
   BORSA E CASSA
   ============================================================ */

.shop-wrap {
  padding-top: calc(var(--nav-h) + clamp(40px, 7vh, 90px));
}

.cart {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}

.line-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  align-items: center;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule-soft);
}
.line-item img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: var(--ink-3);
}
.line-item__name {
  font-family: var(--display);
  font-size: 1.182rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5em;
}
.line-item__city {
  font-size: 0.687rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--bone-mute);
}
.line-item__right {
  text-align: right;
  display: grid;
  gap: 10px;
  justify-items: end;
}
.link-min {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.666rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bone-mute);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-min:hover {
  color: var(--bone);
}

.summary {
  border: 1px solid var(--rule-soft);
  padding: clamp(22px, 3vw, 34px);
  background: rgba(255, 255, 255, 0.02);
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}
.summary h2 {
  font-family: var(--sans);
  font-size: 0.709rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--bone-mute);
  margin: 0 0 1.6em;
}
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 0.6em;
  font-size: 1.025rem;
  color: var(--bone-dim);
}
.summary__row--tot {
  border-top: 1px solid var(--rule-soft);
  margin-top: 0.8em;
  padding-top: 1.1em;
  color: var(--bone);
  font-size: 1.182rem;
}
.summary .btn {
  margin-top: 1.6em;
}

.empty {
  text-align: center;
  padding-block: clamp(50px, 9vh, 110px);
}

/* modulo */
.field {
  display: block;
  margin-bottom: 18px;
}
.field span {
  display: block;
  font-size: 0.666rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bone-mute);
  margin-bottom: 8px;
}
.field input,
.field select {
  width: 100%;
  /* 16px pieni: sotto questa misura iOS ingrandisce da solo alla messa a fuoco */
  font-size: 16px;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--bone);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rule);
  padding: 13px 14px;
  border-radius: 0;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}
.field input::placeholder {
  color: rgba(125, 120, 111, 0.7);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.step-title {
  font-family: var(--sans);
  font-size: 0.709rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--bone-mute);
  margin: 2.6em 0 1.4em;
  padding-top: 1.6em;
  border-top: 1px solid var(--rule-soft);
}
.step-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* metodo di pagamento simulato: nessun campo raccoglie dati reali */
.pay {
  display: grid;
  gap: 10px;
}
.pay label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--rule);
  cursor: pointer;
  font-size: 1.025rem;
  color: var(--bone-dim);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.pay label:has(input:checked) {
  border-color: var(--gold);
  background: rgba(186, 141, 74, 0.08);
  color: var(--bone);
}
.pay input {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
}
.pay__card {
  margin-left: auto;
  font: 12px/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.14em;
  color: var(--bone-mute);
}

/* avviso: questa e' una dimostrazione, non un incasso */
.demo-note {
  border: 1px solid rgba(186, 141, 74, 0.4);
  background: rgba(186, 141, 74, 0.08);
  padding: 14px 16px;
  font-size: 0.899rem;
  line-height: 1.6;
  color: var(--bone-dim);
  margin-bottom: 2.4em;
}
.demo-note b {
  color: var(--gold-light);
  font-weight: 300;
}

/* conferma */
.done {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}
.done__num {
  font: 0.72rem/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.2em;
  color: var(--gold-light);
  border: 1px solid rgba(186, 141, 74, 0.4);
  padding: 12px 18px;
  display: inline-block;
  margin-top: 2em;
}

/* selettore di lingua: due sigle, quella attiva in oro */
.lang {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.687rem;
  letter-spacing: 0.2em;
}
.lang__item {
  color: var(--bone-mute);
  padding: 4px 2px;
  transition: color 0.3s var(--ease);
}
.lang__item:hover {
  color: var(--bone);
}
.lang__item[aria-current='true'] {
  color: var(--gold-light);
}
.lang__item + .lang__item {
  border-left: 1px solid var(--rule-soft);
  padding-left: 0.7em;
}

/* contatore borsa nella navigazione */
.nav__bag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.709rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bone-dim);
}
.nav__bag:hover {
  color: var(--bone);
}
.nav__bag em {
  font-style: normal;
  min-width: 18px;
  height: 18px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #100c05;
  font-size: 0.687rem;
  letter-spacing: 0;
}
.nav__bag em.is-pieno {
  display: grid;
}

/* conferma discreta dopo l'aggiunta */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  z-index: 120;
  background: rgba(10, 11, 16, 0.96);
  border: 1px solid var(--rule);
  color: var(--bone);
  padding: 13px 20px;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.toast.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (max-width: 900px) {
  .prod,
  .cart {
    grid-template-columns: 1fr;
  }
  .summary {
    position: static;
  }
}
@media (max-width: 760px) {
  .line-item {
    grid-template-columns: 72px 1fr;
  }
  .line-item img {
    width: 72px;
    height: 72px;
  }
  .line-item__right {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
  /* sul telefono il flacone si mostra sempre: non esiste il passaggio del mouse */
  .hood__pack {
    opacity: 1;
    transform: none;
    padding: 16% 18% 26%;
  }
  .hood--shop img.hood__bg {
    filter: saturate(0.6) brightness(0.42);
  }
  .hood__price {
    opacity: 1;
  }
}

/* pannello diagnostico: compare solo con ?debug nell'indirizzo */
.diag {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 999;
  max-width: min(92vw, 560px);
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #9dff9d;
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
  overflow-x: auto;
  pointer-events: none;
}

/* ============================================================
   PRELOADER
   ============================================================ */

.pre {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  display: grid;
  place-content: center;
  gap: 26px;
  justify-items: center;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.pre.is-done {
  opacity: 0;
  visibility: hidden;
}
.pre img {
  width: 96px;
  opacity: 0.9;
  animation: breathe 3.4s ease-in-out infinite;
}
@keyframes breathe {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.pre__bar {
  width: 148px;
  height: 1px;
  background: var(--rule-soft);
  overflow: hidden;
}
.pre__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width 0.3s linear;
}
.pre__pct {
  font-size: 0.645rem;
  letter-spacing: 0.3em;
  color: var(--bone-mute);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .cities {
    grid-template-columns: 1fr;
  }
  .city {
    aspect-ratio: 16 / 11;
  }
  .project,
  .split {
    grid-template-columns: 1fr;
  }
  .project__figs {
    grid-template-columns: 1fr 1fr;
  }
  .mosaic {
    columns: 2;
  }
  .vertical {
    display: none;
  }
}

@media (max-width: 760px) {
  :root {
    --nav-h: 68px;
  }
  .nav__links {
    display: none;
  }
  /* Tasto del menu a destra, marchio centrato SULLA PAGINA.
     Con il solo centraggio flex il marchio finirebbe al centro dello spazio
     rimasto, cioe' spostato a sinistra di mezza larghezza del tasto: per
     centrarlo davvero va tolto dal flusso. */
  .nav__burger {
    display: block;
    margin-left: auto;
    margin-right: -8px;
  }
  .nav__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding-block: 9px;
  }
  .nav__logo img {
    width: 76px;
  }
  .nav .cta {
    display: none;
  }
  /* il selettore resta: cambiare lingua da telefono deve essere possibile */
  .lang {
    margin-right: 4px;
  }
  .nav__bag em {
    margin-left: -2px;
  }
  .nav__links--mobile {
    display: none;
  }
  .rail {
    display: none;
  }
  .hero__veil {
    background: linear-gradient(
      to bottom,
      rgba(4, 5, 10, 0.8) 0%,
      rgba(4, 5, 10, 0.34) 42%,
      rgba(4, 5, 10, 0.92) 100%
    );
  }
  /* Su telefono il video scorre da solo e il cambio citta' e' uno scatto
     secco dell'opacita': qui serve una transizione, mentre sul desktop
     la dissolvenza la governa lo scroll frame per frame. */
  .stage video {
    transition: opacity 0.55s var(--ease);
  }
  .foot__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .foot__links {
    justify-content: center;
  }
  .foot__legal {
    justify-content: center;
    text-align: center;
  }
  .mosaic {
    columns: 1;
  }
  .hoods {
    grid-template-columns: 1fr 1fr;
  }
  .tag {
    display: none;
  }
  .marquee__track img {
    height: 138px;
  }
}

/* ============================================================
   RISPETTO DELLE PREFERENZE DI MOTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .line > *,
  .rise,
  .draw,
  .veil > img {
    transform: none !important;
    opacity: 1 !important;
  }
  .veil::after {
    transform: scaleY(0) !important;
  }
  .marquee__track {
    animation: none !important;
  }
}

/* messa a fuoco visibile per chi naviga da tastiera */
:focus-visible {
  outline: 1px solid var(--gold-light);
  outline-offset: 4px;
}

/* ============================================================
   WOOCOMMERCE · riportato dentro il disegno
   WooCommerce porta un proprio foglio di stile pensato per un tema chiaro:
   pulsanti viola, campi bianchi, angoli arrotondati. Su un sito nero e
   dorato stona tutto. Qui i suoi componenti vengono ricondotti agli stessi
   token del resto del sito — non ridisegnati, ricondotti: gli stessi colori,
   lo stesso carattere, le stesse misure dei pulsanti che ci sono già.

   Il nostro foglio viene caricato DOPO il suo (vedi la dipendenza in
   functions.php): senza quell'ordine queste regole non vincerebbero.
   ============================================================ */

/* --- pulsanti --- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button {
  /* I bottoni stanno SOPRA la scala del testo: sono azioni, e con le
     maiuscole spaziate serve piu' corpo per leggersi. Questo blocco era
     per giunta rimasto indietro quando la scala e' stata alzata — il
     selettore contiene `input.button` ed era finito nell'elenco di quelli
     da non toccare, che serviva a proteggere i CAMPI, non i bottoni. */
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #100c05;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.4;
  padding: 17px 34px;
  border-radius: 0;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-components-button:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #100c05;
}
/* il secondario resta un contorno, come .btn--ghost */
.woocommerce a.button.wc-backward,
.woocommerce .cart .button[name='update_cart'],
.woocommerce a.added_to_cart {
  background: none;
  color: var(--bone);
  border-color: var(--rule);
}

/* --- campi: erano bianchi su fondo nero --- */
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.cart td.actions .coupon .input-text,
.wc-block-components-text-input input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rule);
  color: var(--bone);
  border-radius: 0;
  /* 16 px pieni: sotto, iOS ingrandisce da solo alla messa a fuoco */
  font-size: 16px;
  font-family: var(--sans);
  font-weight: 300;
  padding: 12px 14px;
}
.woocommerce .quantity .qty {
  width: 64px;
  text-align: center;
  padding: 12px 4px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce .quantity .qty:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}
.woocommerce form .form-row label {
  font-size: 0.666rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bone-mute);
}

/* i tasti − e + attorno alla quantità */
.qta-meno,
.qta-piu {
  background: none;
  border: 1px solid var(--rule);
  color: var(--bone);
  width: 42px;
  align-self: stretch;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1.13rem;
}
.qta-meno:hover,
.qta-piu:hover {
  background: rgba(242, 239, 234, 0.07);
}
.woocommerce div.product form.cart .quantity {
  display: inline-flex;
  margin-right: 12px;
}
.woocommerce div.product form.cart {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
}

/* --- avvisi: erano su fondo chiaro --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
  background: rgba(255, 255, 255, 0.03);
  border-top: 2px solid var(--gold);
  color: var(--bone-dim);
  font-size: 1.025rem;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--gold);
}

/* --- tabelle di carrello e cassa --- */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-cart .cart_totals table {
  background: transparent;
  border-color: var(--rule-soft);
  color: var(--bone-dim);
}
.woocommerce table.shop_table th {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.687rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bone-mute);
}
.woocommerce table.shop_table .product-name a {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bone);
}
.woocommerce .cart-collaterals h2,
.woocommerce-checkout h3 {
  font-family: var(--sans);
  font-size: 0.709rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--bone-mute);
}
.woocommerce ul#shipping_method,
.woocommerce-checkout #payment,
.woocommerce-checkout #payment div.payment_box {
  background: rgba(255, 255, 255, 0.02);
  color: var(--bone-dim);
  border-radius: 0;
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: rgba(255, 255, 255, 0.02);
}

/* prezzi: l'oro chiaro è il colore del valore in tutto il sito */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce table.shop_table .amount {
  color: var(--bone);
}
.woocommerce div.product p.price del {
  color: var(--bone-mute);
  opacity: 0.7;
}
.woocommerce div.product p.price ins {
  color: var(--gold-light);
  text-decoration: none;
}

/* --- riga d'acquisto: una sola fila --- */
/* WooCommerce mette form.cart in griglia con 30px di distanza: qui i tre
   pezzi della quantità e il pulsante devono stare in fila e attaccati, come
   nel sito statico. Si punta a .buy, che è nostro, per non dipendere da come
   WooCommerce chiama i suoi contenitori. */
.buy form.cart,
.prod form.cart {
  display: flex !important;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0 !important;
  grid-template-columns: none !important;
  margin: 0;
}
.buy form.cart .quantity,
.prod form.cart .quantity {
  display: inline-flex;
  float: none;
  width: auto;
  margin: 0;
}
.buy form.cart .single_add_to_cart_button,
.prod form.cart .single_add_to_cart_button {
  margin-left: 14px;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* i due tasti restano incollati al campo, senza bordi doppi */
.buy .qta-meno { border-right: 0; }
.buy .qta-piu { border-left: 0; }
.buy form.cart .quantity .qty { border-inline: 1px solid var(--rule); }

@media (max-width: 520px) {
  .buy form.cart .single_add_to_cart_button,
  .prod form.cart .single_add_to_cart_button {
    margin-left: 0;
    margin-top: 14px;
    width: 100%;
  }
}

/* --- il selettore di GTranslate vestito come il nostro --- */
/* GTranslate produce due <a class="glink">: gli si dà l'aspetto delle sigle
   del sito statico invece di ridisegnare un selettore nostro, che
   significherebbe reimplementare il cambio lingua. */
.lang .gtranslate_wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.lang .glink {
  color: var(--bone-mute);
  font-family: var(--sans);
  font-size: 0.687rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 2px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.lang .glink:hover {
  color: var(--bone);
}
.lang .glink.gt-current-lang {
  color: var(--gold-light);
}
.lang .glink + .glink {
  border-left: 1px solid var(--rule-soft);
  padding-left: 0.7em;
}
.lang .glink img {
  display: none; /* niente bandierine: il sito non le usa */
}

/* --- pagine dello shop a tutta larghezza --- */
/* Carrello, cassa, conferma e account contengono tabelle e moduli su due
   colonne: la misura da lettura di .lede li strozzava a 427 px. Qui hanno
   tutta la pagina, e i blocchi di WooCommerce tornano a respirare. */
.shop-page {
  width: 100%;
  max-width: none;
}
.shop-page__title {
  margin: 0.45em 0 1.4em;
}
.shop-page .lede,
.shop-page .body-sm {
  max-width: none;
}
/* i blocchi nuovi di WooCommerce si allargano da soli se glielo si concede */
.shop-page .wp-block-woocommerce-cart,
.shop-page .wp-block-woocommerce-checkout,
.shop-page .wc-block-components-sidebar-layout {
  max-width: none;
  width: 100%;
}
.shop-page .alignwide,
.shop-page .alignfull {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}
/* carrello e cassa a blocchi: due colonne, riepilogo a destra */
.shop-page .wc-block-cart,
.shop-page .wc-block-checkout {
  display: block;
}
.shop-page .wc-block-components-sidebar-layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  align-items: flex-start;
}
.shop-page .wc-block-components-main {
  flex: 1 1 min(100%, 34rem);
  min-width: 0;
}
.shop-page .wc-block-components-sidebar {
  flex: 0 1 22rem;
  min-width: 0;
}
/* il carrello classico (non a blocchi) */
.shop-page .woocommerce-cart-form {
  width: 100%;
}
.shop-page .cart-collaterals,
.shop-page .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
}
.shop-page .cart-collaterals {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.4em;
}
.shop-page .cart-collaterals .cart_totals {
  max-width: 24rem;
}
/* cassa classica: dati a sinistra, ordine a destra */
.shop-page .woocommerce-checkout .col2-set .col-1,
.shop-page .woocommerce-checkout .col2-set .col-2 {
  width: 48%;
}
@media (max-width: 760px) {
  .shop-page .woocommerce-checkout .col2-set .col-1,
  .shop-page .woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
  }
  .shop-page .cart-collaterals .cart_totals {
    max-width: none;
  }
}

/* il faccino triste del carrello vuoto: fuori luogo su un sito così */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before,
.cart-empty::before {
  display: none !important;
}
.wc-block-cart__empty-cart__title,
.cart-empty {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
}
/* i titoli dei blocchi di WooCommerce parlano la lingua del sito */
.shop-page .wp-block-heading,
.shop-page .wc-block-components-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--bone);
}

/* ---- barra dell'archivio: conteggio a sinistra, ordinamento a destra ---- */
.shop-page__barra {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 0 0 2.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.shop-page__barra .woocommerce-result-count {
  margin: 0;
  font-size: 0.857rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.shop-page__barra form.woocommerce-ordering { margin: 0; }

/* il menu a tendina di serie e' bianco su nero: qui non passa */
.woocommerce-ordering select,
.shop-page select,
.shop-page .select2-selection {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7em 2.6em 0.7em 1em;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bone-dim) 50%),
    linear-gradient(135deg, var(--bone-dim) 50%, transparent 50%);
  background-position: right 1.15em center, right 0.85em center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.woocommerce-ordering select:focus-visible,
.shop-page select:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
/* le voci del menu aperto le disegna il sistema: almeno siano leggibili */
.shop-page select option,
.woocommerce-ordering select option { background: #0c0e13; color: #efe9df; }

/* la briciola di pane di WooCommerce non fa parte di questo sito */
.woocommerce-breadcrumb { display: none; }

/* ============================================================
   CASSA A BLOCCHI DI WOOCOMMERCE
   Arriva vestita di bianco: campi bianchi, bordi grigi, angoli
   arrotondati. Su fondo nero e' un modulo incollato sopra il sito.
   Qui prende i modi del resto: fondo trasparente, un filo d'oro
   quando il campo e' attivo, niente angoli.
   ============================================================ */
.wc-block-checkout,
.wp-block-woocommerce-checkout {
  --wp--preset--color--contrast: var(--bone);
  color: var(--bone);
}

/* --- i campi --- */
.wc-block-components-text-input input.input-text,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox input.components-combobox-control__input,
.shop-page input[type="text"],
.shop-page input[type="email"],
.shop-page input[type="tel"],
.shop-page input[type="password"],
.shop-page textarea {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--bone) !important;
  font-family: var(--sans) !important;
  /* 16px: sotto questa misura iOS ingrandisce la pagina da solo */
  font-size: 16px !important;
  padding: 1.05em 1em 0.5em !important;
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.shop-page input:focus,
.shop-page textarea:focus {
  border-color: var(--gold) !important;
  outline: none !important;
}
/* l'etichetta che scorre dentro il campo */
.wc-block-components-text-input label,
.wc-blocks-components-select__label,
.wc-block-components-combobox label {
  color: var(--bone-mute) !important;
  font-family: var(--sans) !important;
  letter-spacing: 0.02em;
}
.wc-block-components-text-input.is-active label { color: var(--bone-dim) !important; }
/* il completamento automatico di Chrome ridipinge di giallo: no */
.shop-page input:-webkit-autofill {
  -webkit-text-fill-color: var(--bone);
  -webkit-box-shadow: 0 0 0 1000px #0c0e13 inset;
}

/* --- i titoli dei passi --- */
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bone) !important;
}
.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-content,
.wc-block-components-address-card,
.wc-block-components-totals-item__label {
  color: var(--bone-dim) !important;
}

/* --- il riepilogo dell'ordine, a destra --- */
.wp-block-woocommerce-checkout-totals-block,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--rule) !important;
  border-radius: 0 !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount { color: var(--bone) !important; }

/* --- i bottoni: quelli del sito, non quelli viola di serie --- */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-button:not(.is-link) {
  background: var(--gold) !important;
  border: none !important;
  border-radius: 0 !important;
  color: #14100a !important;
  font-family: var(--sans) !important;
  font-size: 0.88rem !important;   /* in riga con gli altri bottoni del sito */
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 1.25em 2em !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover { background: var(--gold-light) !important; }
.wc-block-components-button.is-link { color: var(--gold) !important; }

/* --- pannelli, righe, separatori --- */
.wc-block-components-panel__button,
.wc-block-components-radio-control__option,
.wc-block-components-order-summary-item {
  color: var(--bone) !important;
  border-color: var(--rule) !important;
}
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--rule) !important;
  border-radius: 0 !important;
}
.wc-block-checkout__terms,
.wc-block-components-checkbox__label,
.wc-block-components-order-summary-item__description { color: var(--bone-dim) !important; }
.wc-block-components-checkbox__input { accent-color: var(--gold); }

/* --- avvisi --- */
.wc-block-components-notice-banner {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--rule) !important;
  border-radius: 0 !important;
  color: var(--bone) !important;
}

/* i due menu a tendina della cassa (paese, provincia) hanno un contenitore
   bianco DIETRO al campo: si vedeva solo lui */
.wc-blocks-components-select__container {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
}
.wc-blocks-components-select__container .wc-blocks-components-select__select {
  border: none !important;
}
.wc-blocks-components-select__container:focus-within { border-color: var(--gold) !important; }
.wc-blocks-components-select__expand { fill: var(--bone-dim); }

/* il titolo del riepilogo, a destra */
.wp-block-woocommerce-checkout-order-summary-block > .wc-block-components-checkout-order-summary__title,
.wc-block-components-checkout-order-summary__title-text {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bone) !important;
}

/* il pallino con la quantita' sopra la miniatura, e la casella di spunta:
   restavano due macchie bianche */
.wc-block-components-order-summary-item__quantity {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #14100a !important;
}
.wc-block-components-checkbox__input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05em; height: 1.05em;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
}
.wc-block-components-checkbox__input[type="checkbox"]:checked {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
}
.wc-block-components-checkbox__mark { fill: #14100a; }

/* il pallino di scelta del metodo di pagamento */
.wc-block-components-radio-control__input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05em; height: 1.05em;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  box-shadow: none !important;
}
.wc-block-components-radio-control__input[type="radio"]:checked {
  border-color: var(--gold) !important;
  box-shadow: inset 0 0 0 3px var(--gold) !important;
}

/* --- moduli "classici" di WooCommerce (accesso, indirizzi, ordini) --- */
.shop-page h2,
.shop-page .woocommerce-Address-title h3,
.shop-page legend {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bone);
}
.shop-page .woocommerce-form-login,
.shop-page .woocommerce-form-register,
.shop-page .woocommerce-Address-title,
.shop-page .woocommerce-MyAccount-navigation ul { border-color: var(--rule) !important; }
.shop-page input[type="checkbox"],
.shop-page input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1em; height: 1em;
  vertical-align: -0.12em;
  background: transparent;
  border: 1px solid var(--rule);
}
.shop-page input[type="radio"] { border-radius: 50%; }
.shop-page input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
.shop-page input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--gold); border-color: var(--gold); }
.shop-page .woocommerce-MyAccount-navigation a { color: var(--bone-dim); }
.shop-page .woocommerce-MyAccount-navigation .is-active a { color: var(--gold); }

/* ============================================================
   COLLEZIONE · la fascia delle fragranze in home

   Il riquadro legge come l'etichetta del flacone, nello stesso ordine:
   citta', nome, le tre parole, il prodotto, il prezzo. Il fondo del
   packshot e' scuro come la pagina, percio' l'immagine non ha cornice:
   e' il flacone che sta nella pagina, non una figura appiccicata sopra.
   ============================================================ */

.collezione__citta {
  margin-top: clamp(46px, 5vw, 84px);
}
.collezione__titolo {
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  font-family: var(--display);
  font-size: clamp(0.92rem, 1.26vw, 1.078rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
}
.collezione__titolo a {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  color: var(--gold-light);
  text-decoration: none;
}
.collezione__titolo a:hover .cta__ring {
  transform: translateX(4px);
}

/* Sei per riga, non «quante ci stanno»: ogni citta' ha sei quartieri e la
   riga deve chiudersi esatta. Con auto-fit ne entravano cinque e la sesta
   restava sola, con mezzo scaffale vuoto accanto. */
.fragranze {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--rule-soft); /* i filetti sono i vuoti della griglia */
}
@media (max-width: 1180px) {
  .fragranze { grid-template-columns: repeat(3, 1fr); }
}
.fragranza {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(20px, 2vw, 28px) clamp(12px, 1.2vw, 18px) clamp(16px, 1.6vw, 22px);
  background: var(--ink-2);
  color: inherit;
  text-decoration: none;
  transition: background 0.5s var(--ease);
}
.fragranza:hover,
.fragranza:focus-visible {
  background: var(--ink-3);
}

.fragranza__testa {
  display: block;
}
.fragranza__citta {
  display: block;
  font-size: 0.666rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--bone-mute);
}
.fragranza__nome {
  display: block;
  margin-top: 0.9em;
  font-family: var(--display);
  font-size: clamp(0.983rem, 1.31vw, 1.172rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bone);
}
.fragranza__chiavi {
  display: block;
  margin-top: 0.85em;
  font-size: 0.645rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.7;
  color: var(--bone-mute);
}

/* il flacone: mai ritagliato, mai stirato — sta dentro per intero */
.fragranza__pack {
  display: grid;
  place-items: center;
  width: 100%;
  margin: clamp(14px, 1.6vw, 22px) 0;
  aspect-ratio: 1 / 1;
}
.fragranza__pack img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.9s var(--ease);
}
.fragranza:hover .fragranza__pack img {
  transform: scale(1.06);
}

.fragranza__piede {
  margin-top: auto;
}
.fragranza__prezzo {
  font-size: 0.772rem;
  letter-spacing: 0.2em;
  color: var(--gold-light);
}
.fragranza__prezzo del {
  opacity: 0.5;
  margin-right: 0.5em;
}
.fragranza__attesa {
  font-size: 0.666rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--bone-mute);
}

/* non ancora in vendita: si legge, si apre, ma non chiama all'acquisto */
.fragranza--attesa .fragranza__pack img {
  opacity: 0.42;
  filter: saturate(0.5);
  transition: opacity 0.7s var(--ease), filter 0.7s var(--ease), transform 0.9s var(--ease);
}
.fragranza--attesa:hover .fragranza__pack img,
.fragranza--attesa:focus-visible .fragranza__pack img {
  opacity: 0.82;
  filter: saturate(0.85);
}
.fragranza--attesa .fragranza__nome {
  color: var(--bone-dim);
}

@media (max-width: 700px) {
  .fragranze {
    grid-template-columns: repeat(2, 1fr);
  }
  .fragranza__chiavi {
    letter-spacing: 0.16em;
  }
}

/* ============================================================
   PIEDE · i documenti del negozio

   Stanno sopra la riga del copyright e sotto i collegamenti del sito:
   sono obblighi, non navigazione, e non devono competere con «Cities» o
   «Philosophy». Stessa misura minuta del resto del piede.
   ============================================================ */

.foot__docs {
  margin-top: clamp(22px, 3vw, 34px);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9em;
  align-items: center;
  font-size: 0.623rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.foot__docs a {
  color: var(--bone-mute);
  text-decoration: none;
  transition: color 0.4s var(--ease);
}
.foot__docs a:hover,
.foot__docs a:focus-visible {
  color: var(--gold-light);
}
.foot__docs span {
  color: rgba(125, 120, 111, 0.45);
}

/* chi vende: minuto, ma leggibile — è un dato, non una nota a piè di pagina */
.foot__venditore {
  text-transform: none;
  letter-spacing: 0.08em;
}

@media (max-width: 700px) {
  .foot__docs {
    justify-content: center;
  }
}

/* ============================================================
   QUANTITÀ · via le frecce del browser

   Il campo resta un input[type=number] — è lui a portarsi dietro minimo,
   massimo e passo — ma il browser ci disegna sopra le sue due frecce di
   sistema, che qui sono un corpo estraneo: grigie, piccole, con l'aspetto
   del sistema operativo e non del sito, e per giunta accanto ai tasti − e +
   che fanno già la stessa cosa. Due comandi identici a un centimetro di
   distanza, uno dei quali stona.

   Ovunque, non solo nella scheda: il campo torna nel carrello e nella cassa.
   ============================================================ */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;  /* Firefox, che non ha gli pseudo-elementi */
  appearance: textfield;
}

/* ============================================================
   CASSA · niente cornice attorno a una scelta che non c'è

   WooCommerce contorna l'opzione selezionata con un filetto chiaro di 1,5px
   (un box-shadow interno). Serve, quando le opzioni sono tre e bisogna
   vedere a colpo d'occhio quale è attiva.

   Qui i gruppi hanno una voce sola — una spedizione, un pagamento — e
   contornare l'unica possibilità non dice niente: resta una cornice pesante
   attorno a una riga di testo, che su fondo nero è la cosa più luminosa
   della pagina e si prende l'attenzione che dovrebbe andare ai bottoni.

   Si toglie solo quando la voce è FIGLIA UNICA: il giorno in cui il carrello
   scende sotto la soglia e ricompare la spedizione a pagamento, o si aggiunge
   un secondo metodo, il filetto torna da sé e torna a servire.
   ============================================================ */

.wc-block-components-radio-control > .wc-block-components-radio-control__option:only-child,
.wc-block-components-radio-control > .wc-block-components-radio-control-accordion-option:only-child {
  box-shadow: none !important;
}

/* il rilievo dell'opzione «scelta» sparisce con lei: senza alternative non
   c'è niente da distinguere. Resta il fondo appena accennato del pannello,
   che delimita senza gridare. */
.wc-block-components-radio-control
  > .wc-block-components-radio-control__option--checked-option-highlighted:only-child {
  background: transparent !important;
}

/* ============================================================
   SCHEDA · il quartiere dietro la fragranza

   La stessa fotografia che la pagina della città usa nella griglia, qui
   dietro al prodotto che ne porta il nome. Al 20%: si intravede il luogo,
   non si guarda una fotografia.

   L'immagine è un <img> e non un background-image perché così si porta
   dietro il suo srcset — il browser scarica la misura che serve allo
   schermo, invece di un unico file grande per tutti.
   ============================================================ */

.prod-scena {
  position: relative;
  overflow: hidden;
}
.prod-scena__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
}
.prod-scena__fondo img {
  width: 100%;
  height: 100%;
  /* cover, mai uno stiramento: la foto si ritaglia, non si deforma */
  object-fit: cover;
  object-position: center;
}
/* sotto al testo la foto sfuma via: il nero pieno tiene la lettura sicura
   anche dove l'immagine ha un cielo chiaro */
.prod-scena__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(6, 7, 10, 0.35) 0%,
    rgba(6, 7, 10, 0.1) 42%,
    rgba(6, 7, 10, 0.85) 100%);
}
/* il contenuto sta sopra: senza questo la scheda finisce sotto la foto */
.prod-scena > .wrap {
  position: relative;
  z-index: 1;
}

/* ============================================================
   SFOGLIARE · le frecce ai lati della scheda

   Ai bordi della pagina, a mezza altezza, come in una galleria: la fragranza
   accanto si raggiunge da dove si sta guardando, senza scendere in fondo a
   cercare un comando.

   Il nome resta nascosto e compare al passaggio del mouse. Scritto sempre
   servirebbe a poco — accanto a una freccia grande andrebbe rimpicciolito
   fino a non leggersi — ma nell'etichetta parlata c'e' per intero, cosi' chi
   naviga con la tastiera o con un lettore di schermo sa dove sta andando.
   ============================================================ */

.sfoglia-lato {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: clamp(14px, 2vw, 26px);
  color: var(--bone-dim);
  transition: color 0.4s var(--ease);
}
.sfoglia-lato--prima { left: 0; }
.sfoglia-lato--dopo  { right: 0; flex-direction: row-reverse; }

.sfoglia-lato__segno {
  width: clamp(30px, 3.4vw, 46px);
  height: clamp(30px, 3.4vw, 46px);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  /* sottile come i filetti del sito: una freccia spessa qui sarebbe
     l'elemento piu' pesante di una pagina fatta di capelli */
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s var(--ease);
}
.sfoglia-lato:hover,
.sfoglia-lato:focus-visible {
  color: var(--gold-light);
}
.sfoglia-lato--prima:hover .sfoglia-lato__segno { transform: translateX(-5px); }
.sfoglia-lato--dopo:hover  .sfoglia-lato__segno { transform: translateX(5px); }

.sfoglia-lato__nome {
  font-family: var(--display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
}
.sfoglia-lato--dopo .sfoglia-lato__nome { transform: translateX(8px); }
.sfoglia-lato:hover .sfoglia-lato__nome,
.sfoglia-lato:focus-visible .sfoglia-lato__nome {
  opacity: 1;
  transform: none;
}

/* Sul telefono la scheda occupa tutta la larghezza: ai lati le frecce
   finirebbero sopra il packshot e sopra il testo. Vanno in fondo alla
   scheda — nel codice stanno in cima, ma in cima si leggerebbero come «ecco
   come andartene» prima ancora di aver visto il prodotto. La sezione si
   allarga in basso quel tanto che serve a ospitarle. */
@media (max-width: 860px) {
  .prod-scena {
    padding-bottom: calc(clamp(88px, 13vh, 172px) + 64px);
  }
  .sfoglia-lato {
    top: auto;
    bottom: clamp(30px, 5vh, 56px);
    transform: none;
    padding: 10px clamp(16px, 5vw, 26px);
  }
  .sfoglia-lato__nome {
    opacity: 1;
    transform: none;
    font-size: 0.74rem;
  }
}

/* ============================================================
   FASCE SOTTO LA SCHEDA · altri quartieri, altre città

   Riusano la card della pagina città (`.hood`): stesso taglio verticale,
   stessa foto scurita, stesso nome in fondo. Sono lo stesso oggetto, e due
   oggetti uguali che si comportano uguale non vanno disegnati due volte.
   ============================================================ */

/* più strette della griglia intera: qui sono cinque o due, non sei */
.hoods--stretta {
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.hoods--citta {
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.hood--citta {
  aspect-ratio: 3 / 2.2;
}
.hood__quante {
  display: block;
  margin-top: 0.7em;
  font-size: 0.623rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gold-light);
}
/* non ancora in vendita: si apre, ma non si annuncia come se lo fosse */
.hood--attesa img {
  filter: saturate(0.32) brightness(0.5);
}
.hood--attesa:hover img {
  filter: saturate(0.7) brightness(0.72);
}
.hood__attesa {
  display: block;
  margin-top: 0.8em;
  font-size: 0.602rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bone-mute);
}

@media (max-width: 700px) {
  .hoods--stretta {
    grid-template-columns: 1fr 1fr;
  }
  .hood--citta {
    aspect-ratio: 3 / 1.8;
  }
}

/* ============================================================
   CARRELLO E CASSA · il testo dei blocchi WooCommerce

   I blocchi arrivano con 13 px fissi ovunque — nome del prodotto, prezzi,
   totali, intestazioni. Sono più piccoli del testo del sito (18) e persino
   della sua misura ridotta (16,7): in una pagina dove si legge che cosa si
   sta comprando e quanto si paga, è la misura sbagliata.

   Portati a 15 px: sotto la misura di lettura, perché sono dati in tabella
   e non prosa, ma sopra il minuto.
   ============================================================ */

.wc-block-components-product-name,
.wc-block-cart-item__prices,
.wc-block-components-product-metadata,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__description,
.wc-block-components-address-form label,
.wc-block-components-text-input label,
.wc-block-cart__submit-container,
.wc-block-components-totals-footer-item,
.wp-block-woocommerce-cart table th,
.wp-block-woocommerce-cart table td {
  /* `!important` come nel resto della sezione WooCommerce: i blocchi
     portano stili che non si scavalcano per specificita' — il nome del
     prodotto restava a 13 px anche con la regola caricata per ultima e
     nessuna regola concorrente visibile nel CSSOM. */
  font-size: 0.94rem !important;
}
/* il totale è la riga che si cerca con l'occhio: un gradino sopra */
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  font-size: 1.06rem;
}

/* La griglia degli articoli parte alla stessa altezza di «CART TOTALS»:
   la colonna di destra non ha margine sopra, e con uno la' e nessuno qui le
   due colonne partivano sfalsate di una trentina di pixel. */
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
  padding-top: 0;
  margin-top: 0;
}
.wp-block-woocommerce-cart .wc-block-cart-items {
  margin-top: 0 !important;
}

/* ============================================================
   CARRELLO A CARD

   WooCommerce serve il carrello come tabella: una riga per articolo, la
   foto ridotta a francobollo di 64 px in prima colonna. Va bene per un
   elenco della spesa, non per sei profumi che si vendono con l'immagine.

   La tabella resta nel codice — e' quella che WooCommerce sa aggiornare
   quando si cambia la quantita' — e diventa una griglia solo per il CSS:
   `display` riscritto su tabella, corpo, righe e celle. Nessun JavaScript,
   nessun template sovrascritto: il giorno che WooCommerce cambia il suo
   markup, qui si rompe l'aspetto, non il carrello.
   ============================================================ */

.wp-block-woocommerce-cart .wc-block-cart-items,
.wp-block-woocommerce-cart .wc-block-cart-items tbody,
.wp-block-woocommerce-cart .wc-block-cart-items tr,
.wp-block-woocommerce-cart .wc-block-cart-items td {
  display: block;
  border: 0;
  padding: 0;
  width: auto;
}

/* «PRODUCT | TOTAL» sono le intestazioni di una tabella: sopra una griglia
   di riquadri non intestano piu' niente */
.wp-block-woocommerce-cart .wc-block-cart-items thead,
.wp-block-woocommerce-cart .wc-block-cart-items caption {
  display: none;
}

/* Colonne di numero fisso, non `auto-fit`: con un solo articolo nel
   carrello auto-fit gli dava tutta la larghezza, e il packshot si ritrovava
   ingrandito a 874 px da una sorgente di 300 — cioe' sgranato, per giunta
   grande come mezza pagina. Le colonne sono tre, e una card sola resta
   larga un terzo. */
.wp-block-woocommerce-cart .wc-block-cart-items tbody {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
  /* Niente fondo qui. Serviva a disegnare i filetti fra le card come vuoti
     della griglia, ma con un solo articolo nel carrello la cella libera
     restava a vista: un rettangolo grigio grande quanto una card, accanto al
     nulla. Le card ora non hanno fondo e i vuoti sono vuoti davvero. */
  margin-top: 0;
}
/* Tre per riga solo su schermi davvero larghi: la colonna dei totali sta
   accanto e si porta via spazio, e a 1400 px le card scendevano a 267 —
   il packshot tornava un francobollo, che e' il difetto da cui si partiva. */
@media (max-width: 1500px) {
  .wp-block-woocommerce-cart .wc-block-cart-items tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* La card e' una griglia di due colonne: la foto le occupa entrambe, il
   blocco di testo sta a sinistra e il totale a destra, incollato in basso —
   cioe' alla stessa altezza dei tasti della quantita', che sono l'ultima
   cosa nella colonna di sinistra. Sono due celle <td> sorelle e non c'e' un
   contenitore comune da mettere in riga: la griglia le affianca senza
   toccare il markup. */
.wp-block-woocommerce-cart .wc-block-cart-items__row {
  /* Nessun margine interno e nessun fondo: la card non e' un riquadro
     appoggiato sulla pagina, e' il prodotto sulla pagina. Il fondo si vedeva
     soprattutto nella fascia sopra il nome, dove non c'e' la foto a
     coprirlo, e nella cella libera quando il carrello ha un solo articolo. */
  padding: 0 !important;
  display: grid !important;
  /* `!important` anche qui: WooCommerce impone le tre colonne della sua
     tabella (immagine | prodotto | totale) e piazza tutte le celle in
     `grid-row: 1`. Senza scavalcare entrambe, le celle finiscono una sopra
     l'altra: la foto stampata sul nome. */
  grid-template-columns: 1fr auto !important;
  background: transparent !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__image {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  /* WooCommerce lascia 16 px di padding a destra su questa cella: era lo
     spazio fra la colonna della foto e quella del testo, quando erano
     colonne. Qui la foto sta sopra al testo e quel padding la faceva
     rientrare di 16 px in piu' sul solo lato destro. */
  padding: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__product {
  grid-column: 1 !important;
  grid-row: 2 !important;
}
.wp-block-woocommerce-cart .wc-block-cart-items__row:hover {
  background: var(--ink-3);
}

/* la foto: quadrata e grande quanto la card, non piu' un francobollo */
.wp-block-woocommerce-cart .wc-block-cart-item__image {
  width: 100%;
}
/* L'area della foto e' alta quanto la copia che il browser scarica.
   WooCommerce calcola il suo `sizes` sui 64 px del francobollo di prima,
   quindi arriva la versione da 300: oltre quella misura si vedrebbero i
   pixel. Un riquadro quadrato largo quanto la card lasciava un vuoto sotto
   l'immagine, che dentro non poteva crescere. */
.wp-block-woocommerce-cart .wc-block-cart-item__image a {
  display: block;
  width: 100%;
  /* niente padding proprio: il margine e' quello della card, uguale per
     tutti e quattro i lati e uguale a quello del testo */
  padding: 0;
}
.wp-block-woocommerce-cart .wc-block-cart-item__image img {
  /* Piena larghezza e quadrata. Il browser scarica la copia da 300 px
     (WooCommerce calcola il suo `sizes` sul francobollo di prima) e qui la
     ingrandisce di un quinto scarso: su un packshot scuro e morbido non si
     vede, e vale il margine uniforme.
     `width: auto` non basterebbe comunque — l'immagine si porta dietro gli
     attributi width/height del francobollo e si fermava a 80 px. */
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  /* contain e non cover: il packshot e' gia' composto con i suoi margini,
     ritagliarlo taglierebbe il tappo o il riflesso */
  object-fit: contain;
}

.wp-block-woocommerce-cart .wc-block-cart-item__product {
  padding: clamp(12px, 1.4vw, 16px) 0 0;
}
.wp-block-woocommerce-cart .wc-block-components-product-name {
  display: block;
  font-family: var(--display);
  font-size: 1.04rem !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bone);
}
.wp-block-woocommerce-cart .wc-block-components-product-metadata {
  margin-top: 0.5em;
  color: var(--bone-mute);
}
/* il prezzo unitario resta minuto: quello che conta e' il totale della riga */
.wp-block-woocommerce-cart .wc-block-cart-item__prices {
  margin-top: 0.7em;
  font-size: 0.8rem !important;
  color: var(--bone-dim);
}
.wp-block-woocommerce-cart .wc-block-cart-item__quantity {
  margin-top: clamp(14px, 1.8vw, 20px);
  padding: 0;
}

/* il totale della riga scende in fondo alla card, in oro come i prezzi */
/* Il totale della riga scende in fondo alla card. Allineato a sinistra come
   tutto il resto: WooCommerce lo manda a destra perche' nella tabella era
   l'ultima colonna, ma qui a destra non c'e' piu' una colonna — c'e' il
   bordo della card, e il numero finiva fuori asse rispetto al nome e al
   prezzo che gli stanno sopra. Serve `!important`: la regola di WooCommerce
   e' piu' specifica. */
.wp-block-woocommerce-cart .wc-block-cart-item__total {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: end;      /* in fondo: in riga con i tasti della quantita' */
  padding: 0;
  text-align: right !important;
}
/* E' la cifra che si cerca con l'occhio quando si controlla il carrello:
   piu' grande di tutto il resto della card, nome compreso. */
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
  font-size: 1.4rem !important;
  color: var(--gold-light);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .wp-block-woocommerce-cart .wc-block-cart-items tbody {
    grid-template-columns: 1fr;
  }
}

/* Su card strette il totale scende su una riga sua, restando a destra.
   Affiancato ai tasti non ci sta: la colonna del testo sfora e il cestino
   finisce sopra il numero (misurato: cinquanta pixel di sovrapposizione a
   375 px di schermo). Sotto, e a destra, la cifra resta quella che l'occhio
   cerca senza coprire niente. */
@media (max-width: 720px) {
  .wp-block-woocommerce-cart .wc-block-cart-items__row {
    grid-template-columns: 1fr !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart-item__product,
  .wp-block-woocommerce-cart .wc-block-cart-item__total {
    grid-column: 1 / -1 !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart-item__total {
    grid-row: 3 !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart-item__total {
    padding: clamp(12px, 2vw, 16px) 0 0;
  }
}

/* ============================================================
   AVVISAMI QUANDO ESCE

   Dove per le sei di Miami c'è il pulsante d'acquisto, per le altre dodici
   c'è questo. Non è un modulo di iscrizione a una newsletter messo in mezzo
   a una scheda prodotto: occupa lo stesso posto del pulsante, e ne ha il
   peso — si chiede una cosa sola, e si dice cosa si farà con quella.
   ============================================================ */

.prenota {
  margin: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.02);
  max-width: 460px;
}
.prenota__titolo {
  margin: 0;
  font-family: var(--display);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-light);
}
.prenota__testo {
  margin: 0.9em 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--bone-dim);
}

.prenota__riga {
  display: flex;
  gap: 10px;
  margin-top: clamp(16px, 2vw, 22px);
}
.prenota__campo {
  flex: 1 1 auto;
  min-width: 0;
}
.prenota__campo input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rule);
  color: var(--bone);
  /* 16 px pieni: sotto, iOS ingrandisce la pagina alla messa a fuoco */
  font-size: 16px;
  font-family: var(--sans);
  font-weight: 300;
  padding: 14px 16px;
  border-radius: 0;
}
.prenota__campo input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}
.prenota__campo input::placeholder {
  color: var(--bone-mute);
}
.prenota .btn {
  flex: 0 0 auto;
}

/* il campo-trappola: fuori dallo schermo, non `display:none` — gli automi
   riempiono anche quelli che sanno essere nascosti in modo ovvio */
.prenota__trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.prenota__consenso {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  margin-top: clamp(14px, 1.8vw, 18px);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--bone-mute);
  cursor: pointer;
}
.prenota__consenso input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin-top: 0.24em;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  cursor: pointer;
}
.prenota__consenso input:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.prenota__consenso a {
  color: var(--bone-dim);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.prenota__esito {
  margin: 0;
  font-size: 0.8rem;
  min-height: 0;
}
.prenota__esito:not(:empty) {
  margin-top: 1em;
}
.prenota__esito--ok { color: var(--gold-light); }
.prenota__esito--no { color: #e08a7a; }

/* fatto: il modulo si chiude e resta solo la risposta */
.prenota--fatto .prenota__riga,
.prenota--fatto .prenota__consenso,
.prenota--fatto .prenota__testo {
  display: none;
}

/* per chi non vede lo schermo: l'etichetta c'è, ma non occupa spazio */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 520px) {
  .prenota__riga {
    flex-direction: column;
  }
  .prenota .btn {
    width: 100%;
  }
}

/* ============================================================
   NON IN VENDITA · via «Out of stock»

   WooCommerce lo stampa accanto al posto del pulsante. Diceva la stessa cosa
   del riquadro che gli sta a fianco — «Not out yet» — ma in rosso e in gergo
   da magazzino, che per un profumo non ancora uscito è pure sbagliato: non è
   esaurito, non è mai stato in vendita.

   E stando in fila col riquadro lo spingeva 97 px a destra, fuori
   dall'incolonnamento del resto della scheda. Toglierlo risolve tutte e due
   le cose con una riga.
   ============================================================ */

.buy .stock.out-of-stock {
  display: none;
}

/* ============================================================
   COLLEZIONE · i flaconi poggiano tutti sulla stessa linea

   Le parole chiave vanno a capo su alcune fragranze e non su altre — «POWER ·
   COOL NERVE · PRECISION» occupa due righe, «ART · MATTER · DISCRETION» una —
   e la foto sotto scendeva di conseguenza: sei bottiglie a gradini.

   La card diventa una griglia di tre righe: testa in alto, foto che si prende
   lo spazio che resta e ci si appoggia in fondo, prezzo sotto. Lo spazio
   vuoto lasciato dalle chiavi corte finisce SOPRA la foto, dove non si vede,
   invece che sotto.
   ============================================================ */

.fragranza {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.fragranza__pack {
  align-self: end;
  margin-top: 0;
}