/* ============================================================
   Marlene Nails & Beauty — Stylesheet
   ------------------------------------------------------------
   Brand palette: fresh greens on warm cream (see brand flyer).
   All colours, fonts and spacing are defined once as CSS
   variables in :root below — change them there to retheme.
   ============================================================ */

/* ---------- 1. Design tokens (edit colours/fonts here) ---------- */
:root {
  /* Brand palette — greens on cream */
  --c-cream:       #F3EFE6;   /* page background (ivory)        */
  --c-cream-2:     #EAE4D5;   /* alternate section background   */
  --c-primary:     #4B6A2B;   /* deep forest green — headings, footer, primary */
  --c-primary-2:   #6E9139;   /* softer green — text accents    */
  --c-accent:      #8CC63F;   /* bright leaf green — main accent */
  --c-accent-soft: #CFE3A6;   /* light leaf green               */
  --c-sage:        #A7C77E;   /* muted sage green               */
  --c-ink:         #37402A;   /* body text (dark olive)         */
  --c-muted:       #7E846E;   /* muted grey-green text          */
  --c-white:       #ffffff;
  --c-line:        #E2DBC9;   /* hairline borders               */

  /* Typography — rounded friendly headings, clean body */
  --font-head: "Quicksand", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --radius: 14px;
  --shadow: 0 18px 40px -22px rgba(43, 55, 20, .45);
  --shadow-sm: 0 8px 22px -14px rgba(43, 55, 20, .4);
  --transition: .35s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; scroll-padding-top: 84px;
  /* Rete di sicurezza: nessuno scorrimento laterale della pagina, anche se un
     testo molto ingrandito prova a sfondare. "clip" (browser recenti) non
     crea un contenitore di scroll, quindi non interferisce con lo scorrimento
     verticale; "hidden" resta come fallback per i browser più vecchi. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Niente "font boosting" automatico di Chrome mobile: le dimensioni sono
     già pensate per il telefono. NB: questo non tocca l'ingrandimento
     scelto dall'utente nelle impostazioni, che va rispettato. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Accessibilità: se l'utente ha i caratteri di sistema ingranditi, il testo
   deve ANDARE A CAPO dentro il suo contenitore, non sbordare o farsi tagliare. */
h1, h2, h3, h4, h5, h6, p, li, b, strong, span, a { overflow-wrap: break-word; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.12; color: var(--c-primary); margin: 0 0 .4em; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }

/* ---------- 3. Reusable helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.section { padding: clamp(56px, 9vw, 110px) 0; }
.section--tint { background: var(--c-cream-2); }
.eyebrow {
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--c-primary-2);
  margin: 0 0 .6rem;
}
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(34px, 5vw, 60px); }
.section-head h2 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
.section-head p { color: var(--c-muted); font-size: 1.05rem; }
.lead { font-size: 1.15rem; color: var(--c-primary-2); }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  padding: .85rem 1.6rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid transparent; transition: var(--transition);
}
.btn--primary { background: var(--c-primary); color: var(--c-white); }
.btn--primary:hover { background: var(--c-accent); color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--accent { background: var(--c-accent); color: var(--c-primary); }
.btn--accent:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); filter: brightness(1.04); }
.btn--ghost { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary); color: var(--c-white); }
.btn--light { background: var(--c-white); color: var(--c-primary); }
.btn--light:hover { background: var(--c-accent-soft); }

/* Reveal-on-scroll animation (toggled by JS) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 4. Header / navigation ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center;
  padding: 14px 0; transition: var(--transition);
}
.site-header.scrolled {
  background: rgba(243, 239, 230, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px -18px rgba(43, 55, 20, .6);
}
.nav { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: flex; align-items: center; margin-right: auto; }
/* Real logo wordmark: hidden at the top (banner already shows it),
   fades in once the user scrolls past the hero (JS toggles .brand-shown). */
.brand__logo {
  height: 38px; width: auto; display: block;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.site-header.brand-shown .brand__logo { opacity: 1; transform: none; pointer-events: auto; }
.nav__links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav__links a { font-size: .92rem; font-weight: 500; color: var(--c-primary); position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--c-accent); transition: var(--transition); }
.nav__links a:hover::after { width: 100%; }
/* Buttons inside the nav keep their own readable text colour (override the link colour above) */
.nav__links a.btn--accent { color: var(--c-primary); }
.nav__links a.btn--primary { color: var(--c-white); }
.nav__links a.btn::after { display: none; } /* no underline animation on button CTAs */
.nav__cta { margin-left: 8px; }

/* CTA nel top header: nascosto in cima, appare (fade-in) quando l'utente
   scorre oltre il primo "Chiama ora" dell'hero (JS toggle .cta-shown). */
.header-cta {
  margin-left: 20px; padding: 9px 18px; font-size: .9rem; white-space: nowrap;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.site-header.cta-shown .header-cta { opacity: 1; transform: none; pointer-events: auto; }
/* Su desktop la CTA a comparsa sostituisce quella fissa nel menu */
@media (min-width: 901px) { .nav__cta { display: none; } }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 26px; height: 2px; background: var(--c-primary); margin: 5px 0; transition: var(--transition); }

/* ---------- 5. Hero (brand banner + content band) ---------- */
.hero { position: relative; background: var(--c-cream); padding-top: 72px; /* space for fixed header */ }
/* Banner shown whole (no crop) so any baked-in text/logo stays visible. */
.hero__banner { background: var(--c-cream); line-height: 0; }
.hero__banner img { width: 100%; height: auto; display: block; }
.hero__content { text-align: center; padding: clamp(30px, 5vw, 56px) 22px clamp(16px, 2vw, 26px); }
.hero__content .eyebrow { color: var(--c-primary-2); }
.eyebrow__since { display: block; margin-top: 5px; font-size: .62rem; letter-spacing: .28em; opacity: .8; }
.hero__content h1 { color: var(--c-primary); font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: .35em; }
.hero__content h1 em { color: var(--c-accent); font-style: normal; }
.hero__content p { font-size: 1.15rem; color: var(--c-ink); max-width: 40rem; margin-inline: auto; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; justify-content: center; }
.hero__stars { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: .95rem; color: var(--c-ink); }
.hero__stars .stars { color: var(--c-accent); letter-spacing: 2px; font-size: 1.1rem; }

/* ---------- 6. Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.service-card {
  background: var(--c-white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: var(--transition);
}
.service-card:hover { transform: translateY(-6px); }
.service-card__img { aspect-ratio: 4 / 3; overflow: hidden; }
.service-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.service-card:hover .service-card__img img { transform: scale(1.06); }
.service-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.service-card__body h3 { font-size: 1.5rem; }
.service-card__body p { color: var(--c-muted); font-size: .96rem; flex: 1; }
.service-card__tag { align-self: flex-start; margin-top: 12px; font-size: .8rem; font-weight: 600; color: var(--c-primary-2); letter-spacing: .04em; }

/* ---------- 6b. Service categories (home) + detail pages ---------- */
.svc-ic { width: 30px; height: 30px; fill: none; stroke: var(--c-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.cat-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 26px; }
.cat-nav a { font-size: .9rem; font-weight: 600; color: var(--c-primary); padding: .5rem 1.1rem; border: 1.5px solid var(--c-line); border-radius: 999px; transition: var(--transition); }
.cat-nav a:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.area-title { font-size: 1.5rem; margin: 42px 0 18px; padding-bottom: 8px; border-bottom: 2px solid var(--c-accent-soft); scroll-margin-top: 90px; }

/* Riduce lo spazio sopra la sezione servizi + separatore minimal */
#servizi { padding-top: clamp(8px, 1.5vw, 18px); }
.section-divider { display: block; width: min(180px, 55%); height: 1px; border: 0; background: var(--c-accent); border-radius: 1px; margin: 0 auto clamp(18px, 3vw, 28px); }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
/* Compact variant: all categories in one tight grid */
.cat-grid--compact { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 20px; }
.cat-card { background: var(--c-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: var(--transition); color: inherit; }
.cat-card:hover { transform: translateY(-6px); }
.cat-card__img { aspect-ratio: 16/9; overflow: hidden; }
.cat-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cat-card:hover .cat-card__img img { transform: scale(1.06); }
/* min-width:0 è essenziale: senza, in "flex-direction: row" (mobile) il corpo
   non può restringersi sotto la larghezza del suo contenuto e il testo esce
   dalla card (evidente con i caratteri di sistema ingranditi). */
.cat-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cat-card__area { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-primary-2); margin-bottom: 6px; }
.cat-card__head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; min-width: 0; }
.cat-card__head .svc-ic { width: 22px; height: 22px; flex: none; }
.cat-card__body h4 { font-family: var(--font-head); font-weight: 700; font-size: 1.18rem; color: var(--c-primary); margin: 0; line-height: 1.15; min-width: 0; hyphens: auto; }
.cat-card__body p { color: var(--c-muted); font-size: .88rem; flex: 1; margin: 0 0 12px; }
/* Il piede va a capo se prezzo + "Scopri" non stanno sulla stessa riga */
.cat-card__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.cat-card__foot b { color: var(--c-primary); font-size: 1.02rem; min-width: 0; }
.cat-card__more { color: var(--c-primary-2); font-weight: 600; font-size: .85rem; white-space: nowrap; }
/* Mobile: card compatte a riga (miniatura + testo), meno scroll */
@media (max-width: 600px) {
  .cat-grid--compact { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cat-card { flex-direction: row; align-items: stretch; }
  .cat-card__img { width: 104px; flex: none; aspect-ratio: auto; }
  .cat-card__img img { height: 100%; }
  .cat-card__body { padding: 12px 14px; }
  .cat-card__body p { display: none; }
  .cat-card__area { margin-bottom: 3px; }
  .cat-card__body h4 { font-size: 1.05rem; }
  .cat-card__foot { margin-top: 10px; }
}

/* Detail pages */
.svc-hero { padding-top: 72px; background: var(--c-cream-2); }
.svc-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px,5vw,54px); align-items: center; padding-block: clamp(30px,5vw,60px); }
.svc-hero__img img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.svc-breadcrumb { font-size: .85rem; color: var(--c-muted); margin-bottom: 14px; }
.svc-breadcrumb a { color: var(--c-primary-2); font-weight: 600; }
.svc-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--c-primary); border: 1.5px solid var(--c-line); background: var(--c-white); padding: .5rem 1.05rem; border-radius: 999px; transition: var(--transition); }
.svc-back:hover { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
/* Back button sits full-width at the top of the hero grid */
.svc-hero__inner > .svc-back { grid-column: 1 / -1; justify-self: start; margin-bottom: 6px; }
.svc-hero__icon { width: 46px; height: 46px; stroke: var(--c-primary); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.svc-hero h1 { font-size: clamp(2rem,4.5vw,3.2rem); }
.svc-hero__lead { font-size: 1.1rem; color: var(--c-primary-2); }
.svc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.svc-section { padding: clamp(40px,6vw,72px) 0; }
.svc-section h2 { font-size: clamp(1.7rem,3.5vw,2.4rem); margin-bottom: 22px; }
.svc-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 800px; }
/* flex-wrap + min-width:0 → con i caratteri ingranditi il prezzo scende sotto
   al nome del trattamento invece di uscire dal riquadro. */
.svc-option { background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px 22px; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.svc-option .txt { min-width: 0; flex: 1 1 12rem; }
.svc-option .txt h4 { margin: 0 0 4px; font-size: 1.15rem; color: var(--c-primary); }
.svc-option .txt p { margin: 0; color: var(--c-muted); font-size: .92rem; }
.svc-option .price { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--c-primary); white-space: nowrap; }

.pricelist { list-style: none; margin: 0; padding: 0; max-width: 520px; }
.pricelist li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--c-line); }
.pricelist .pl-name { color: var(--c-ink); }
.pricelist .pl-dots { flex: 1; border-bottom: 1px dotted var(--c-line); transform: translateY(-4px); }
.pricelist .pl-price { font-weight: 700; color: var(--c-primary); white-space: nowrap; }

.svc-steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 20px; margin-top: 8px; }
.svc-step { background: var(--c-white); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.svc-step .n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-accent); color: var(--c-primary); font-weight: 700; margin-bottom: 10px; }
.svc-step h4 { margin: 0 0 6px; color: var(--c-primary); }
.svc-step p { margin: 0; color: var(--c-muted); font-size: .92rem; }
.svc-note { color: var(--c-muted); font-size: .95rem; max-width: 800px; margin-top: 24px; }

/* Video del trattamento — video verticale accanto ai benefici */
.svc-video__grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: clamp(24px, 5vw, 54px); align-items: center; }
.svc-video__player { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000; aspect-ratio: 9 / 16; }
.svc-video__player video { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-video__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.svc-video__benefits li { position: relative; padding-left: 34px; color: var(--c-ink); font-size: 1.02rem; }
.svc-video__benefits li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B6A2B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.svc-video__benefits li b { color: var(--c-primary); font-family: var(--font-head); }

/* Icona play + pulsante piccolo per i link "Guarda il video" */
.ic-play { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.btn--sm { padding: .55rem 1.1rem; font-size: .85rem; }

/* Sezione "attaccata": riduce lo spazio quando segue l'hero con lo stesso sfondo */
.svc-section--tight { padding-top: clamp(14px, 2.5vw, 26px); }

/* Prezzo + pulsante video nella stessa riga del listino (colonna a destra) */
.svc-option--video { align-items: center; }
.svc-option__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }

/* Player personalizzato: play/pausa, barra avanti-indietro, fullscreen. Niente volume. */
.svc-video__player .vp-video { cursor: pointer; }
.svc-video__player .vp-video::-webkit-media-controls { display: none !important; } /* nasconde eventuali controlli nativi iOS */

/* Cover in dissolvenza: sfuma quando parte il video (crossfade morbido) */
.svc-video__player .vp-cover {
  position: absolute; inset: 0; z-index: 2; background-size: cover; background-repeat: no-repeat;
  background-position: center; opacity: 1; transition: opacity 1.4s ease; pointer-events: none;
}
.svc-video__player.vp-started .vp-cover { opacity: 0; }
.svc-video__player .vp-video { transition: opacity 1.4s ease; }

.svc-video__player .vp-big {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border: 0; border-radius: 50%; z-index: 3;
  background: rgba(75,106,43,.82); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: opacity .5s ease, background var(--transition), transform var(--transition); box-shadow: var(--shadow);
}
.svc-video__player .vp-big:hover { background: var(--c-primary); transform: scale(1.06); }
.svc-video__player .vp-big svg { width: 34px; height: 34px; fill: currentColor; margin-left: 3px; }
.svc-video__player.is-playing .vp-big { opacity: 0; pointer-events: none; }

.svc-video__player .vp-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  opacity: 0; transform: translateY(6px); transition: var(--transition);
}
.svc-video__player:hover .vp-controls,
.svc-video__player:focus-within .vp-controls,
.svc-video__player.is-playing .vp-controls { opacity: 1; transform: none; }

.svc-video__player .vp-btn {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16);
  color: #fff; cursor: pointer; display: grid; place-items: center; transition: var(--transition);
}
.svc-video__player .vp-btn:hover { background: var(--c-accent); color: var(--c-primary); }
.svc-video__player .vp-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc-video__player .vp-play svg { fill: currentColor; stroke: none; }

.svc-video__player .vp-time { color: #fff; font-size: .74rem; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .9; }

.svc-video__player .vp-seek {
  flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.35); cursor: pointer; margin: 0;
}
.svc-video__player .vp-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-accent); border: 2px solid #fff; cursor: pointer;
}
.svc-video__player .vp-seek::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--c-accent); border: 2px solid #fff; cursor: pointer;
}
.svc-video__player:fullscreen { display: grid; place-items: center; background: #000; }
.svc-video__player:fullscreen .vp-video { width: auto; height: 100%; }
.svc-video__player:-webkit-full-screen .vp-video { width: auto; height: 100%; }

@media (max-width: 760px) { .svc-hero__inner { grid-template-columns: minmax(0, 1fr); } .svc-back { order: -2; } .svc-hero__img { order: -1; } }
@media (max-width: 720px) {
  .svc-video__grid { grid-template-columns: 1fr; gap: 26px; }
  .svc-video__player { max-width: 300px; margin-inline: auto; }
  .svc-video__player .vp-controls { opacity: 1; transform: none; } /* mobile: controlli sempre visibili */
}

/* ---------- 7. About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 70px); align-items: center; }
.about__img { position: relative; }
.about__img img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 9/10; object-fit: cover; object-position: center center; }
.about__badge {
  position: absolute; bottom: -22px; right: -14px; background: var(--c-accent); color: var(--c-primary);
  border-radius: var(--radius); padding: 18px 22px; text-align: center; box-shadow: var(--shadow-sm);
}
.about__badge b { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; display: block; line-height: 1; }
.about__badge span { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
/* Su schermi stretti (o con caratteri ingranditi) il badge resta dentro
   l'immagine invece di sporgere e finire fuori dallo schermo. */
@media (max-width: 600px) {
  .about__badge { right: 8px; bottom: -14px; padding: 14px 16px; max-width: calc(100% - 16px); }
  .about__badge b { font-size: 1.9rem; }
}
.about__content h2 { font-size: clamp(2rem, 4vw, 3rem); }

/* ---------- 8. Gallery ---------- */
.gallery { columns: 3; column-gap: 16px; }
.gallery img { width: 100%; border-radius: 10px; margin-bottom: 16px; box-shadow: var(--shadow-sm); transition: var(--transition); }
.gallery img:hover { transform: scale(1.02); filter: brightness(1.03); }

/* ---------- 9. Reviews ---------- */
.reviews-top { text-align: center; margin-bottom: 44px; }
.reviews-top .score { font-family: var(--font-head); font-weight: 700; font-size: 4rem; color: var(--c-primary); line-height: 1; }
.reviews-top .stars { color: var(--c-accent); font-size: 1.5rem; letter-spacing: 3px; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
/* Fallback senza JS: mostra solo le prime 3 del pool (le più lunghe).
   Con JS attivo, main.js sovrascrive con display inline le 3 scelte a caso. */
.reviews-grid.js-reviews-pool .review-card:nth-child(n+4) { display: none; }
.review-card { background: var(--c-white); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); border-top: 3px solid var(--c-accent); }
.review-card .stars { color: var(--c-accent); letter-spacing: 2px; margin-bottom: 10px; }
.review-card p { font-style: italic; color: var(--c-primary-2); }
.review-card .author { font-weight: 600; color: var(--c-primary); font-style: normal; margin-top: 14px; display: block; }

/* ---------- 10. Gift card ---------- */
.giftcard { position: relative; background: var(--c-primary); color: var(--c-white); border-radius: var(--radius); overflow: hidden; }
.giftcard__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 64px); align-items: center; padding: clamp(34px, 6vw, 68px); }
.giftcard h2 { color: var(--c-white); font-size: clamp(2rem, 4vw, 3rem); }
.giftcard .eyebrow { color: var(--c-accent); }
.giftcard p { color: rgba(255,255,255,.85); }
.giftcard__visual {
  background: #c4ccc7; /* argento solido (il tilt/riflesso dà la profondità) */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius); padding: 30px 34px; aspect-ratio: 16/10;
  display: flex; flex-direction: column; justify-content: space-between; color: var(--c-primary);
  box-shadow: var(--shadow); position: relative;
}
.giftcard__visual .gc-label { font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(30,42,15,.55); }
.giftcard__visual .gc-amount { font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; color: var(--c-primary); }
.gc-amounts { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.gc-amounts button {
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; cursor: pointer;
  padding: .7rem 1.15rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.4);
  background: transparent; color: var(--c-white); transition: var(--transition);
}
.gc-amounts button:hover, .gc-amounts button.active { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); }
.gc-note { font-size: .82rem; color: rgba(255,255,255,.6); margin-top: 14px; }

/* Teaser in home: solo testo + bottoni, card nascosta su mobile */
.gc-teaser__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Landing gift card — configuratore */
.gc-hero-visual { display: flex; align-items: center; }
.gc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 20px; }
.gc-tab { flex: 1 1 8rem; min-width: 0; padding: .62rem 1rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: var(--c-white); font-family: var(--font-body); font-weight: 600; font-size: .95rem; cursor: pointer; transition: var(--transition); }
.gc-tab:hover { border-color: var(--c-accent); }
.gc-tab.active { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); }
.gc-panel[hidden] { display: none; }
.gc-swap-note { font-size: .82rem; color: rgba(255,255,255,.75); margin-top: 10px; line-height: 1.5; }
/* Opzioni del menu a tendina leggibili (testo scuro sul popup nativo) */
.giftcard select option, .giftcard select optgroup { color: #222; }
.gc-summary { margin-top: 24px; padding: 16px 18px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.gc-summary h3 { color: var(--c-white); font-size: 1.05rem; margin: 0 0 10px; }
.gc-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.gc-summary__row #gcSummaryLabel { color: rgba(255,255,255,.9); }
.gc-summary__row #gcSummaryTotal { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; color: var(--c-accent); flex: none; }
#gcPayBtn { margin-top: 18px; }
.btn.is-disabled { opacity: .5; pointer-events: none; }

/* Logo sul biglietto (PNG trasparente, senza sfondo) */
.gc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Logo ricolorato via mask (verde scuro come il prezzo) sulla sagoma del PNG trasparente */
.gc-logo {
  display: inline-block; height: 58px; width: 210px; max-width: 84%;
  background-color: var(--c-primary);
  -webkit-mask: url(../assets/img/logo-wordmark.png) no-repeat right center / contain;
          mask: url(../assets/img/logo-wordmark.png) no-repeat right center / contain;
  filter: drop-shadow(0 2px 4px rgba(43,55,20,.2));
}

/* Effetto carta 3D (tilt col mouse + riflesso) */
.gc-tilt { transition: transform .12s ease; transform-style: preserve-3d; will-change: transform; }
.gc-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease; mix-blend-mode: soft-light; }

/* Card come immagine (design selezionabile) + selettore dei design */
.gc-cardframe { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16/10; background: #c4ccc7; }
.gc-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-field-label { display: block; font-weight: 600; color: var(--c-white); margin: 4px 0 8px; font-size: .95rem; }
.gc-designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 22px; }
.gc-design { padding: 0; border: 2px solid rgba(255,255,255,.3); border-radius: 10px; overflow: hidden; background: none; cursor: pointer; aspect-ratio: 16/10; transition: var(--transition); }
.gc-design img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-design:hover { border-color: rgba(255,255,255,.6); }
.gc-design.active { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent); }

/* Toggle "È un regalo" / "È per me" */
.gc-giftmode { display: flex; gap: 8px; margin: 4px 0 16px; }
.gc-giftmode__btn { flex: 1; padding: .58rem 1rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: var(--c-white); font-family: var(--font-body); font-weight: 600; font-size: .92rem; cursor: pointer; transition: var(--transition); }
.gc-giftmode__btn:hover { border-color: var(--c-accent); }
.gc-giftmode__btn.active { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); }
#gcGiftOnly[hidden] { display: none; }

/* Selettore trattamenti: categorie + card */
.gc-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.gc-cat { padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: var(--c-white); font-family: var(--font-body); font-weight: 600; font-size: .9rem; cursor: pointer; transition: var(--transition); }
.gc-cat:hover { border-color: var(--c-accent); }
.gc-cat.active { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); }
.gc-treatments { display: grid; grid-template-columns: 1fr; gap: 10px; }
.gc-treat { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: .8rem 1rem; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: var(--c-white); font-family: var(--font-body); cursor: pointer; transition: var(--transition); }
.gc-treat[hidden] { display: none; }
.gc-treat:hover { border-color: var(--c-accent); background: rgba(255,255,255,.1); }
.gc-treat.selected { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-primary); }
/* Badge ×N con la quantità in carrello */
.gc-treat[data-qty]::after { content: "\D7" attr(data-qty); position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: .78rem; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.28); }
.gc-treat__name { font-weight: 600; font-size: .98rem; }
.gc-treat__name small { font-weight: 400; opacity: .7; }
.gc-treat__price { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; flex: none; }

/* Carrello (riepilogo trattamenti con quantità) */
.gc-cart { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.gc-cart__item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.18); }
.gc-cart__name { flex: 1; color: rgba(255,255,255,.92); font-size: .95rem; }
.gc-cart__line { font-weight: 700; color: var(--c-white); flex: none; min-width: 62px; text-align: right; }
.gc-qty { display: inline-flex; align-items: center; gap: 8px; }
.gc-qty__btn { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: var(--c-white); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.gc-qty__btn:hover { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); }
.gc-qty__n { min-width: 18px; text-align: center; font-weight: 700; color: var(--c-white); }
.gc-cart .gc-qty__input { width: 46px; padding: .32rem; text-align: center; font-weight: 700; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: var(--c-white); font-family: inherit; font-size: .95rem; -moz-appearance: textfield; appearance: textfield; }
.gc-cart .gc-qty__input:focus { outline: none; border-color: var(--c-accent); }
/* Nasconde le frecce spinner dei campi numerici (carrello + importo libero) */
.gc-cart .gc-qty__input::-webkit-outer-spin-button,
.gc-cart .gc-qty__input::-webkit-inner-spin-button,
#gcCustom::-webkit-outer-spin-button,
#gcCustom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#gcCustom { -moz-appearance: textfield; appearance: textfield; }
.gc-cart__remove { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: rgba(255,255,255,.55); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: var(--transition); }
.gc-cart__remove:hover { color: #ff6b6b; background: rgba(255,255,255,.08); }
.gc-cart-total { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); }
.gc-cart-empty { color: rgba(255,255,255,.7); font-size: .9rem; margin: 4px 0 0; }
/* Banner avviso "minimo € 10" (modalità trattamenti) */
.gc-min-note {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 10px;
  background: rgba(255, 214, 120, .16);
  border: 1px solid rgba(255, 214, 120, .5); border-left: 4px solid #F0B429;
  color: #FFE7B0; font-size: .9rem; font-weight: 600; line-height: 1.45;
  display: flex; gap: 8px; align-items: flex-start;
}
.gc-min-note::before { content: "\26A0\FE0F"; flex: none; }
/* L'attributo hidden deve vincere su display:flex delle righe riepilogo/carrello */
.gc-summary__row[hidden], .gc-cart[hidden], .gc-cart-empty[hidden], .gc-min-note[hidden] { display: none; }

/* ---------- Checkout (Stripe) ---------- */
.checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 48px); align-items: start; }
.checkout__pay { background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(22px, 4vw, 34px); }
#payment-element { margin-bottom: 22px; min-height: 40px; }
#express-checkout-element { margin-bottom: 6px; }
#express-checkout-wrap[hidden] { display: none; }
/* Separatore "oppure paga con carta" tra i wallet e il form carta */
.checkout__or { display: flex; align-items: center; gap: 12px; margin: 16px 0 18px; color: var(--c-muted); font-size: .82rem; }
.checkout__or::before, .checkout__or::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
#paySubmit { width: 100%; justify-content: center; }
.checkout__msg { margin-top: 14px; color: #b3261e; font-size: .9rem; }
.checkout__summary { background: var(--c-primary); color: var(--c-white); border-radius: var(--radius); padding: clamp(22px, 4vw, 32px); }
.checkout__summary .giftcard__visual, .checkout__summary .gc-cardframe { margin-bottom: 20px; }
.checkout__recap { margin: 6px 0 4px; }
.checkout__line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.18); font-size: .95rem; color: rgba(255,255,255,.92); }
.checkout__line--muted { color: rgba(255,255,255,.68); font-size: .88rem; }
.checkout__summary .gc-cart-total #coTotal { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--c-accent); }
@media (max-width: 820px) { .checkout { grid-template-columns: minmax(0, 1fr); } .checkout__summary { order: -1; } }
.gc-form { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }
.gc-gift__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 560px) { .gc-gift__grid { grid-template-columns: minmax(0, 1fr); } }
.giftcard textarea { min-height: 58px; resize: vertical; line-height: 1.4; }
@media (max-width: 760px) {
  /* Home: teaser gift card compatto (card mostrata, sopra il testo).
     minmax(0,1fr) evita il "blowout" della griglia (card che sforava). */
  .giftcard--teaser .giftcard__inner { grid-template-columns: minmax(0, 1fr); padding: clamp(26px, 7vw, 40px); }
  /* width:100% evita che la card superi la colonna (che causava lo
     spostamento a destra); max-width la limita sugli schermi più larghi. */
  .giftcard--teaser .giftcard__visual,
  .giftcard--teaser .gc-cardframe { order: -1; width: 100%; max-width: 280px; margin: 0 auto; }
  /* Landing: mockup centrato sopra il configuratore */
  .gc-hero-visual { justify-content: center; }
}

/* ---------- 11. Contact / location ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--c-white); }
.contact__info { padding: clamp(30px, 5vw, 54px); }
.contact__info h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.contact__list { list-style: none; margin: 24px 0; padding: 0; }
.contact__list li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--c-line); align-items: flex-start; }
.contact__list .ico { color: var(--c-primary-2); font-size: 1.2rem; flex: none; width: 24px; text-align: center; }
.contact__list b { color: var(--c-primary); display: block; }
.contact__list span { color: var(--c-muted); font-size: .95rem; }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; padding: 6px 0; font-size: .95rem; border-bottom: 1px dashed var(--c-line); }
.hours li.closed { color: var(--c-muted); }
.hours li.today { font-weight: 700; color: var(--c-primary-2); }
.contact__map { min-height: 320px; }
/* La mappa è avvolta in un link: il click apre la scheda Google del salone.
   L'iframe non cattura i click (pointer-events:none) così il link è cliccabile. */
.contact__map-link { display: block; width: 100%; height: 100%; min-height: inherit; cursor: pointer; }
.contact__map iframe { width: 100%; height: 100%; min-height: inherit; border: 0; display: block; pointer-events: none; }

/* ---------- 12. Forms (gift card request / contact) ---------- */
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 5px; color: rgba(255,255,255,.85); }
.giftcard input, .giftcard textarea, .giftcard select {
  width: 100%; padding: .72rem .9rem; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08); color: var(--c-white); font-family: inherit; font-size: .95rem;
}
.giftcard input::placeholder, .giftcard textarea::placeholder { color: rgba(255,255,255,.5); }
.giftcard input:focus, .giftcard textarea:focus, .giftcard select:focus { outline: none; border-color: var(--c-accent); }
.form-field label .req { color: var(--c-accent); }

/* Scelta di consegna della Gift Card (invio a me / al destinatario) */
.gc-field-label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 8px; color: rgba(255,255,255,.85); }
.gc-delivery { display: flex; flex-direction: column; gap: 8px; }
.gc-delivery__opt {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 11px 13px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); font-size: .92rem; line-height: 1.35;
  transition: var(--transition);
}
.gc-delivery__opt:hover { border-color: rgba(255,255,255,.4); }
.gc-delivery__opt input { width: auto; margin: 2px 0 0; accent-color: var(--c-accent); flex: none; }
.gc-delivery__opt:has(input:checked) { border-color: var(--c-accent); background: rgba(255,255,255,.12); }
#gcRecipientEmailField[hidden] { display: none; }

/* Consegna programmata */
.gc-hint { margin: 8px 0 0; font-size: .82rem; color: rgba(255,255,255,.7); line-height: 1.45; }
.gc-when { display: flex; flex-direction: column; gap: 8px; }

/* Datepicker personalizzato (stile del sito) */
.gc-datepicker { position: relative; }
.gc-date-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08); color: #fff; font: inherit; cursor: pointer; transition: var(--transition);
}
.gc-date-trigger:hover { border-color: var(--c-accent); }
.gc-date-trigger.has-value { border-color: var(--c-accent); }
.gc-date-ic { flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.gc-cal {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: auto;
  width: 288px; max-width: 100%;
  background: #fff; color: #2b2b28; border-radius: 12px; padding: 10px;
  box-shadow: 0 16px 44px rgba(0,0,0,.30); border: 1px solid rgba(0,0,0,.06);
}
.gc-cal[hidden] { display: none; }
.gc-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gc-cal__title { font-family: var(--font-head); font-weight: 700; color: var(--c-primary); font-size: .9rem; }
.gc-cal__nav {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid #dcdfd4; background: #fff;
  color: var(--c-primary); cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.gc-cal__nav:hover:not(:disabled) { background: #eef0e8; }
.gc-cal__nav:disabled { opacity: .35; cursor: default; }
.gc-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gc-cal__wd { text-align: center; font-size: .6rem; text-transform: uppercase; letter-spacing: .03em; color: #9aa08f; padding: 2px 0; }
.gc-cal__day {
  height: 30px; border: 0; background: transparent; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: .8rem; color: #2b2b28; display: flex; align-items: center; justify-content: center;
}
.gc-cal__day:hover:not(:disabled) { background: #eef0e8; }
.gc-cal__day:disabled { color: #cdd0c4; cursor: default; }
.gc-cal__day.selected { background: var(--c-accent); color: var(--c-primary); font-weight: 700; }
#gcScheduleBlock[hidden], #gcSendDateField[hidden] { display: none; }
.gc-when-row[hidden] { display: none; }
.gc-when-row #gcWhenText { color: var(--c-accent); font-weight: 600; text-align: right; }

/* Messaggio di errore di validazione del modulo Gift Card */
.gc-form-error {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 10px;
  background: rgba(255, 120, 120, .16); color: #ffd7d7;
  font-size: .88rem; line-height: 1.4;
  display: flex; gap: 8px; align-items: flex-start;
}
.gc-form-error::before { content: "\26A0\FE0F"; flex: none; }
.gc-form-error[hidden] { display: none; }

/* ---------- WhatsApp icon (official glyph, inherits text colour) ---------- */
.ic-wa { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- 13. Floating WhatsApp button ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.4); transition: var(--transition);
}
.wa-float .ic-wa { width: 30px; height: 30px; }
.wa-float:hover { transform: scale(1.08); }

/* ---------- 13b. "Chiama ora" modal (desktop) ---------- */
.call-modal[hidden] { display: none; }
.call-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.call-modal__overlay { position: absolute; inset: 0; background: rgba(30, 42, 15, .55); backdrop-filter: blur(3px); }
.call-modal__card { position: relative; background: var(--c-white); border-radius: var(--radius); max-width: 480px; width: 100%; padding: 34px; box-shadow: var(--shadow); animation: cmIn .3s ease; }
@keyframes cmIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.call-modal__close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer; color: var(--c-muted); }
.call-modal__close:hover { color: var(--c-primary); }
.call-modal__card h3 { font-size: 1.8rem; }
.call-modal__intro { color: var(--c-muted); font-size: .95rem; }
/* Two variants: phone (action buttons) vs desktop (numbers + QR).
   JS adds .is-phone / .is-desktop to #callModal. Default = desktop. */
.call-modal__phone { display: none; flex-direction: column; gap: 10px; margin-top: 18px; }
.call-modal__phone .btn { width: 100%; justify-content: center; }
.call-modal.is-phone .call-modal__phone { display: flex; }
.call-modal.is-phone .call-modal__desktop { display: none; }
.call-modal__list { list-style: none; margin: 18px 0; padding: 0; }
.call-modal__list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--c-line); }
.call-modal__list .ico { font-size: 1.15rem; width: 26px; text-align: center; flex: none; }
.call-modal__list a { font-weight: 600; color: var(--c-primary); font-size: 1.05rem; }
.call-modal__list small { margin-left: auto; color: var(--c-muted); }
.call-modal__wa { display: flex; gap: 16px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.call-modal__wa img { border-radius: 10px; flex: none; width: 150px; height: 150px; }
.call-modal__wa b { color: var(--c-primary); display: block; margin-bottom: 4px; font-size: 1.05rem; }
.call-modal__wa p { font-size: .86rem; color: var(--c-muted); margin: 0 0 10px; }
@media (max-width: 480px) { .call-modal__wa { flex-direction: column; text-align: center; } }

/* ---------- 14. Footer ---------- */
.site-footer { background: var(--c-primary); color: rgba(255,255,255,.78); padding: 60px 0 30px; }
/* minmax(0, …): senza lo zero le colonne non possono scendere sotto la
   larghezza minima del contenuto e il footer sborda quando i caratteri di
   sistema sono ingranditi. */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-bottom: 40px; }
.site-footer h4 { color: var(--c-white); font-size: 1.3rem; margin-bottom: 16px; }
.site-footer a:hover { color: var(--c-accent); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-social { display: flex; gap: 12px; margin-top: 14px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.footer-social a:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary); }
.footer-social svg.ic-social { display: block; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-top: 22px; font-size: .82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
/* Schermi molto stretti (o caratteri di sistema molto grandi): footer in
   colonna unica, così le voci restano allineate e leggibili. */
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* Selettore lingua (aggiunto via JS in fondo al footer) */
.lang-switch { display: flex; gap: 6px; margin: 18px auto 0; justify-content: center; width: 100%; }
.lang-switch__btn {
  font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .04em;
  color: rgba(255,255,255,.8); background: transparent;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; transition: var(--transition);
}
.lang-switch__btn:hover { border-color: var(--c-accent); color: var(--c-white); }
.lang-switch__btn.active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary); cursor: default; }

/* Overlay scuro dietro al menu mobile + blocco scroll pagina.
   z-index 40: sotto l'header (z 50) e il drawer (z 60), ma sopra il
   contenuto della pagina — così il menu resta cliccabile e in primo piano. */
.nav__overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(30, 36, 20, .5);
  opacity: 0; visibility: hidden; transition: opacity .35s ease;
}
.nav__overlay.show { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

/* Selettore lingua dentro il menu mobile (drawer) */
.nav__lang { list-style: none; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--c-line); border-bottom: 0 !important; }
.nav__lang .lang-switch--nav { justify-content: flex-start; gap: 8px; margin: 0; width: auto; }
.lang-switch--nav .lang-switch__btn { color: var(--c-primary); border-color: var(--c-line); background: transparent; }
.lang-switch--nav .lang-switch__btn.active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary); }
@media (min-width: 901px) { .nav__lang { display: none; } .nav__overlay { display: none; } }

/* ---------- 15. Responsive ---------- */
@media (max-width: 900px) {
  .nav__links {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(82vw, 340px);
    height: 100vh; height: 100dvh;               /* piena altezza, anche con barra indirizzi mobile */
    background: var(--c-cream);                   /* sfondo pieno opaco */
    z-index: 60;                                  /* sopra la barra header e l'overlay */
    flex-direction: column; align-items: stretch;
    padding: 88px 28px calc(28px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform var(--transition);
    box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .55);
  }
  .nav__links li { width: 100%; }
  .nav__links a:not(.btn) { display: block; padding: 12px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--c-line); }
  .nav__links a:not(.btn)::after { display: none; }  /* niente underline animato nel drawer */
  .nav__links .nav__cta { margin-top: 12px; }
  .nav__links .nav__cta .btn { display: block; text-align: center; }
  .nav__links.open { transform: translateX(0); }
  .nav__toggle { display: block; z-index: 65; position: relative; }
  /* CTA a comparsa accanto al menu hamburger */
  .header-cta { margin-left: 0; margin-right: 12px; padding: 8px 14px; font-size: .85rem; }
  .about, .giftcard__inner, .contact { grid-template-columns: minmax(0, 1fr); }
  .about__img { order: -1; max-width: 420px; }
  .gallery { columns: 2; }
  .contact__map { min-height: 300px; }
}
@media (max-width: 560px) {
  .gallery { columns: 2; column-gap: 10px; }
  .gallery img { margin-bottom: 10px; border-radius: 8px; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  /* Pulsanti hero pagine servizio: impilati a tutta larghezza, ben distribuiti */
  .svc-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .svc-actions .btn { width: 100%; justify-content: center; }
  /* Variante 3 pulsanti (Icoone): due affiancati + uno lungo sotto */
  .svc-actions--tri { flex-direction: row; flex-wrap: wrap; }
  .svc-actions--tri .btn { width: auto; flex: 1 1 45%; min-width: 0; }
  .svc-actions--tri .btn:first-child { order: 2; flex-basis: 100%; }
  /* Footer compatto: brand a tutta larghezza, poi Servizi e Contatti affiancati */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

/* ============================================================
   16. Override mobile compatti (in fondo per avere la precedenza)
   ============================================================ */
@media (max-width: 600px) {
  /* Recensioni compatte */
  .reviews-top { margin-bottom: 20px; }
  .reviews-top .score { font-size: 2.6rem; }
  .reviews-top .stars { font-size: 1.1rem; }
  .reviews-top p { font-size: .86rem; }
  .reviews-grid { gap: 12px; }
  .review-card { padding: 15px 17px; }
  .review-card p { font-size: .9rem; }
  .review-card .stars { margin-bottom: 6px; }
  .review-card .author { margin-top: 8px; }

  /* "Vieni a trovarci" molto più compatto */
  #contatti { padding: clamp(34px, 7vw, 56px) 0; }
  #contatti .section-head { margin-bottom: 22px; }
  .contact__info { padding: 20px 18px; }
  .contact__info h2 { font-size: 1.4rem; margin-bottom: 4px; }
  .contact__list { margin: 12px 0; }
  .contact__list li { padding: 7px 0; }
  .contact__list span { font-size: .88rem; }
  .contact__list .ico { font-size: 1rem; width: 20px; }
  .contact__info b[style] { font-size: 1.15rem !important; margin: 4px 0 2px !important; }
  .hours li { padding: 2px 0; font-size: .85rem; }
  .contact__info .btn { padding: .7rem 1.2rem; }
  .contact__map { min-height: 190px; }
}

/* ============================================================
   17. Rifiniture UX (tema chiaro forzato, tap mobile, gift card)
   ============================================================ */

/* Il sito supporta chiaro E scuro: fornendo un nostro tema scuro (sez. 18)
   evitiamo che i browser applichino il loro filtro "force dark" automatico. */
:root { color-scheme: light dark; }

/* Niente riquadro blu al tocco su mobile + piccolo feedback "press" */
* { -webkit-tap-highlight-color: transparent; }
.btn:active,
.gc-tab:active, .gc-cat:active, .gc-treat:active,
.gc-amounts button:active, .lang-switch__btn:active,
.call-modal__phone .btn:active, .svc-back:active, .cat-nav a:active,
.nav__toggle:active {
  transform: scale(.96);
}

/* Gift card: evita il "blowout" della griglia su mobile (il contenuto
   usciva dai bordi e veniva tagliato da overflow:hidden). */
@media (max-width: 900px) {
  .giftcard__inner, .gc-config { grid-template-columns: minmax(0, 1fr); }
  .giftcard__inner > * { min-width: 0; }
  /* Anteprima del biglietto (in fondo al configuratore) più piccola e
     centrata, come il mockup in cima alla pagina — non a tutta larghezza. */
  .gc-config .gc-preview { width: 100%; max-width: 280px; margin: 6px auto 0; }
  /* Anche il mockup in cima alla landing gift card resta contenuto */
  .gc-hero-visual .giftcard__visual,
  .gc-hero-visual .gc-cardframe { width: 100%; max-width: 280px; margin-inline: auto; }
}

/* Gift card più compatta e leggibile su schermi piccoli */
@media (max-width: 600px) {
  .giftcard__inner { padding: 24px 18px; }
  .giftcard h2 { font-size: 1.55rem; }
  /* Contenuti del biglietto più piccoli, così stanno nel rapporto 16/10 e la
     card resta "a forma di card" anche alla larghezza ridotta del mobile. */
  .giftcard__visual { padding: 16px 18px; }
  .giftcard__visual .gc-amount { font-size: 1.55rem; }
  .giftcard__visual .gc-logo { height: 42px; }
  .giftcard__visual .gc-label { font-size: .6rem; letter-spacing: .18em; }
  .gc-tabs { gap: 6px; }
  .gc-tab { font-size: .86rem; padding: .55rem .5rem; }
  .gc-amounts { gap: 8px; margin: 14px 0 18px; }
  .gc-amounts button { font-size: .92rem; padding: .55rem .9rem; }
  .gc-cat { font-size: .82rem; padding: .45rem .8rem; }
  .gc-treat { padding: .65rem .8rem; }
  .gc-treat__name { font-size: .9rem; }
  .gc-treat__price { font-size: 1rem; }
  .gc-delivery__opt { font-size: .88rem; padding: 10px 11px; }
  /* Riepilogo/carrello più compatto: font ridotti così nomi e prezzi non
     escono dal riquadro e i titoli non vanno a capo parola per parola. */
  .gc-summary { padding: 14px 15px; }
  .gc-summary h3 { font-size: 1rem; }
  #gcSummaryLabel, .gc-cart__name { font-size: .84rem; line-height: 1.3; }
  .gc-cart__line { font-size: .88rem; }
  .gc-summary__row #gcSummaryTotal, .gc-cart-total #gcCartTotal { font-size: 1.25rem; }
}

/* ============================================================
   Anteprima_Mobile: card grande sopra le miniature
   Attiva SOLO su telefono (<= 600px). Fuori dal breakpoint non esiste:
   0 px di ingombro, nessun contributo all'altezza, nessuna tabulazione.
   Serve a mostrare bene il design nel momento della scelta: sta nel flusso
   normale del documento, subito sopra le miniature, e scorre con la pagina
   come qualsiasi altro elemento (nessun aggancio, nessuno sticky).
   Usa la classe dedicata .gc-mpreview, selezionata dalla sezione 5b di
   main.js insieme alle altre card: partecipa quindi all'effetto carta 3D
   (tilt + riflesso), guidato dallo scorrimento sul ramo touch.
   ============================================================ */
.gc-mpreview { display: none; }

/* Indicatore di caricamento: visibile solo quando il JS aggiunge .is-loading */
.gc-mpreview__spin { display: none; position: absolute; inset: 0; }
.gc-mpreview.is-loading .gc-mpreview__spin { display: block; }
.gc-mpreview__spin::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 3px solid rgba(255,255,255,.45);
  border-top-color: var(--c-white);
  border-radius: 50%;
  animation: gcSpin 1s linear infinite;
}
@keyframes gcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gc-mpreview__spin::after { animation: none; opacity: .8; }
}

@media (max-width: 600px) {
  .gc-mpreview {
    --gc-mp-gap: 12px;   /* distanza dalle miniature: 8..24 px */
    display: block;
    /* Nessun position: la card sta nel flusso e scorre con la pagina.
       contain:paint la rende comunque il blocco contenitore dell'indicatore di
       caricamento (.gc-mpreview__spin, in posizione assoluta), che altrimenti
       si aggancerebbe a .giftcard (position:relative) coprendo l'intera
       sezione. Non ha effetti sul flusso né sulla posizione. */
    contain: paint;
    /* Larghezza indipendente dall'altezza del viewport: la card non deve più
       stare in schermo insieme a una fila di miniature, quindi basta la
       massima larghezza leggibile (280 px) limitata dalla colonna che la
       contiene. Su telefoni 320..600 px la colonna misura 240..520 px, quindi
       la card resta nell'intervallo 240..280 px e non sfora mai in
       orizzontale. */
    width: min(280px, 100%);
    max-width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0 auto var(--gc-mp-gap);
    border-radius: var(--radius);
    overflow: hidden;
    background: #c4ccc7;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  }

  /* Distanza deterministica anteprima -> miniature (12 px, non collassata) */
  #gcDesigns { margin-top: 0; }

  /* Una sola card ingrandita nel configuratore: la vecchia anteprima esce */
  .gc-config .gc-preview { display: none; }

  /* Focus da tastiera distinguibile dalla selezione (bordo accento verde) */
  .gc-design:focus-visible { outline: 3px solid var(--c-white); outline-offset: 2px; }
}

/* Modal "Contattaci": numeri di telefono su una sola riga anche su mobile */
.call-modal__phone .btn { white-space: nowrap; }
@media (max-width: 400px) {
  .call-modal__phone .btn { font-size: .86rem; padding-left: .6rem; padding-right: .6rem; }
}

/* Header semplificato della pagina checkout: statico (non fisso), niente
   drawer/hamburger — così il logo non si sovrappone al contenuto e il link
   "Torna" resta sempre visibile. */
.site-header--static { position: static; background: var(--c-cream); box-shadow: 0 1px 0 var(--c-line); }
.checkout-back { font-weight: 600; font-size: .92rem; color: var(--c-primary); white-space: nowrap; }
.checkout-back:hover { color: var(--c-primary-2); }

/* Carrello Gift Card su mobile: la riga va a capo così i prezzi non escono
   dal riquadro. Nome sulla prima riga, quantità + prezzo + rimuovi sotto. */
@media (max-width: 600px) {
  .gc-cart__item { flex-wrap: wrap; row-gap: 6px; }
  .gc-cart__name { flex: 1 1 100%; }
  .gc-cart__line { margin-left: auto; min-width: 0; }
  .gc-qty { gap: 6px; }
  .gc-qty__btn { width: 26px; height: 26px; }
  .gc-cart .gc-qty__input { width: 38px; }
}

/* ============================================================
   18. Tema scuro (dark mode di sistema / browser)
   Fornendo un tema scuro NOSTRO, Samsung Internet e Chrome usano questo
   invece del loro filtro automatico. Sfruttiamo le variabili dove possibile
   e correggiamo puntualmente i verdi-scuri usati come testo.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --c-cream:      #14160f;  /* sfondo pagina */
    --c-cream-2:    #191c13;  /* sfondo sezioni alternate */
    --c-ink:        #e8e6da;  /* testo principale */
    --c-muted:      #a6ab97;  /* testo attenuato */
    --c-line:       #333829;  /* bordi */
    --c-primary-2:  #9fc767;  /* accenti verdi di testo (più chiari) */
    --c-accent-soft:#3a4a22;  /* verde soft (bordi/sfondi tenui) */
    --shadow:       0 18px 40px -22px rgba(0,0,0,.7);
    --shadow-sm:    0 8px 22px -14px rgba(0,0,0,.65);
  }

  /* Superfici che erano bianche → scure */
  .service-card, .cat-card, .review-card, .svc-option, .svc-step,
  .contact, .checkout__pay, .call-modal__card,
  .svc-back, .cat-nav a { background: #1e2118; }

  /* Testi/titoli verde-scuro → verde chiaro, leggibili sul fondo scuro.
     (I titoli su fondo verde — .giftcard h2, .site-footer h4 — restano
     bianchi grazie alle regole più specifiche già presenti.) */
  h1, h2, h3, h4,
  .hero__content h1, .cat-card__body h4, .svc-option .txt h4, .svc-step h4,
  .contact__info h2, .reviews-top .score, .review-card .author,
  .svc-option .price, .pricelist .pl-price, .cat-card__foot b,
  .cat-nav a, .svc-back, .nav__links a, .contact__list b, .btn--ghost,
  .call-modal__list a, .call-modal__wa b, .svc-video__benefits li b,
  .lang-switch--nav .lang-switch__btn { color: #c3de95; }

  .btn--ghost { border-color: #52702e; }
  .btn--ghost:hover { background: var(--c-primary); color: #fff; }
  .nav__toggle span { background: #c3de95; }

  /* Header traslucido quando scrollato → scuro */
  .site-header.scrolled { background: rgba(18,20,13,.92); }

  /* Su DESKTOP in dark: la card resta argento chiaro (i browser desktop
     rispettano il nostro tema, quindi si vede bella e leggibile). Nessun
     cambio qui. Su MOBILE la gestiamo nel blocco qui sotto. */
}

/* Dark mode SOLO su mobile: qui i browser (es. Samsung Internet) applicano
   spesso un "force dark" che scurisce la card argento rendendo illeggibile il
   testo verde. Rendiamo quindi la card già scura con testo/logo chiari: uno
   sfondo scuro non viene peggiorato dal filtro e il testo resta visibile. */
@media (prefers-color-scheme: dark) and (max-width: 600px) {
  .giftcard__visual { background: #232a1b; border-color: rgba(255,255,255,.18); }
  .giftcard__visual .gc-amount { color: #ffffff; }
  .giftcard__visual .gc-label { color: rgba(255,255,255,.72); }
  .giftcard__visual .gc-logo { background-color: #eaf1dd; }
}