/* ==========================================================================
   LA MARGHERITA ARTE FLOREALE — SISTEMA DI DESIGN
   Editoriale botanico salentino: calce, verde bosco, oro miele, terracotta.
   ========================================================================== */

/* --- FONT ---
   Ospitati qui (cartella fonts/, licenza SIL Open Font) invece che da
   Google Fonts: caricati da Google, ogni pagina mandava l'indirizzo IP del
   visitatore a Google senza consenso. Sono font variabili, un file per
   stile e alfabeto; unicode-range fa scaricare il latino esteso solo se
   serve davvero. */
/* Cormorant Garamond italic, latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond italic, latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond normal, latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond normal, latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost normal, latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/jost-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost normal, latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/jost-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colore — palette salentina, ammorbidita */
  --ink:        #1E2B22;   /* verde bosco, ammorbidito da nero puro */
  --ink-soft:   #37473A;
  --paper:      #F5EFE1;   /* calce leccese, tono neutro e morbido */
  --paper-alt:  #ECE0C9;
  --white:      #FFFDF9;
  --gold:       #BC9C6E;   /* oro miele, meno saturo */
  --gold-dark:  #96774A;
  --gold-ink:   #7A6039;   /* variante testo di --gold-dark, contrasto WCAG AA su fondi chiari */
  --terracotta: #A85B47;   /* coppo salentino, accento morbido */
  --rose:       #CBACA4;   /* rosa cipria — tocco di morbidezza */
  --olive:      #67785A;
  --text-muted: #5C5D50;
  --line: rgba(30, 43, 34, 0.13);
  --line-strong: rgba(30, 43, 34, 0.26);

  /* Cornice fiorita delle home — fiori di pesco rosa e foglie verde oliva */
  --fiore-cuore:       #FCE9E7;   /* attaccatura dei petali, quasi bianca */
  --fiore-rosa-chiaro: #F6C3C8;
  --fiore-rosa:        #EFA0AB;
  --fiore-rosa-scuro:  #DC7688;
  --fiore-pistillo:    #C14D66;
  --fiore-stame:       #FFF8F4;
  --foglia-scura:      #5E6A40;
  --foglia-chiara:     #949C5F;
  --stelo:             #7B7A52;
  /* Sagoma del petalo sciolto della cornice, usata via mask */
  --petalo-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-22 -48 44 48'%3E%3Cpath d='M0,0 C-14,-8 -22,-26 -16,-40 C-12,-47 -5,-48 0,-42 C5,-48 12,-47 16,-40 C22,-26 14,-8 0,0 Z'/%3E%3C/svg%3E");

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, -apple-system, sans-serif;

  /* Margherita a 6 petali — icona autoriale, usata via mask (sostituisce i glifi unicode) */
  --daisy-mark-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cellipse cx='50' cy='28' rx='12' ry='22'/%3E%3Cellipse cx='50' cy='28' rx='12' ry='22' transform='rotate(60 50 50)'/%3E%3Cellipse cx='50' cy='28' rx='12' ry='22' transform='rotate(120 50 50)'/%3E%3Cellipse cx='50' cy='28' rx='12' ry='22' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='28' rx='12' ry='22' transform='rotate(240 50 50)'/%3E%3Cellipse cx='50' cy='28' rx='12' ry='22' transform='rotate(300 50 50)'/%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3C/g%3E%3C/svg%3E");

  /* Virgolette a doppia foglia — flourish botanico per le testimonianze */
  --leaf-quote-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cg fill='%23000'%3E%3Cpath d='M10 5 C2 10 0 20 6 28 C10 33 18 33 20 26 C22 20 17 15 11 16 C11 11 14 7 20 5 Z'/%3E%3Cpath d='M38 5 C30 10 28 20 34 28 C38 33 46 33 48 26 C50 20 45 15 39 16 C39 11 42 7 48 5 Z'/%3E%3C/g%3E%3C/svg%3E");

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Raggi & ombre — linguaggio visivo "pannelli flottanti", nessuno spigolo vivo */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 14px -6px rgba(30, 43, 34, 0.14);
  --shadow-md: 0 14px 34px -14px rgba(30, 43, 34, 0.24);
  --shadow-lg: 0 28px 60px -22px rgba(30, 43, 34, 0.3);
}

@media (max-width: 600px) {
  :root { --radius-l: 20px; --radius-m: 14px; }
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  position: relative;
  font-family: var(--font-body);
  font-weight: 400;
  background-color: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Cornice fiorita ai due lati — fissa, dietro tutto, sboccia con lo scroll.
   Il disegno lo costruisce script.js sulle misure della finestra; ogni pezzo
   riceve --p, da 0 (chiuso) a 1 (sbocciato). */
#bloom-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
}

/* Larga quanto il margine libero accanto ai contenuti (1200px al centro),
   mai meno di 64px: sotto i 1330px circa i fiori si affacciano dal bordo */
#bloom-bg .cornice-lato {
  position: absolute;
  top: 0;
  width: clamp(64px, calc(50vw - 600px), 300px);
  height: 100%;
  animation: cornice-ondeggia 18s ease-in-out infinite;
}

/* Sul computer i fiori sono tanti e stanno accanto al testo: con i rosa pieni
   del telefono la cornice pesava troppo. Qui rosa e foglie sono più tenui e
   il disegno lascia passare un poco la carta. */
#bloom-bg:not(.cornice--telefono) {
  --fiore-rosa: #F3B6BF;
  --fiore-rosa-scuro: #E599A6;
  --fiore-pistillo: #CF6F84;
  --foglia-scura: #7C8756;
  --foglia-chiara: #A9AF77;
}

#bloom-bg:not(.cornice--telefono) .cornice-lato { opacity: 0.9; }

/* Due SVG uno sopra l'altro: lo stelo sotto, i fiori sopra */
#bloom-bg .cornice-lato svg { position: absolute; top: 0; left: 0; display: block; overflow: visible; }
#bloom-bg .cornice-lato--sinistro { left: 0; transform-origin: 0 0; }
#bloom-bg .cornice-lato--destro { right: 0; transform-origin: 100% 0; animation-delay: -9s; }

@keyframes cornice-ondeggia {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(0.6deg); }
}

#bloom-bg .cornice-stelo {
  fill: none;
  stroke: var(--stelo);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p, 0));
  transition: stroke-dashoffset 0.7s var(--ease);
}

/* --- Esplosione dei mazzetti ---
   Lo stelo cresce seguendo lo scroll; tutto il resto ha due stati. Quando lo
   stelo arriva a un mazzetto, script.js gli mette .is-aperto (lo stato
   finale) e .sboccia (l'animazione, sfalsata da --ritardo pezzo per pezzo).
   Tornando su perdono entrambe le classi e si richiudono con le transizioni. */
#bloom-bg .cornice-rametto {
  fill: none;
  stroke: var(--stelo);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.35s var(--ease);
}

#bloom-bg .cornice-rametto.is-aperto { stroke-dashoffset: 0; }

#bloom-bg .cornice-foglia,
#bloom-bg .cornice-bocciolo {
  opacity: 0;
  transform: scale(0);
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}

#bloom-bg .cornice-fiore {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}

#bloom-bg .cornice-foglia.is-aperto,
#bloom-bg .cornice-bocciolo.is-aperto,
#bloom-bg .cornice-fiore.is-aperto { opacity: 1; transform: none; }

#bloom-bg .cornice-nervatura {
  fill: none;
  stroke: var(--fiore-stame);
  stroke-opacity: 0.4;
  stroke-width: 1.2;
}

#bloom-bg .cornice-petalo {
  stroke: var(--fiore-rosa-scuro);
  stroke-opacity: 0.35;
  stroke-width: 0.8;
  transform: rotate(calc(var(--a, 0deg) * 0.1));
  transition: transform 0.4s var(--ease);
}

#bloom-bg .is-aperto > .cornice-petalo { transform: rotate(var(--a, 0deg)); }

#bloom-bg .cornice-cuore {
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}

#bloom-bg .is-aperto > .cornice-cuore { opacity: 1; transform: none; }

#bloom-bg .cornice-stame { fill: none; stroke: var(--fiore-stame); stroke-width: 1.2; stroke-linecap: round; }
#bloom-bg .cornice-antera { fill: var(--fiore-stame); }
#bloom-bg .cornice-pistillo { fill: var(--fiore-pistillo); }
#bloom-bg .cornice-petalo-bocciolo { stroke: var(--fiore-rosa-scuro); stroke-opacity: 0.35; stroke-width: 0.8; }
#bloom-bg .cornice-sepalo { fill: var(--foglia-scura); }

/* Petali sciolti: partono dal centro del mazzetto e restano sparsi intorno.
   Sono elementi HTML sopra l'SVG, non tracciati dentro: animati solo con
   transform e opacity li muove la scheda grafica senza ridisegnare niente.
   Il lato destro è specchiato come il suo SVG. */
#bloom-bg .cornice-volanti { position: absolute; inset: 0; }
#bloom-bg .cornice-lato--destro .cornice-volanti { transform: scaleX(-1); }

#bloom-bg .cornice-volante {
  position: absolute;
  -webkit-mask: var(--petalo-svg) center / 100% 100% no-repeat;
          mask: var(--petalo-svg) center / 100% 100% no-repeat;
  transform-origin: 50% 100%;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}

#bloom-bg .cornice-volante--0 { background: linear-gradient(to top, var(--fiore-cuore) 5%, var(--fiore-rosa-chiaro) 40%, var(--fiore-rosa)); }
#bloom-bg .cornice-volante--1 { background: linear-gradient(to top, var(--fiore-cuore) 5%, var(--fiore-rosa-chiaro) 55%); }
#bloom-bg .cornice-volante--2 { background: linear-gradient(to top, var(--fiore-cuore) 5%, var(--fiore-rosa) 35%, var(--fiore-rosa-scuro)); }

#bloom-bg .cornice-volante.is-aperto {
  opacity: 0.9;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--giro, 0deg));
}

/* Il fiore schizza fuori girando, supera la sua misura e ci ricade */
#bloom-bg .cornice-fiore.sboccia { animation: cornice-fiore-esplode 0.85s var(--ritardo, 0s) both; }

@keyframes cornice-fiore-esplode {
  0%   { opacity: 0; transform: rotate(-90deg) scale(0); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  45%  { opacity: 1; transform: rotate(10deg) scale(1.25); animation-timing-function: ease-in-out; }
  72%  { opacity: 1; transform: rotate(-4deg) scale(0.93); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* Intanto i petali, chiusi uno sull'altro, si spalancano a ventaglio */
#bloom-bg .sboccia > .cornice-petalo { animation: cornice-petalo-esplode 0.95s var(--ritardo, 0s) both; }

@keyframes cornice-petalo-esplode {
  0%, 15% { transform: rotate(calc(var(--a, 0deg) * 0.1)) scale(0.5); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  60%     { transform: rotate(calc(var(--a, 0deg) + 9deg)) scale(1.14); animation-timing-function: ease-in-out; }
  100%    { transform: rotate(var(--a, 0deg)) scale(1); }
}

/* E per ultimo salta fuori il cuore con gli stami */
#bloom-bg .sboccia > .cornice-cuore { animation: cornice-cuore-esplode 0.6s calc(var(--ritardo, 0s) + 0.35s) both; }

@keyframes cornice-cuore-esplode {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}

#bloom-bg .cornice-foglia.sboccia,
#bloom-bg .cornice-bocciolo.sboccia { animation: cornice-spunta 0.6s var(--ritardo, 0s) both; }

@keyframes cornice-spunta {
  0%   { opacity: 0; transform: scale(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  60%  { opacity: 1; transform: scale(1.18); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: scale(1); }
}

#bloom-bg .cornice-volante.sboccia { animation: cornice-volo 1.3s var(--ritardo, 0s) both; }

@keyframes cornice-volo {
  0%   { opacity: 0; transform: translate(0px, 0px) rotate(0deg) scale(0.3); animation-timing-function: cubic-bezier(0.1, 0.85, 0.3, 1); }
  15%  { opacity: 1; }
  100% { opacity: 0.9; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--giro, 0deg)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #bloom-bg .cornice-lato,
  #bloom-bg .sboccia,
  #bloom-bg .sboccia > * { animation: none !important; }
}

/* Subito dopo una ricostruzione (finestra ridimensionata) la cornice si
   rimette al suo stato senza animarsi */
#bloom-bg.cornice-immediata * { transition: none !important; }

/* Durante il salto verso una sezione (un link della barra in alto) script.js
   non fa esplodere niente e mette .di-colpo sui pezzi che cambiano: senza
   transizioni si aprono e chiudono di colpo, e lo stelo segue lo scroll senza
   rincorrerlo. Sta sul pezzo e non sul contenitore: sul contenitore ogni
   salto ricalcolava tutta la cornice due volte. */
#bloom-bg .di-colpo,
#bloom-bg .di-colpo * { transition: none !important; }

img { max-width: 100%; height: auto; display: block; object-fit: cover; }
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
ul { list-style: none; }

/* Visivamente nascosto ma letto dagli screen reader — per intestazioni strutturali senza impatto sul layout */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
}

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

html {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) var(--paper-alt);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-alt); }
::-webkit-scrollbar-thumb {
  background-color: var(--gold-dark);
  border-radius: var(--radius-pill);
  border: 3px solid var(--paper-alt);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .hero-text > * { opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .scroll-cue { opacity: 1 !important; transform: translateX(-50%) !important; }
}

/* --- ANIMAZIONI DINAMICHE (rivelazione allo scroll) ---
   Ogni gruppo di contenuto ha una firma di ingresso coerente col proprio ruolo,
   non un unico fade ripetuto identico su tutta la pagina. */
.reveal {
  opacity: 0;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Salita — titoli, banner, elementi singoli */
.reveal--rise { transform: translateY(26px); }

/* Sboccio — card di catalogo, leggero scale-in */
.reveal--bloom { transform: scale(0.94) translateY(10px); }

/* Messa a fuoco — testo lungo, dal velato al nitido */
.reveal--focus { transform: translateY(14px); filter: blur(3px); }

/* Ingresso laterale — liste e blocchi scuri */
.reveal--sweep-left { transform: translateX(-30px); }
.reveal--sweep-right { transform: translateX(30px); }

.site-header.is-scrolled {
  transform: scale(0.965);
  border-color: rgba(150, 119, 74, 0.4);
  box-shadow: var(--shadow-md);
}

.hero-text > *:not(h1) {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-rise 0.9s var(--ease) forwards;
}

.hero-text .eyebrow { animation-delay: 0.1s; }
.hero-text .hero-sub { animation-delay: 0.85s; }
.hero-text .btn-primary { animation-delay: 1.05s; }

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Titolo — le parole risalgono da una maschera, in cascata */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.14em 0.08em 0;
  margin: 0 -0.14em -0.08em 0;
}

.word-mask span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  animation: word-rise 0.85s var(--ease) forwards;
}

@keyframes word-rise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .word-mask span { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* --- HEADER --- */
.site-header {
  position: sticky;
  top: 1rem;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  width: calc(100% - 2rem);
  margin: 1rem auto 0;
  padding: 1rem 2.6rem;
  background: rgba(245, 239, 225, 0.96);
  border: 1px solid rgba(150, 119, 74, 0.2);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
  transform-origin: top center;
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
}

/* Il logo è più alto delle altre voci della pillola: i margini negativi gli
   fanno usare parte del padding, così la barra non si alza. */
.brand-logo { height: 68px; width: auto; max-width: none; flex: none; margin: -0.7rem 0; }

.brand-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.site-nav { display: flex; gap: 2.2rem; }

.site-nav a {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  position: relative;
  padding: 0.25rem 0;
}

.site-nav a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 1px;
  background-color: var(--gold-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.site-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 1.4rem; }

.social-icon { color: var(--ink); display: flex; }
.social-icon:hover { color: var(--gold-dark); }

.site-nav .nav-extra { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 20px;
  background: none;
  border: none;
  padding: 12px 9px;
  box-sizing: content-box;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: var(--radius-pill);
  background-color: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- BOTTONI --- */
.btn-primary, .nav-cta, .btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2.1rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.btn-primary, .nav-cta {
  background-color: var(--ink);
  color: var(--white);
}

.btn-primary:hover, .nav-cta:hover {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-back {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-back:hover { background-color: var(--ink); color: var(--white); border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.page-hero .btn-back { margin-top: 1.8rem; }

/* --- HERO --- */
.hero {
  position: relative;
  z-index: 1;
  padding: 7rem 4% 4rem;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: center;
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto;
  min-height: 90vh;
  min-height: 90svh;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--gold-ink);
  opacity: 0;
  transform: translateX(-50%) translateY(16px);
  animation: scroll-cue-rise 0.9s var(--ease) forwards;
  animation-delay: 0.9s;
}

@keyframes scroll-cue-rise {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.scroll-cue span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
}

.scroll-cue svg {
  width: 14px;
  height: 20px;
  animation: scroll-cue-drift 2.2s ease-in-out infinite;
}

@keyframes scroll-cue-drift {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}

.hero-bloom {
  order: 2;
  justify-self: center;
  width: min(58vw, 440px);
  height: min(58vw, 440px);
  color: var(--gold);
}

.hero-bloom.is-visible {
  opacity: 0.85;
}

.hero-bloom.is-idle {
  animation: hero-bloom-float 2.4s var(--ease) 1;
}

@keyframes hero-bloom-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1.6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bloom.is-idle { animation: none; }
}

.hero-bloom path,
.hero-bloom circle { stroke-width: 1; }

.hero-text { order: 1; position: relative; z-index: 1; max-width: 640px; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-ink);
  font-weight: 500;
  margin-bottom: 1.4rem;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-pill);
  background: rgba(188, 156, 110, 0.14);
  border: 1px solid rgba(188, 156, 110, 0.3);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 1.8rem;
}

.hero-sub {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 480px;
  margin-bottom: 2.6rem;
}

/* --- SEZIONI GENERALI --- */
section { position: relative; z-index: 1; padding: 6rem 4%; scroll-margin-top: 112px; }

.section-intro {
  text-align: center;
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 3.5rem;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 500;
  text-align: center;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

/* Ogni titolo di sezione mette radici — un piccolo stelo che si apre, non decorazione ripetuta a caso */
h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 0.9rem auto 0;
  background: var(--gold-dark);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.7s var(--ease) 0.1s;
}

h2.is-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  h2::after { transform: scaleX(1); }
}

/* Chi Siamo */
.chi-siamo {
  background-color: rgba(231, 218, 187, 0.55);
  max-width: 1300px;
  margin: 2rem auto;
  padding: 4.5rem 6%;
  border-radius: var(--radius-l);
}

/* 66ch invece di un px fisso: a 720px il paragrafo a 1.08rem superava le
   85 battute per riga (oltre la misura di lettura comoda, 45-75 caratteri);
   in `ch` la riga resta corretta anche se la dimensione del testo cambia. */
.chi-siamo-content { max-width: 66ch; margin: 0 auto; text-align: center; }

.section-mark {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 1.1rem;
  background-color: var(--gold-dark);
  -webkit-mask: var(--daisy-mark-svg) no-repeat center / contain;
  mask: var(--daisy-mark-svg) no-repeat center / contain;
}

.chi-siamo p {
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 1.3rem;
}

/* Stagioni */
.stagioni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.stagione-card {
  background: var(--paper);
  padding: 3rem 1.75rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.stagione-card:hover {
  background: var(--white);
  border-color: rgba(150, 119, 74, 0.35);
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}

.stagione-icon {
  width: 34px;
  height: 34px;
  color: var(--gold-dark);
  margin-bottom: 1rem;
  transition: transform 0.5s var(--ease);
}

.stagione-card:hover .stagione-icon { transform: translateY(-4px) rotate(-6deg); }

.stagione-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--ink);
  margin-bottom: 0.8rem;
  transition: color 0.3s var(--ease);
}

.stagione-card:hover h3 { color: var(--gold-ink); }

.stagione-card p {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Eventi */
.eventi {
  background-color: var(--ink);
  color: var(--paper);
  max-width: 1200px;
  margin: 2rem auto;
  padding: 4.5rem 6%;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
  scroll-margin-top: 140px;
}

.eventi h2 { color: var(--white); text-align: left; }
.eventi h2::after { margin: 0.9rem 0 0; }

/* Stesso motivo di .chi-siamo-content: 800px a 1.1rem sfiorava le 90 battute
   per riga, troppe per leggere comodamente. */
.eventi-content { max-width: 68ch; }

.eventi p {
  font-size: 1.1rem;
  color: rgba(241, 231, 210, 0.8);
  margin-bottom: 2.2rem;
}

.eventi-list {
  display: grid;
  /* auto-fit e non 4 colonne fisse: le voci sono diventate 5 e una riga da
     4 + 1 orfana stava male. Cosi' si distribuiscono da sole. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.4rem;
  border-top: 1px solid rgba(241, 231, 210, 0.2);
  padding-top: 1.8rem;
}

@media (max-width: 860px) {
  .eventi-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .eventi-list { grid-template-columns: 1fr; }
}

.eventi-list li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 0.98rem;
}

.eventi-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 0.85em;
  height: 0.85em;
  background-color: var(--gold);
  -webkit-mask: var(--daisy-mark-svg) no-repeat center / contain;
  mask: var(--daisy-mark-svg) no-repeat center / contain;
}

/* --- GALLERIA --- */
.subsection-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--ink);
  margin-bottom: 1.8rem;
  text-align: center;
  /* Sempre sopra alle foto: mentre salgono al loro posto (reveal--rise) le
     tessere dell'ultima riga passano per qualche istante sulla sua altezza. */
  position: relative;
  z-index: 1;
}

/* Il reset azzera ogni margine, e il titolo di una sezione si appoggiava
   direttamente sull'ultima riga di foto della sezione prima. */
.foto-grid + .subsection-title { margin-top: 3.2rem; }

.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
}

.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}

.foto-card {
  overflow: hidden;
  height: 340px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.foto-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

/* La transition qui sopra (pensata per il passaggio del mouse) scavalcava
   quella di .reveal e lasciava fuori l'opacità: la tessera compariva di
   colpo, piena, ancora 26px più in basso, cioè sopra il titolo seguente.
   Qui la dissolvenza torna, un po' più rapida del resto della pagina. */
.foto-card.reveal {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), box-shadow 0.4s var(--ease);
}

.foto-card img {
  width: 100%; height: 100%;
  filter: saturate(0.85);
  opacity: 0;
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease), opacity 0.6s var(--ease);
}

.foto-card img.is-loaded { opacity: 1; }

.foto-card:hover img { transform: scale(1.06); filter: saturate(1); }

/* Tile categoria galleria (link a librerie foto) */
.galleria-links {
  /* Fila unica scorrevole di lato, a ogni larghezza: le quattro categorie
     stanno una accanto all'altra e si scorre per raggiungere le altre.
     Prima era una griglia 4 colonne -> 2 -> 1, che impilava tutto. */
  display: grid;
  grid-auto-flow: column;
  /* Misura fissa, non minmax(0, ...): con un minimo di 0 le colonne si
     restringono finché ci stanno tutte nel contenitore, e la fila non ha
     più nulla da scorrere. Dal 05/10/2026 le categorie sono quattro (tolta
     l'oggettistica) e ogni tessera prende un quarto della fila: sul computer
     si vedono tutte, senza un pezzetto di scorrimento. Il minimo resta 230px,
     mai 0: sotto i 980px di fila le tessere traboccano e si scorre di lato. */
  grid-auto-columns: clamp(230px, calc((100% - 3 * 1.25rem) / 4), 285px);
  grid-template-columns: none;
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
  /* Senza dichiararlo esplicitamente, `overflow-x: auto` rende automatico
     anche l'asse verticale: la fila diventava scorrevole pure in basso (di
     pochi pixel, quanto basta al sollevamento della tessera in hover), e la
     rotella del mouse o lo swipe verticale restavano intrappolati lì invece
     di scorrere la pagina. Bloccato qui; il padding sotto è già dimensionato
     per non tagliare comunque il sollevamento e l'ombra della tessera. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Niente `scroll-behavior: smooth` qui: insieme allo snap fa annullare dal
     browser ogni scorrimento programmatico (scrollBy/scrollTo/assegnazione),
     e le frecce restavano senza effetto. L'animazione la fa script.js. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.4rem 0 0.9rem;
  /* Su desktop la barra sottile è l'unico indizio che ci sia altro di lato */
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 119, 74, 0.55) transparent;
}

.galleria-links::-webkit-scrollbar { height: 6px; }
.galleria-links::-webkit-scrollbar-track { background: transparent; }
.galleria-links::-webkit-scrollbar-thumb {
  background: rgba(150, 119, 74, 0.5);
  border-radius: var(--radius-pill);
}
.galleria-links::-webkit-scrollbar-thumb:hover { background: rgba(150, 119, 74, 0.8); }

/* Su schermo tattile si scorre col dito: la barra è solo ingombro */
@media (hover: none) {
  .galleria-links { scrollbar-width: none; }
  .galleria-links::-webkit-scrollbar { display: none; }
}

/* Frecce di scorrimento — le inietta script.js.
   Su desktop servono davvero: la rotella del mouse scorre in verticale, e senza
   comandi la fila orizzontale si muoverebbe solo trascinando la barra. */
.galleria-scroller { position: relative; max-width: 1200px; margin: 0 auto; }

.galleria-nav {
  position: absolute;
  top: calc(50% - 0.45rem);
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--ink);
  background: rgba(245, 239, 225, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.2s var(--ease);
}
.galleria-nav:hover { background: var(--white); }
.galleria-nav:active { transform: translateY(-50%) scale(0.94); }
.galleria-nav:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
.galleria-nav svg { width: 20px; height: 20px; }
.galleria-nav-prec { left: -14px; }
.galleria-nav-succ { right: -14px; }

/* A fine corsa il pulsante resta nel flusso ma smette di essere raggiungibile:
   niente salti di layout, e il fuoco da tastiera lo salta. */
.galleria-nav[disabled] { opacity: 0; pointer-events: none; }

/* Sul telefono si scorre col dito: le frecce sarebbero solo due ostacoli sopra le foto */
@media (hover: none), (max-width: 700px) {
  .galleria-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .galleria-nav { transition: none; }
}

.galleria-tile {
  position: relative;
  height: auto;
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  overflow: hidden;
  display: block;
  background: var(--paper-alt);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.galleria-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.galleria-tile img {
  width: 100%;
  height: 100%;
  filter: saturate(0.8) brightness(0.92);
  opacity: 0;
  transition: transform 0.8s var(--ease), filter 0.5s var(--ease), opacity 0.6s var(--ease);
}

.galleria-tile img.is-loaded { opacity: 1; }

.galleria-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,43,34,0) 45%, rgba(30,43,34,0.55) 100%);
}

.galleria-tile:hover img { transform: scale(1.08); filter: saturate(1) brightness(1); }

.galleria-tile-label {
  position: absolute;
  left: 1.6rem;
  bottom: 1.5rem;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--white);
  letter-spacing: 0.02em;
}

.galleria-tile-label::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  margin-top: 0.6rem;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.galleria-tile:hover .galleria-tile-label::after { transform: scaleX(1.786); }

/* --- TESTIMONIANZE --- */
.testimonianze {
  background-color: rgba(231, 218, 187, 0.55);
  max-width: 1300px;
  margin: 2rem auto;
  padding: 4.5rem 6%;
  border-radius: var(--radius-l);
}

.testimonianze-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 980px;
  margin: 0 auto 3.5rem;
}

@media (max-width: 700px) {
  .testimonianze-grid { grid-template-columns: 1fr; }
}

blockquote {
  position: relative;
  background: var(--white);
  padding: 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

blockquote::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  right: 1.7rem;
  width: 34px;
  height: 23px;
  background-color: var(--rose);
  opacity: 0.55;
  -webkit-mask: var(--leaf-quote-svg) no-repeat center / contain;
  mask: var(--leaf-quote-svg) no-repeat center / contain;
}

.stars { color: var(--gold-ink); font-size: 1rem; margin-bottom: 1.1rem; letter-spacing: 0.15em; }

blockquote p {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  line-height: 1.55;
}

cite {
  font-style: normal;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--gold-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Trust Badges */
.trust-platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
  max-width: 820px;
  margin: 0 auto;
}

.platform-box {
  background: var(--white);
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sm);
}

.platform-badge { display: flex; align-items: center; gap: 1rem; }
.google-icon { width: 32px; height: 32px; }
.matrimonio-tag { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--terracotta); }
.platform-info { text-align: left; display: flex; flex-direction: column; }
.rating-score { font-weight: 600; font-size: 1.05rem; }
.rating-stars { color: var(--gold-ink); font-size: 0.88rem; }
.rating-text { font-size: 0.78rem; color: var(--text-muted); }

.btn-platform {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.65rem 1.25rem;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}

.btn-platform:hover { transform: translateY(-2px); }

.btn-google { background-color: transparent; color: var(--ink); }
.btn-google:hover { background-color: var(--ink); color: var(--white); border-color: var(--ink); }

.btn-matrimonio { background-color: var(--terracotta); color: var(--white); border-color: var(--terracotta); }
.btn-matrimonio:hover { background-color: transparent; color: var(--terracotta); }

.platform-actions { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; width: 100%; }
.platform-write-review { font-size: 0.82rem; }

/* --- NEGOZIO & MAPPA --- */
.negozio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.negozio-info h2 { text-align: left; }
.negozio-info h2::after { margin: 0.9rem 0 0; }
.negozio-info p { font-size: 1.02rem; color: var(--text-muted); margin-bottom: 1rem; }

.link-hover { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--gold-dark); }
.link-hover:hover { color: var(--gold-ink); }

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--white);
  background-color: var(--olive);
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-pill);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn-whatsapp:hover { background-color: var(--ink); transform: translateY(-2px); }

.mappa-wrap {
  border: 1px solid var(--line-strong);
  height: 340px;
  filter: sepia(0.12) saturate(0.85);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.mappa-wrap iframe { width: 100%; height: 100%; border: 0; }

/* --- FORM DI PRENOTAZIONE --- */
.prenota {
  background-color: var(--white);
  border: 1px solid var(--line);
  max-width: 900px;
  margin: 2rem auto;
  padding: 4.5rem 6%;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
}

.booking-form { display: flex; flex-direction: column; gap: 1.6rem; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.6rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
}

.field-hint {
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: -0.2rem;
}

.field-error {
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
  font-size: 0.78rem;
  color: var(--terracotta);
  margin-top: -0.2rem;
  min-height: 0;
}
.field-error:empty { display: none; }

.booking-form input[aria-invalid="true"],
.booking-form select[aria-invalid="true"] {
  border-color: var(--terracotta);
}

.form-fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0;
  border: none;
  margin: 0;
}

.form-fieldset legend {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  padding: 0;
  margin-bottom: 0.15rem;
}

.form-radio {
  flex-direction: row !important;
  align-items: center;
  gap: 0.6rem !important;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}

.form-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15em;
  height: 1.15em;
  padding: 0;
  margin: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background-color: var(--white);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.form-radio input[type="radio"]:checked { border-color: var(--gold-dark); }

.form-radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background-color: var(--gold-dark);
  transform: translate(-50%, -50%);
}

.form-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

input, select, textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.3s var(--ease);
}

/* Una casella di spunta non e' un campo di testo: la regola qui sopra le dava
   il padding di un campo e, togliendole l'aspetto nativo, la lasciava come un
   riquadro vuoto che non mostrava nemmeno se era spuntata (si vedeva nel
   pannello "Personalizza" dei cookie). I radio no: .form-radio se li ridisegna
   apposta. Chi ha bisogno di una misura sua la dichiara dopo, come fanno
   .cookie-voce e la tabella dell'area riservata. */
input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: checkbox;
  appearance: checkbox;
  accent-color: var(--ink);
  cursor: pointer;
}

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--gold-dark);
}

textarea { resize: vertical; }

/* Upload immagine — sostituisce il "Choose File" nativo */
.file-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 1.4rem 1.6rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-m);
  background-color: var(--paper);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.file-drop:hover {
  border-color: var(--gold-dark);
  background-color: var(--white);
}

.file-drop:focus-within {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
}

.file-drop-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-drop-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--gold-dark);
}

.file-drop-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.file-drop-text strong {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}

.file-drop-text em {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.file-drop.has-file {
  border-style: solid;
  border-color: var(--gold-dark);
}

.file-drop.has-file .file-drop-text em {
  color: var(--gold-ink);
  font-weight: 500;
}

.form-submit { text-align: center; margin-top: 0.5rem; }

.prenota-alt-contact {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: -2.5rem auto 3rem;
}

.prenota-alt-contact a { color: var(--gold-ink); font-weight: 500; }
.prenota-alt-contact a:hover { color: var(--ink); }

.form-privacy-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.9rem;
}

#campi-sposi, #campo-referente { animation: fadeIn 0.4s var(--ease); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- PAGINE STAGIONALI --- */
.page-hero { position: relative; z-index: 1; text-align: center; padding: 5rem 4% 1.5rem; }

.page-hero h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 1rem;
}

.page-hero-icon {
  display: block;
  width: 40px;
  height: 40px;
  color: var(--gold-dark);
  margin: 0 auto 1.2rem;
}

.flower-catalog { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 4%; }

.flower-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.flower-card {
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.flower-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.flower-img { height: 230px; overflow: hidden; background: var(--paper-alt); }
.flower-img img { width: 100%; height: 100%; opacity: 0; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); }
.flower-img img.is-loaded { opacity: 1; }
.flower-card:hover .flower-img img { transform: scale(1.05); }

.flower-info { padding: 1.7rem; display: flex; flex-direction: column; flex-grow: 1; }

.flower-info h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.flower-desc { font-size: 1rem; color: var(--ink-soft); margin-bottom: 1.3rem; line-height: 1.55; flex-grow: 1; }

.flower-tag {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
  background: rgba(188, 156, 110, 0.14);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem;
  margin-top: 0.7rem;
  display: inline-block;
  align-self: flex-start;
}

.cta-banner {
  background-color: rgba(231, 218, 187, 0.55);
  padding: 3.5rem;
  text-align: center;
  margin-top: 3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
}

.cta-banner h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--ink);
  margin-bottom: 1.3rem;
}

.newsletter-mini {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 1rem auto 4rem;
  padding: 3rem 6%;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
}

.newsletter-mini h2 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.newsletter-mini .section-intro { margin: 0 auto 1.6rem; }

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 440px;
  margin: 0 auto;
}

.newsletter-form input[type="email"] { flex: 1 1 220px; width: auto; }
.newsletter-form button { flex: 0 0 auto; white-space: nowrap; }

.newsletter-status {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--olive);
  min-height: 0;
}
.newsletter-status:empty { display: none; }
.newsletter-status.is-error { color: var(--terracotta); }

/* Consenso alla newsletter: l'iscrizione è marketing, va detto chiaro */
.newsletter-privacy { max-width: 46ch; margin: 0.9rem auto 0; font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); }
.newsletter-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- ADMIN --- */
.admin-shell { position: relative; z-index: 1; max-width: 1800px; margin: 0 auto 5rem; padding: 0 2.5%; }

.admin-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
  padding: 3rem 6%;
}

.admin-shell > .admin-panel { max-width: 520px; margin: 0 auto; text-align: center; }

.admin-login-errore {
  margin: 1.1rem auto 0;
  max-width: 46ch;
  padding: 0.8rem 1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--terracotta);
  background: rgba(168, 91, 71, 0.09);
  border: 1px solid rgba(168, 91, 71, 0.3);
  border-radius: var(--radius-s);
}
.admin-login-errore[hidden] { display: none; }

.admin-panel h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.9rem;
  color: var(--ink);
  margin-bottom: 0.8rem;
}

.admin-panel p { color: var(--ink-soft); margin-bottom: 1.5rem; }

#admin-login-btn { border: none; cursor: pointer; }

.admin-dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.admin-user-line { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

.richieste-count-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.richieste-empty, .richieste-errore { color: var(--text-muted); text-align: center; padding: 2rem 0; }

.richieste-list { display: flex; flex-direction: column; gap: 1.2rem; }

.richiesta-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow-sm);
}

.richiesta-card.is-contattato { opacity: 0.6; }

.richiesta-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }

.richiesta-data-invio { font-size: 0.78rem; color: var(--text-muted); }

.richiesta-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
  background: rgba(188, 156, 110, 0.14);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
}

.badge-evento { color: var(--white); background: var(--ink); }

.richiesta-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; }

.richiesta-dettagli {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem 1.5rem;
  margin-bottom: 0.8rem;
}

.richiesta-dettagli dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.richiesta-dettagli dd { font-size: 0.95rem; color: var(--ink); }

.richiesta-note { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 0.8rem; white-space: pre-wrap; }

.richiesta-foto-nota { font-size: 0.82rem; color: var(--gold-ink); margin-bottom: 0.8rem; }

.richiesta-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.richiesta-contattato-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}

.richiesta-contattato-label input { width: 1.1em; height: 1.1em; accent-color: var(--gold-dark); cursor: pointer; }

.richiesta-elimina {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  color: var(--terracotta);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.richiesta-elimina:hover { background-color: var(--terracotta); color: var(--white); }

.richiesta-footer { flex-wrap: wrap; }
.richiesta-azioni { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.richiesta-azioni button, .richiesta-risposta button { font-family: inherit; }

.richiesta-rispondi {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1.1rem;
  font-size: 0.78rem;
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.richiesta-rispondi:hover,
.richiesta-rispondi[aria-expanded="true"] { background: none; color: var(--ink); }

.richiesta-risposta {
  margin-top: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.richiesta-risposta[hidden] { display: none; }

.richiesta-risposta label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.richiesta-risposta-testo {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 0.8rem 0.9rem;
  resize: vertical;
}
.richiesta-risposta-testo:focus { outline: 2px solid var(--gold-dark); outline-offset: 1px; }

.richiesta-risposta-aiuto { font-size: 0.8rem; color: var(--text-muted); margin: 0.6rem 0 0.9rem; }

.richiesta-risposta-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

.richiesta-invia {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.richiesta-invia svg { width: 1.1em; height: 1.1em; flex: none; }
.richiesta-invia:hover { background: var(--paper-alt); }
.richiesta-invia--principale { background: var(--olive); border-color: var(--olive); color: var(--white); }
.richiesta-invia--principale:hover { background: var(--ink); border-color: var(--ink); }

.richiesta-risposta-chiudi {
  background: none;
  border: none;
  padding: 0.5rem 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.admin-logout-btn[hidden] { display: none; }

/* Layout & Componenti Dashboard Admin */
.admin-dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: start;
  gap: 1.8rem;
}

.admin-dashboard[hidden] { display: none; }

.admin-sidebar {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.3rem;
}

.admin-sidebar .admin-user-line {
  margin: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  word-break: break-word;
}

.admin-nav { display: flex; flex-direction: column; gap: 0.25rem; }

.admin-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: none;
  border: none;
  border-radius: var(--radius-s);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.admin-nav-btn:hover { background: var(--paper); color: var(--ink); }
.admin-nav-btn.is-active { background: var(--ink); color: var(--white); }

.admin-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.4em;
  border-radius: var(--radius-pill);
  background: var(--terracotta);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

.admin-nav-btn.is-active .admin-nav-badge { background: var(--white); color: var(--ink); }
.admin-nav-badge[hidden] { display: none; }

.admin-main { display: flex; flex-direction: column; gap: 1.8rem; min-width: 0; }

.admin-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 1.8rem 0 0.9rem;
}

.admin-breakdown-list { display: flex; flex-direction: column; }

.admin-breakdown-row {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--line);
}

.admin-breakdown-row:last-child { border-bottom: none; }

.admin-breakdown-label { color: var(--ink-soft); }

.admin-breakdown-bar { height: 8px; border-radius: var(--radius-pill); background: var(--paper); overflow: hidden; }
.admin-breakdown-fill { height: 100%; border-radius: var(--radius-pill); background: var(--gold-dark); }

.admin-breakdown-count { text-align: right; font-weight: 600; color: var(--ink); min-width: 1.5em; }

.admin-attivita-list { display: flex; flex-direction: column; gap: 0.6rem; }

.admin-attivita-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: 0.88rem;
}

.admin-attivita-item.is-contattato { opacity: 0.6; }
.admin-attivita-nome { font-weight: 500; color: var(--ink); margin-right: auto; }
.admin-attivita-data { color: var(--text-muted); font-size: 0.78rem; }

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  box-shadow: var(--shadow-sm);
}

.stat-value {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.stat-card.stat-alert .stat-value {
  color: var(--terracotta);
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.admin-search-input {
  flex: 1 1 220px;
}

.admin-filtro-select {
  flex: 0 1 180px;
}

.admin-section-title {
  text-align: left;
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
}

.admin-section-title::after {
  display: none;
}

.admin-section-intro {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 1.4rem;
}

.admin-admins-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.admin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: 0.92rem;
}

.admin-rimuovi {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  font-size: 0.76rem;
  color: var(--terracotta);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.admin-rimuovi:hover { background-color: var(--terracotta); color: var(--white); }

.admin-add-form {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-add-form input {
  flex: 1 1 240px;
}

.admin-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.admin-link-card {
  display: block;
  padding: 1.2rem 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  transition: all 0.3s var(--ease);
}

.admin-link-card:hover {
  background: var(--white);
  border-color: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  color: var(--gold-ink);
}


/* --- FOOTER --- */
.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  background-color: var(--ink);
  color: var(--paper);
  margin: 2rem 0 0;
  padding: 4.5rem 4% 2rem;
  box-shadow: var(--shadow-md);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
}

.footer-col h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.footer-col p { font-size: 0.9rem; color: #CEC7B4; line-height: 1.6; }
.footer-address { margin-top: 0.6rem; font-size: 0.82rem; opacity: 0.85; }
/* Badge di Matrimonio.com (Wedding Awards, Consigliato): immagini servite dal sito,
   senza il loro script (sarebbe una richiesta a un'altra azienda prima del consenso). */
.footer-premio { display: inline-block; vertical-align: middle; margin: 1.4rem 0.8rem 0 0; }
.footer-col ul li { margin-bottom: 0.7rem; }
.footer-col a { font-size: 0.88rem; color: #CEC7B4; }
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(241, 231, 210, 0.15);
  font-size: 0.8rem;
  opacity: 0.55;
}

/* --- TRADUZIONE --- */
#google_translate_element, .goog-te-banner-frame, .skiptranslate > iframe { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

.lang-switch { position: relative; }

.lang-switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.lang-switch-btn:hover { background-color: var(--paper-alt); }

.lang-switch-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  z-index: 50;
}

.lang-switch-menu[hidden] { display: none; }

.lang-switch-menu button {
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.55rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  border-radius: var(--radius-s);
}

.lang-switch-menu button:hover { background-color: var(--paper); }

.lang-banner {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 500;
  max-width: min(480px, 92vw);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lg);
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.lang-banner p { font-size: 0.92rem; color: var(--ink); margin: 0; }
.lang-banner-actions { display: flex; gap: 0.7rem; justify-content: flex-end; }

.lang-banner-actions button {
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.lang-banner-si { background: var(--ink); color: var(--white); border: 1px solid var(--ink); }
.lang-banner-si:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.lang-banner-no { background: none; color: var(--ink-soft); border: 1px solid var(--line-strong); }
.lang-banner-no:hover { background-color: var(--paper); }

/* --- COOKIE E PRIVACY --- */
/* Banner del consenso: il markup lo inietta script.js. */
.cookie-banner {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 600;
  width: min(440px, calc(100vw - 3rem));
  max-height: calc(100svh - 3rem);
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lg);
  padding: 1.4rem 1.5rem 1.3rem;
}

.cookie-banner [hidden] { display: none !important; }

.cookie-titolo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 2.2rem 0.5rem 0;
}

.cookie-testo { font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); }
.cookie-testo a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.cookie-chiudi {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.cookie-chiudi:hover { background-color: var(--paper); }

.cookie-preferenze { display: grid; gap: 0.75rem; margin-top: 1rem; }

/* E' un <label>, quindi eredita dalla regola generale dei moduli: senza questi
   tre ritocchi la casella finisce sopra al testo (flex-direction: column) e la
   descrizione esce tutta in maiuscolo spaziato, da etichetta di campo. */
.cookie-voce {
  display: flex;
  flex-direction: row;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.84rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.45;
  color: var(--ink-soft);
  cursor: pointer;
}
.cookie-voce input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; accent-color: var(--ink); }
.cookie-voce input:disabled { opacity: 0.6; }
.cookie-voce strong { display: block; color: var(--ink); font-weight: 500; }

.cookie-azioni { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }

.cookie-azioni button {
  flex: 1 1 auto;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

/* "Rifiuta" e "Accetta tutto" con lo stesso identico peso: il Garante non
   ammette un rifiuto più piccolo o più pallido dell'accettazione. */
.cookie-rifiuta, .cookie-accetta, .cookie-salva { background: var(--ink); color: var(--white); border: 1px solid var(--ink); }
.cookie-rifiuta:hover, .cookie-accetta:hover, .cookie-salva:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.cookie-personalizza { background: none; color: var(--ink); border: 1px solid var(--line-strong); }
.cookie-personalizza:hover { background-color: var(--paper); }
.cookie-azioni button:focus-visible, .cookie-chiudi:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }

/* Mappa di Google in attesa del consenso (o del pulsante "Mostra la mappa") */
.mappa-consenso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  background: var(--paper-alt);
}
.mappa-consenso[hidden] { display: none; }
.mappa-consenso p { max-width: 38ch; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
.mappa-consenso a { font-size: 0.85rem; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Campo trappola del modulo: fuori dallo schermo per le persone, visibile ai robot */
.campo-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Pagina privacy.html: testo lungo, quindi misura di lettura e titoli a sinistra */
.legale { max-width: 72ch; margin: 0 auto; padding-top: 1rem; color: var(--ink-soft); }
.legale h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  text-align: left;
  margin: 2.8rem 0 0.9rem;
  scroll-margin-top: 112px;
}
.legale h2::after { margin: 0.6rem 0 0; }
.legale h2:first-child { margin-top: 0; }
.legale h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; color: var(--ink); margin: 1.6rem 0 0.4rem; }
.legale p, .legale li { font-size: 0.98rem; line-height: 1.75; }
.legale p + p { margin-top: 0.8rem; }
.legale ul { margin: 0.6rem 0 0.4rem 1.2rem; }
.legale li + li { margin-top: 0.35rem; }
.legale strong { color: var(--ink); font-weight: 500; }
.legale a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legale code { font-size: 0.85em; background: var(--paper-alt); padding: 0.1em 0.35em; border-radius: 4px; }
.legale-tabella { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--line); border-radius: var(--radius-s); }
.legale table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.86rem; line-height: 1.5; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); }
.legale th { font-weight: 500; color: var(--ink); background: var(--paper-alt); }
.legale tr:last-child td { border-bottom: 0; }
.legale-data { margin-top: 2.4rem; font-size: 0.85rem; opacity: 0.8; }

/* Link legali nel piè di pagina */
.footer-legale { display: block; margin-top: 0.6rem; }
.footer-legale a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- RESPONSIVE --- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 5.5rem; min-height: auto; justify-content: center; }
  .hero-text { max-width: 100%; margin: 0 auto; }
  .eyebrow { margin-left: auto; margin-right: auto; }
}

@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; gap: 1rem; }
  .site-nav { order: 3; width: 100%; justify-content: center; gap: 1.1rem; padding-top: 0.6rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .eventi { margin: 2rem 0; max-width: 100%; }
}

@media (max-width: 860px) {
  .admin-dashboard { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; flex-direction: row; align-items: center; overflow-x: auto; padding: 1rem 1.2rem; }
  .admin-sidebar .admin-user-line { display: none; }
  .admin-nav { flex-direction: row; }
  .admin-nav-btn { white-space: nowrap; }
  .admin-breakdown-row { grid-template-columns: 110px 1fr auto; gap: 0.6rem; }
}

@media (max-width: 600px) {
  .nav-toggle { display: flex; }
  .header-actions .nav-cta, .header-actions .social-icon { display: none; }
  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    gap: 1.3rem;
    background: var(--paper);
    padding: 1.6rem 6% 2rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-lg);
  }
  .site-nav.is-open { display: flex; }
  .site-nav .nav-extra {
    display: block;
    padding-top: 1.1rem;
    margin-top: 0.3rem;
    border-top: 1px solid var(--line);
    width: 100%;
    text-align: center;
  }
  section { padding: 4rem 5%; }
  .prenota { padding: 3rem 1.5rem; }
  .negozio-info h2, .eventi h2 { text-align: center; }
  .negozio-info h2::after, .eventi h2::after { margin: 0.9rem auto 0; }
  .site-header { margin: 0.6rem auto 0; padding: 0.9rem 1.4rem; }
  .site-footer { margin: 1.5rem 0 0; }
  .chi-siamo, .testimonianze { margin: 1.5rem auto; padding: 3.5rem 6%; }
  .stagioni-grid, .foto-grid, .galleria-links, .testimonianze-grid, .trust-platforms-grid, .flower-grid {
    gap: 1rem;
  }
}

/* --- VIDEO DEGLI ALLESTIMENTI (homepage) --- */
/* I sorgenti sono verticali 9:16 a 478x850: in un riquadro piu' largo di
   ~300px si vedrebbe la sgranatura, quindi le colonne restano strette.
   `preload="none"` piu' la locandina: i 21 MB partono solo se qualcuno tocca
   play, non all'apertura della pagina. */
.video-reel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: 1.6rem;
  max-width: 1000px;
  margin: 0 auto;
}

.video-reel-item { margin: 0; }

.video-reel video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background-color: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sm);
}

.video-reel figcaption {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  line-height: 1.5;
  text-align: center;
  color: var(--text-muted);
}

/* ==========================================================================
   --- MOBILE (revisione mobile-first) ---
   Ultima sezione del foglio di proposito: sono sovrascritture, e vincono
   sulle regole responsive precedenti a parità di specificità.
   Due soglie, e solo due:
     900px — da qui in giù l'header è una barra piena larghezza col panino
             (prima il panino arrivava solo a 600px e fra 601 e 900 la nav
             andava a capo su tre righe)
     760px — da qui in giù compare la barra azioni fissa in fondo, che si
             prende Chiama / WhatsApp / Prenota; l'header resta pulito
   ========================================================================== */

/* Lo sfondo animato usava 100vh: quando la barra indirizzi di Safari si
   ritira, 100vh cambia e la pagina sussulta. svh è l'altezza a barra
   visibile, quindi stabile. I browser che non lo conoscono ignorano la riga
   e tengono il 100vh di prima. */
#bloom-bg { height: 100svh; }

/* --- Cornice fiorita sui telefoni --------------------------------------- */
/* Sul telefono non c'è margine ai lati: dietro ai contenuti la cornice
   sparirebbe sotto i riquadri a tutta larghezza (eventi, modulo). Sta quindi
   sopra alle sezioni ma sotto header (100) e barra azioni (300), in due
   strisce lungo i bordi come sul computer (dal 2026-10-04; fra il 26/09 e
   quel giorno erano due archi negli angoli in alto).
   I FIORI NON DEVONO FINIRE SOPRA LE SCRITTE, e la prima versione a strisce
   ci finiva: era larga 17px fissi e certe scritte partivano a 13 (piè di
   pagina, apertura). Ora la cosa è garantita da due regole che vanno
   cambiate insieme:
     1. la striscia è larga --cornice-striscia e taglia tutto quello che
        sporge (overflow: hidden): nemmeno un fiore che esplode ne esce;
     2. nelle home nessuna sezione ha un margine laterale più stretto di
        --cornice-margine, cioè la striscia più 8px di aria (più sotto).
   #bloom-bg ha già pointer-events: none, i tocchi passano.
   Niente ondeggiamento: in fondo allo schermo spostava i fiori di 8px verso
   il testo. Le regole della striscia vanno sulla classe che mette script.js
   e non su una media query: la forma del telefono vale anche per un telefono
   girato in orizzontale, che supera i 760px. */
:root {
  --cornice-striscia: clamp(14px, 4.4vw, 19px);
  --cornice-margine: calc(var(--cornice-striscia) + 8px);
}

#bloom-bg.cornice--telefono { z-index: 90; }
#bloom-bg.cornice--telefono .cornice-lato { width: var(--cornice-striscia); overflow: hidden; animation: none; }

/* I margini laterali delle sezioni restano quelli di prima (--lato ripete il
   valore che ogni sezione ha già su telefono), ma non scendono mai sotto
   --cornice-margine. Riguarda solo le home: #bloom-bg è il primo elemento
   del body soltanto lì. Oltre i 760px non serve: il margine più stretto è il
   4%, che da lì in su supera già i 27px del massimo. Se una sezione nuova ha
   un margine suo, va aggiunta qui con il suo --lato. */
@media (max-width: 760px) {
  #bloom-bg ~ section,
  #bloom-bg ~ .site-footer {
    --lato: 5%;
    padding-left: max(var(--lato), var(--cornice-margine));
    padding-right: max(var(--lato), var(--cornice-margine));
  }
  #bloom-bg ~ .hero,
  #bloom-bg ~ .site-footer { --lato: 4%; }
  #bloom-bg ~ .chi-siamo,
  #bloom-bg ~ .testimonianze,
  #bloom-bg ~ .prenota { --lato: 6%; }
  #bloom-bg ~ .eventi { --lato: 7%; }
}
@media (max-width: 600px) {
  #bloom-bg ~ .prenota { --lato: 1.5rem; }
}

/* --- Banner dei cookie sopra la barra azioni ---------------------------- */
@media (max-width: 760px) {
  .cookie-banner {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    bottom: calc(4.9rem + env(safe-area-inset-bottom));
    max-height: calc(100svh - 6.5rem);
    padding: 1.2rem 1.2rem 1.1rem;
  }
}

/* --- Header: barra piena larghezza sotto i 1240px ----------------------- */
/* La soglia non è scelta a occhio: misurata a larghezza naturale, la pillola
   desktop (marchio + 6 voci + globo + 2 social + Prenota) occupa 1201px e ha
   bisogno di 1233px di finestra. Sotto quella misura andava a capo su quattro
   righe e "Prenota" usciva dallo schermo, facendo scorrere la pagina di lato. */
@media (max-width: 1240px) {
  .site-header {
    top: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.55rem 1.1rem;
    padding-top: calc(0.55rem + env(safe-area-inset-top));
    gap: 0.5rem;
    flex-wrap: nowrap;
    border-width: 0 0 1px;
    border-radius: 0;
    background: rgba(245, 239, 225, 0.94);
    -webkit-backdrop-filter: saturate(1.5) blur(14px);
    backdrop-filter: saturate(1.5) blur(14px);
  }

  /* La pillola si rimpiccioliva allo scroll: su una barra a piena larghezza
     lo scale lascerebbe due fessure ai lati. */
  .site-header.is-scrolled { transform: none; box-shadow: var(--shadow-sm); }

  .brand { min-width: 0; }
  .brand-name { font-size: 1.05rem; }
  /* Dal 05/10 nella barra c'è il logo: queste due misure toccano solo il nome nel footer */
  @media (max-width: 420px) { .brand-name { font-size: 0.94rem; letter-spacing: 0.01em; } }
  .brand-logo { height: 56px; margin: -4px 0; }

  .header-actions { gap: 0.15rem; }

  /* 26+22 e 20+28 con box-sizing: content-box fanno 48×48 reali */
  .nav-toggle { display: flex; padding: 14px 11px; }
  .lang-switch-btn { width: 48px; height: 48px; }
  .social-icon { width: 44px; height: 44px; align-items: center; justify-content: center; }

  /* Il menu diventa una lista a tutta larghezza, non una colonna centrata */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    order: 0;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.25rem 1.1rem 1.1rem;
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));
    background: var(--paper);
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    max-height: calc(100svh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav.is-open { display: flex; }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 0.2rem;
    font-size: 1rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--line);
  }
  .site-nav a:last-child { border-bottom: none; }
  /* La sottolineatura che cresce al passaggio del mouse qui non ha senso:
     non c'è un mouse, ed è una lista, non una riga di link. */
  .site-nav a::after { display: none; }

  .site-nav .nav-extra {
    display: flex;
    width: auto;
    margin: 0;
    padding: 0 0.2rem;
    text-align: left;
    border-top: none;
  }

  /* L'header è alto ~60px, non 112: gli ancoraggi si fermavano troppo in basso */
  section { scroll-margin-top: 68px; }
  .eventi { scroll-margin-top: 68px; }

  /* Proporzione al posto dell'altezza fissa: 380px e 340px sono tagli pensati
     per il desktop; su schermi stretti ritagliavano via mezza composizione.
     Va applicato a tutto il mobile, non solo al carosello: fra 701 e 900px le
     tessere tornavano alte 380px fisse. */
  .galleria-tile { height: auto; aspect-ratio: 3 / 4; }
  .foto-card { height: auto; aspect-ratio: 3 / 4; }
  .galleria-tile:hover, .foto-card:hover { transform: none; box-shadow: var(--shadow-sm); }
}

/* --- Sotto i 760px: le azioni scendono nella barra in fondo ------------- */
@media (max-width: 760px) {
  /* Spazio in fondo alla pagina, altrimenti la barra copre il footer */
  body { padding-bottom: calc(4.3rem + env(safe-area-inset-bottom)); }

  /* Fuori dall'header: le stesse azioni, più grandi e sempre visibili,
     stanno nella barra in fondo. Prima "Prenota" era sepolta dentro il
     panino e WhatsApp spariva del tutto. */
  .header-actions .nav-cta,
  .header-actions .social-icon { display: none; }
  /* Eccezione: su admin.html quel pulsante e' "Esci", e non ha un sostituto
     nella barra in fondo (che sulla pagina admin non viene creata). Senza
     questa riga, da telefono non si puo' uscire dal pannello. */
  .header-actions .nav-cta.admin-logout-btn {
    display: inline-flex;
    min-height: 40px;
    padding: 0.45rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  /* Il menu lingua resta appeso sotto il globo, come su desktop.
     Prima veniva sganciato e fissato in fondo al centro dello schermo: era un
     rimedio a un header che andava a capo, e quel problema non esiste più
     perché ora l'header è una barra su una riga sola. Ancorato al pulsante
     si capisce da cosa è stato aperto, e non copre i contenuti. */
  .lang-switch-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    /* non deve mai uscire dallo schermo su telefoni stretti */
    max-width: calc(100vw - 2.2rem);
    z-index: 200;
  }

  /* La freccia "scorri" finirebbe dietro la barra azioni */
  .scroll-cue { display: none; }
}

/* --- Barra azioni fissa (il markup lo inietta script.js) ---------------- */
.action-bar { display: none; }

@media (max-width: 760px) {
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    background: rgba(245, 239, 225, 0.97);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line-strong);
  }

  .action-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0 0.4rem;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s var(--ease);
  }
  .action-bar a svg { width: 17px; height: 17px; flex: none; }
  .action-bar a:active { transform: scale(0.97); }
  .action-bar .action-bar-forte {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
  }
  .action-bar a:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
}

/* --- Tipografia che parte davvero piccola ------------------------------- */
/* clamp(3rem, 6vw, 5.5rem): su un telefono da 390px il 6vw vale 23px, quindi
   vinceva sempre il minimo di 3rem = 48px — lo stesso corpo su ogni telefono,
   dal più piccolo al più grande. Con 8.6vw il titolo scala per davvero. */
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(2.15rem, 8.6vw, 3.5rem); margin-bottom: 1.4rem; }
  .page-hero h1 { font-size: clamp(1.85rem, 7.4vw, 2.8rem); }
  h2 { font-size: clamp(1.7rem, 6.4vw, 2.9rem); }
  .subsection-title { font-size: 1.35rem; }
  .hero-sub { font-size: 1.02rem; margin-bottom: 2rem; }
  .eyebrow { font-size: 0.72rem; margin-bottom: 1.1rem; padding: 0.45rem 1rem; }
  .section-intro { margin-bottom: 2.5rem; }
}

/* --- Bersagli toccabili da 48px ----------------------------------------- */
@media (max-width: 900px) {
  .btn-primary, .nav-cta, .btn-back { min-height: 48px; padding: 0.8rem 1.7rem; }
  .lang-switch-menu button { min-height: 46px; }
  /* Radio e checkbox restano fuori: sono disegnati a 1.15em dal loro blocco,
     e un min-height di 48px li deformerebbe. */
  input:not([type="radio"]):not([type="checkbox"]), select, textarea { min-height: 48px; }
  textarea { min-height: 7rem; }
}

/* --- Galleria: carosello con aggancio, invece di una pila infinita ------ */
/* Cinque riquadri alti 380px in colonna sono cinque schermate di scroll per
   vedere cinque categorie. Di lato si sfogliano con un dito. */
/* La fila scorrevole ora è nella regola base: qui resta solo la misura delle
   tessere sul telefono, dove 300px fissi sarebbero quasi tutto lo schermo. */
@media (max-width: 600px) {
  .galleria-links {
    grid-auto-columns: 78%;
    gap: 0.8rem;
    max-width: none;
    padding: 0.3rem 0 0.6rem;
  }
  .galleria-tile-label { left: 1.1rem; bottom: 1.1rem; font-size: 1.3rem; }

  /* I video in fila che si sfoglia, come la galleria appena sopra */
  .video-reel {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: 0.8rem;
    max-width: none;
    overflow-x: auto;
    /* Stesso bug della .galleria-links qui sopra: senza dirlo esplicitamente
       l'asse verticale diventa scorrevole anche qui. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.6rem;
  }
  .video-reel::-webkit-scrollbar { display: none; }
  .video-reel-item { scroll-snap-align: start; }
  .video-reel figcaption { margin-top: 0.7rem; font-size: 0.8rem; }

}

/* --- Foto delle gallerie: due colonne "a muro" -------------------------- */
/* Prima erano tessere 3:4 tutte uguali, e il ritaglio si mangiava metà di
   ogni foto orizzontale: una tavolata vista di lato diventava una striscia di
   tovaglia. Qui ogni foto tiene le sue proporzioni e si vede intera. Le foto
   hanno width e height della copia web, quindi il posto è riservato prima
   che arrivino: la pagina non salta e il caricamento pigro funziona ancora.
   Le colonne si riempiono dall'alto in basso; il visualizzatore segue
   l'ordine del markup, cioè lo stesso. */
@media (max-width: 760px) {
  .foto-grid { display: block; columns: 2; column-gap: 0.6rem; }
  .foto-card {
    break-inside: avoid;
    margin-bottom: 0.6rem;
    height: auto;
    aspect-ratio: auto;
    border-radius: var(--radius-s);
  }
  .foto-card img { height: auto; }
  .foto-grid + .subsection-title { margin-top: 2.4rem; }
}

/* --- Ritocchi di respiro ------------------------------------------------ */
@media (max-width: 760px) {
  section { padding: 3.5rem 5%; }
  .eventi { padding: 3rem 7%; margin: 1.5rem 0; }
  .foto-grid, .flower-grid, .stagioni-grid { max-width: none; }
}

/* Su schermo tattile il passaggio del mouse non esiste: gli effetti :hover
   restano "appiccicati" dopo il tocco finché non si tocca altrove. */
@media (hover: none) {
  .foto-card:hover img,
  .galleria-tile:hover img { transform: none; }
  /* Il colore pieno arrivava solo col mouse sopra: su un telefono le foto
     restavano spente per sempre. */
  .foto-card img,
  .galleria-tile img { filter: none; }
  .btn-primary:hover, .nav-cta:hover, .btn-back:hover { transform: none; box-shadow: var(--shadow-sm); }
}

/* ==========================================================================
   --- VISUALIZZATORE FOTO (lightbox) ---
   Il tasto destro è disabilitato su tutto il sito e la pressione prolungata
   su touch non apre nulla: senza questo, una foto della galleria non si può
   guardare più grande in nessun modo. Il markup lo inietta script.js.
   ========================================================================== */

.foto-card { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
  background: rgba(20, 28, 22, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.lightbox.is-open { display: flex; opacity: 1; }

.lightbox-figura {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: min(1100px, 100%);
  max-height: 100%;
}

.lightbox-figura img {
  max-width: 100%;
  /* lascia spazio alla didascalia e ai pulsanti, anche in orizzontale */
  max-height: calc(100svh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lg);
  background: var(--ink);
}

.lightbox figcaption {
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  text-align: center;
  color: rgba(245, 239, 225, 0.86);
}

/* Chiudi, precedente, successivo: 48px pieni, come il resto del mobile */
.lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--paper);
  background: rgba(30, 43, 34, 0.55);
  border: 1px solid rgba(245, 239, 225, 0.28);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.lightbox button:hover { background: rgba(30, 43, 34, 0.85); }
.lightbox button:active { transform: scale(0.94); }
.lightbox button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lightbox button svg { width: 20px; height: 20px; }

.lightbox-chiudi { top: max(1rem, env(safe-area-inset-top)); right: 1rem; }
.lightbox-prec { left: 0.7rem; top: 50%; transform: translateY(-50%); }
.lightbox-succ { right: 0.7rem; top: 50%; transform: translateY(-50%); }
.lightbox-prec:active, .lightbox-succ:active { transform: translateY(-50%) scale(0.94); }
.lightbox-prec[hidden], .lightbox-succ[hidden] { display: none; }

.lightbox-conta {
  position: absolute;
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: rgba(245, 239, 225, 0.6);
}

@media (max-width: 700px) {
  .lightbox { padding: 3.6rem 0.6rem calc(3rem + env(safe-area-inset-bottom)); }
  .lightbox-figura img { max-height: calc(100svh - 11rem); }
  .lightbox figcaption { font-size: 0.8rem; padding: 0 0.4rem; }
  .lightbox-prec { left: 0.4rem; }
  .lightbox-succ { right: 0.4rem; }
}

/* Con la barra azioni in fondo, il visualizzatore deve stare sopra di lei */
@media (max-width: 760px) {
  .lightbox { z-index: 900; }
  .action-bar { z-index: 300; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
}