/* ==========================================================================
   §E36 — Template ospite "Naturale" (guest_template = green)
   Verde foresta, smeraldo e menta: la palette del sito di presentazione
   portata sull'app ospite.

   La palette NON è stata inventata qui. È quella di
   `consergio_site/src/app/globals.css`, che è già la versione *corretta per
   il contrasto* del mockup: il mockup usa #2fae7d come testo (2,81:1), chiude
   il gradiente d'azione su #1f8a63 (bianco a 4,31:1) e i metadati su #7a8b82
   (3,60:1). Qui valgono i valori corretti, non quelli del mockup — se un
   giorno si riallinea questo foglio al sito, si guarda `globals.css`.

   §E23 — stessa impostazione degli altri template: prima i token (che
   ritematizzano da soli tutta l'app ospite, perché application.css disegna con
   var(--c-*) / var(--sb-*)), poi solo le regole con colori letterali.

   A differenza di night/warm/utility questo template NON ha varianti di vista:
   rende la home di `classic` (`show.html.erb`). Da qui una conseguenza da
   ricordare: le regole `.gt-hero*` di `classic` in application.css sono scoped
   su [data-guest-template="classic"], quindi l'apertura va ridisegnata QUI o
   resta senza fondo. Vale anche per `.g-roombadge`, che la home di `classic`
   usa e che nessun altro tema tocca (i tre con variante usano .gt-hero__badge).
   ========================================================================== */

/* --- Font self-hosted (niente CDN: residenza dati UE, cfr. ADR-0005) -------
   Ubuntu non è variabile: un file per peso, come Inter e Sora, non un range
   come Archivo o Karla. Il sito usa una famiglia sola per tutto, e qui si fa
   lo stesso: --gt-display e --gt-sans puntano entrambi a Ubuntu, cambia il peso. */
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/Ubuntu-400-latin-ext-da0c3556.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;}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/Ubuntu-400-latin-9ba093ac.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;}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/Ubuntu-500-latin-ext-238ab552.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;}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/Ubuntu-500-latin-8a72e79b.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;}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/Ubuntu-700-latin-ext-2fe1d797.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;}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/Ubuntu-700-latin-1b338a77.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;}

/* --- Token ----------------------------------------------------------------
   La pagina è menta chiarissima e le card sono bianche: è la sezione "menta con
   card bianche" del sito. L'inverso (pagina bianca, card bianche) farebbe
   sparire le card, che nell'app ospite sono la struttura portante. */
.g-body[data-guest-template="green"] {
  --gt-bg: #F2F9F6;
  --gt-surface: #FFFFFF;
  --gt-surface-2: #EEF7F2;
  --gt-tint: #E9F6F0;
  --gt-accent: #0E5C45;
  --gt-accent-2: #0A3F30;
  /* Il verde chiaro regge il testo (3,85:1), lo smeraldo NO (2,81:1 su bianco):
     lo smeraldo entra solo nel gradiente di decoro e nei riempimenti. */
  --gt-accent-soft: #25936A;
  --gt-emerald: #2FAE7D;
  --gt-ink: #0E2A22;
  --gt-muted: #3D5449;
  --gt-muted-2: #5F7268;
  --gt-line: #EAF3EE;
  --gt-line-2: #DDEEE5;
  --gt-line-3: #C2E0D1;

  /* I gradienti del sito, con le tappe chiare tarate sul contrasto:
     · azione finisce a #177A57 perché ci sta sopra il bianco (5,31:1). Su
       #1F8A63, la tappa del mockup, il bianco sarebbe a 4,31:1;
     · decoro può arrivare allo smeraldo pieno: è decorazione, il testo che ci
       finisce sopra è bianco a corpo grande o non c'è;
     · hero non arriva al bianco, si ferma a #F2F9F6 — che è anche il fondo
       pagina, così la fascia sfuma nella pagina invece di saldarcisi. */
  --gt-grad-action: linear-gradient(90deg, #0E5C45, #177A57);
  --gt-grad-decor: linear-gradient(135deg, #0E5C45, #2FAE7D);
  --gt-grad-hero: linear-gradient(160deg, #DCEFE5 0%, #E9F6F0 55%, #F2F9F6 100%);

  --gt-sans: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --gt-display: var(--gt-sans);

  /* rimappa i token legacy --c-* */
  --c-white: var(--gt-surface);
  --c-ink: var(--gt-ink);
  --c-ink-soft: var(--gt-muted);
  --c-azure-50: var(--gt-bg);
  --c-azure-100: var(--gt-line-2);
  --c-blue-900: var(--gt-ink);
  --c-blue-700: var(--gt-accent);
  --c-blue-500: var(--gt-accent);
  --c-blue-300: var(--gt-line-3);

  /* rimappa i token StayBell --sb-* */
  --sb-ink: var(--gt-ink);
  --sb-muted: var(--gt-muted);
  --sb-muted-2: var(--gt-muted-2);
  --sb-line: var(--gt-line-2);
  --sb-line-2: var(--gt-line);
  --sb-bg: var(--gt-bg);
  --sb-bg-2: var(--gt-tint);
  --sb-page: var(--gt-surface-2);
  --sb-chip: var(--gt-surface-2);
  --sb-chip-line: var(--gt-line-3);
  --sb-primary: var(--gt-accent);
  --sb-primary-2: var(--gt-accent-2);
  --sb-primary-300: var(--gt-line-3);
  /* `--sb-dark` non fa parte del remap degli altri temi perché i loro tre
     template lo evitano nelle viste. Qui la home è quella di `classic`, che lo
     usa per `.g-roombadge`: senza questa riga resterebbe indaco #0D0B33. */
  --sb-dark: var(--gt-ink);
  --sb-grad: var(--gt-grad-action);

  /* Le card del sito non hanno ombra a riposo. Qui non si azzera del tutto:
     su un fondo menta una card bianca senza stacco perde il bordo. */
  --sb-shadow: 0 2px 10px rgba(14, 60, 45, 0.06);
  --sb-shadow-h: 0 8px 24px rgba(14, 60, 45, 0.12);
  --sb-r-card: 18px;
  --sb-r-btn: 999px;
  --sb-r-pill: 999px;
  --sb-sans: var(--gt-sans);
  --sb-display: var(--gt-display);

  --radius: 18px;
  --radius-sm: 999px;
  --shadow: var(--sb-shadow);
  --font: var(--gt-sans);

  background: var(--gt-bg);
  color: var(--gt-ink);
  font-family: var(--gt-sans);
}

.g-body[data-guest-template="green"] .g-app { background: var(--gt-bg); position: relative; }
.g-body[data-guest-template="green"] .g-main { padding: 8px 20px 0; }
.g-body[data-guest-template="green"] h1,
.g-body[data-guest-template="green"] h2,
.g-body[data-guest-template="green"] h3 {
  font-family: var(--gt-display); font-weight: 700; letter-spacing: -.01em;
}

/* --- Testata ---------------------------------------------------------------
   Tinta piatta e non gradiente: il gradiente d'azione qui vuol dire "questo si
   tocca" (bottoni, CTA), e una barra che non è un bottone non deve indossarlo.
   Il valore combacia con GUEST_THEME_COLORS["green"], cioè con la barra di
   sistema: se cambia uno cambia l'altro. */
.g-body[data-guest-template="green"] .g-topbar {
  background: var(--gt-accent); color: #fff; box-shadow: none; backdrop-filter: none;
}
/* Con la copertina la testata galleggia sulla foto, come su `classic`: è la
   stessa home, quindi lo stesso comportamento. */
.g-body[data-guest-template="green"][data-guest-hero="cover"] .g-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  background: transparent;
}
.g-body[data-guest-template="green"] .g-topbar__brand { color: #fff; font-weight: 700; }
.g-body[data-guest-template="green"] .g-topbar__plate {
  background: #fff; box-shadow: 0 4px 12px rgba(14, 42, 34, .25);
}
.g-body[data-guest-template="green"] .g-topbar__room,
.g-body[data-guest-template="green"] .g-lang__current {
  background: rgba(255, 255, 255, .18); color: #fff; border: none;
}
.g-body[data-guest-template="green"] .g-lang__current .g-lang__code { color: inherit; }
.g-body[data-guest-template="green"] .g-lang__menu {
  background: var(--gt-surface); border-color: var(--gt-line-2);
}
.g-body[data-guest-template="green"] .g-lang__code { color: var(--gt-accent); }
.g-body[data-guest-template="green"] .g-lang__item--active { color: var(--gt-accent); font-weight: 700; }

/* --- Apertura della home ---------------------------------------------------
   `.gt-hero*` in application.css è scoped su `classic`: qui va riscritto tutto,
   altrimenti la fascia resta senza fondo e il titolo senza colore. */
.g-body[data-guest-template="green"] .gt-hero--cover {
  position: relative; height: 260px; overflow: hidden; background: var(--gt-surface-2);
}
.g-body[data-guest-template="green"] .gt-hero--cover .gt-hero__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Lo scrim di `classic` è in rgba(13,11,51,…), cioè indaco: su una foto sotto
   una testata verde si vedrebbe la differenza di tinta. Qui è verde notte. */
.g-body[data-guest-template="green"] .gt-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 42, 34, .60) 0%, rgba(14, 42, 34, .06) 26%,
    rgba(14, 42, 34, .80) 58%, rgba(14, 42, 34, .97) 100%);
}
.g-body[data-guest-template="green"] .gt-hero--cover .gt-hero__body {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
}
.g-body[data-guest-template="green"] .gt-hero--cover .gt-hero__title { color: #fff; }
.g-body[data-guest-template="green"] .gt-hero--cover .gt-hero__sub { color: rgba(255, 255, 255, .85); }

/* Senza copertina la fascia è il gradiente menta del sito e il testo torna
   scuro: è l'unico punto in cui questo tema si stacca da `classic`, che qui
   continua invece il blu della testata. */
.g-body[data-guest-template="green"] .gt-hero--plain {
  background: var(--gt-grad-hero); padding: 18px 20px 26px;
}
.g-body[data-guest-template="green"] .gt-hero__title {
  margin: 0; font-family: var(--gt-display); font-weight: 700;
  font-size: 1.7rem; line-height: 1.15; letter-spacing: -.01em; color: var(--gt-ink);
}
.g-body[data-guest-template="green"] .gt-hero__sub {
  margin: 6px 0 0; line-height: 1.5; color: var(--gt-muted);
}
/* Sulla foto il badge camera ha bisogno del proprio fondo per restare
   leggibile qualunque cosa ci sia sotto. */
.g-body[data-guest-template="green"] .gt-hero__badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 10px; padding: 6px 13px; border-radius: 999px;
  background: rgba(14, 42, 34, .62); backdrop-filter: blur(6px);
  color: #fff; font-size: 0.8rem; font-weight: 700;
}
/* Il badge camera della home senza copertina: è la pillola bianca dell'hero
   del sito, non la targhetta scura di `classic`, che sulla menta peserebbe. */
.g-body[data-guest-template="green"] .g-roombadge {
  background: var(--gt-surface); border: 1px solid var(--gt-line-3);
  color: var(--gt-accent); box-shadow: none; border-radius: 999px;
  padding: 7px 16px; font-weight: 500;
}

/* --- Card assistente ------------------------------------------------------- */
.g-body[data-guest-template="green"] .g-assistant {
  background: var(--gt-surface); border: 1px solid var(--gt-line-2); box-shadow: none;
}
.g-body[data-guest-template="green"] .g-assistant__icon {
  background: var(--gt-grad-decor); color: #fff; border-radius: 12px;
}
/* Il marchio ConSergio è scuro: sul quadrato in gradiente sparirebbe. */
.g-body[data-guest-template="green"] .g-assistant__icon--brand {
  background: var(--gt-surface); border: 1px solid var(--gt-line-3);
}
/* Il COLORE va ridichiarato, non solo il peso: `a.g-assistant .g-assistant__title`
   tinge di bianco il titolo perché su `classic` la card è un gradiente indigo.
   Qui la card è bianca, e senza questa riga il titolo era bianco su bianco —
   invisibile, sulla prima azione della home. Il sottotitolo si salvava solo
   perché il tema lo ridichiarava già. */
.g-body[data-guest-template="green"] .g-assistant__title {
  font-weight: 700; color: var(--gt-ink);
}
.g-body[data-guest-template="green"] .g-assistant__sub { color: var(--gt-muted); }

/* --- Sezioni --------------------------------------------------------------- */
.g-body[data-guest-template="green"] .g-section__title {
  font-family: var(--gt-display); font-weight: 700; font-size: 1.25rem; color: var(--gt-ink);
}
.g-body[data-guest-template="green"] .g-section__count,
.g-body[data-guest-template="green"] .g-link { color: var(--gt-accent); font-weight: 500; }

/* --- Catalogo -------------------------------------------------------------- */
.g-body[data-guest-template="green"] .g-service {
  border: 1px solid var(--gt-line-2); border-radius: 18px;
  background: var(--gt-surface); box-shadow: none;
}
.g-body[data-guest-template="green"] .g-service:hover {
  border-color: var(--gt-line-3); box-shadow: var(--sb-shadow-h); transform: translateY(-2px);
}
.g-body[data-guest-template="green"] .g-service__media { background: var(--gt-surface-2); }
.g-body[data-guest-template="green"] .g-service__cat {
  color: var(--gt-accent); font-weight: 500; letter-spacing: .08em;
}
.g-body[data-guest-template="green"] .g-service__name { font-weight: 700; }
.g-body[data-guest-template="green"] .g-service__hours { color: var(--gt-muted); }
.g-body[data-guest-template="green"] .g-service__price { color: var(--gt-ink); font-weight: 700; }
.g-body[data-guest-template="green"] .g-service__placeholder { color: var(--gt-accent-soft); }
/* Stanno sopra la foto: la targhetta bianca si legge su qualsiasi immagine. */
.g-body[data-guest-template="green"] .g-badge--featured {
  background: rgba(255, 255, 255, .94); color: var(--gt-accent);
}
.g-body[data-guest-template="green"] .g-badge--popular {
  background: var(--gt-surface-2); color: var(--gt-accent);
}

.g-body[data-guest-template="green"] .g-cat {
  border: 1px solid var(--gt-line-2); border-radius: 18px;
  background: var(--gt-surface); box-shadow: none;
}
.g-body[data-guest-template="green"] .g-cat:hover {
  border-color: var(--gt-line-3); box-shadow: var(--sb-shadow-h); transform: translateY(-2px);
}
.g-body[data-guest-template="green"] .g-cat__media { background: var(--gt-tint); }
.g-body[data-guest-template="green"] .g-cat__name { font-weight: 700; }
.g-body[data-guest-template="green"] .g-cat__desc { color: var(--gt-muted); }
.g-body[data-guest-template="green"] .g-cat__count { color: var(--gt-accent); font-weight: 500; }

/* --- CTA, liste, dettaglio -------------------------------------------------
   Le superfici a card dell'app ospite: in application.css condividono UNA
   regola con `background: #fff` letterale, quindi vanno ridipinte tutte
   insieme — Wi-Fi e Contatti compresi (cfr. ADR-0018, Conseguenze). */
.g-body[data-guest-template="green"] .g-cta,
.g-body[data-guest-template="green"] .g-list__item,
.g-body[data-guest-template="green"] .g-faq,
.g-body[data-guest-template="green"] .g-facts--card,
.g-body[data-guest-template="green"] .g-form-card,
.g-body[data-guest-template="green"] .g-recap,
.g-body[data-guest-template="green"] .g-wifi,
.g-body[data-guest-template="green"] .g-contacts {
  background: var(--gt-surface); border: 1px solid var(--gt-line-2);
  border-radius: 18px; box-shadow: none;
}
.g-body[data-guest-template="green"] .chip {
  background: var(--gt-surface-2); border-color: var(--gt-line-2); color: var(--gt-accent);
  font-weight: 500;
}
.g-body[data-guest-template="green"] .chip:hover { background: var(--gt-tint); border-color: var(--gt-line-3); }
.g-body[data-guest-template="green"] .g-empty {
  background: var(--gt-surface-2); border: 1px dashed var(--gt-line-3); color: var(--gt-muted);
}
/* Il quadrato icona del sito: gradiente di decoro, raggio 12, glifo bianco. */
.g-body[data-guest-template="green"] .g-cta__icon,
.g-body[data-guest-template="green"] .g-file__icon,
.g-body[data-guest-template="green"] .g-contact__icon {
  background: var(--gt-grad-decor); color: #fff; border-radius: 12px;
}
.g-body[data-guest-template="green"] .g-cta__title { font-weight: 700; }
.g-body[data-guest-template="green"] .g-cta__arrow { color: var(--gt-accent); }
.g-body[data-guest-template="green"] .g-detail__title,
.g-body[data-guest-template="green"] .g-page__title,
.g-body[data-guest-template="green"] .g-chat__title {
  font-family: var(--gt-display); font-weight: 700; letter-spacing: -.01em; color: var(--gt-ink);
}
.g-body[data-guest-template="green"] .g-detail__cat { color: var(--gt-accent); }
.g-body[data-guest-template="green"] .g-detail__media,
.g-body[data-guest-template="green"] .g-cat-head__media { background: var(--gt-surface-2); }
.g-body[data-guest-template="green"] .g-back { color: var(--gt-accent); font-weight: 500; }

/* --- Campi e bottoni -------------------------------------------------------
   I bottoni del sito sono pillole: il raggio arriva dal token --sb-r-btn. */
.g-body[data-guest-template="green"] .form__input,
.g-body[data-guest-template="green"] .g-chat__input {
  background-color: var(--gt-surface); border-color: var(--gt-line-3);
  color: var(--gt-ink); border-radius: 14px;
}
.g-body[data-guest-template="green"] .form__input::placeholder,
.g-body[data-guest-template="green"] .g-chat__input::placeholder { color: var(--gt-muted-2); }
.g-body[data-guest-template="green"] .form__input:focus,
.g-body[data-guest-template="green"] .g-chat__input:focus {
  outline: none; border-color: var(--gt-accent);
  box-shadow: 0 0 0 3px rgba(14, 92, 69, .18);
}
/* Il chevron di serie è disegnato in grigio scuro: qui va in tinta. */
.g-body[data-guest-template="green"] select.form__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230E5C45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.g-body[data-guest-template="green"] .btn--primary {
  background: var(--gt-grad-action); color: #fff; border-color: transparent;
  box-shadow: none; font-weight: 500;
}
.g-body[data-guest-template="green"] .btn--primary:hover { filter: brightness(1.12); background: var(--gt-grad-action); }
.g-body[data-guest-template="green"] .btn--ghost {
  background: var(--gt-surface); border-color: var(--gt-line-3); color: var(--gt-accent); font-weight: 500;
}
.g-body[data-guest-template="green"] .btn--ghost:hover { border-color: var(--gt-accent); }
.g-body[data-guest-template="green"] .g-stepper__btn {
  background: var(--gt-surface); border-color: var(--gt-line-3); color: var(--gt-accent);
  border-radius: 999px;
}
.g-body[data-guest-template="green"] .g-stepper__btn:hover:not(:disabled) { background: var(--gt-surface-2); }

/* --- Richieste e chat ------------------------------------------------------
   Il mockup ha esattamente questo componente: bolla ospite in menta con
   l'angolo vivo in basso a destra, bolla dell'assistente in gradiente. Il
   gradiente delle bolle è quello d'azione e NON quello del mockup, che finiva
   su #1F8A63: il testo bianco ci starebbe a 4,31:1. */
.g-body[data-guest-template="green"] .g-req,
.g-body[data-guest-template="green"] .g-offer {
  background: var(--gt-surface); border-color: var(--gt-line-2); border-radius: 18px;
}
.g-body[data-guest-template="green"] .g-chat__log { background: var(--gt-bg); }
.g-body[data-guest-template="green"] .g-msg__bubble {
  background: var(--gt-grad-action); color: #fff;
}
.g-body[data-guest-template="green"] .g-msg__bubble a { color: #fff; }
.g-body[data-guest-template="green"] .g-msg--user .g-msg__bubble {
  background: var(--gt-surface-2); background-image: none; color: var(--gt-ink);
}
.g-body[data-guest-template="green"] .g-msg--user .g-msg__bubble a { color: var(--gt-accent); }
.g-body[data-guest-template="green"] .g-msg__meta,
.g-body[data-guest-template="green"] .g-req-note__time { color: var(--gt-muted-2); }
.g-body[data-guest-template="green"] .g-offer__cta { background: var(--gt-grad-action); color: #fff; }

/* Gli stati non si affidano al colore (c'è l'etichetta e c'è `.g-status__dot`),
   ma su un tema verde il verde di marca e il verde di "fatto" si somiglierebbero
   troppo. La rampa qui è per PESO oltre che per tinta: menta pallida → ambra →
   verde pieno. Le pillole sono quelle della bacheca del mockup. */
.g-body[data-guest-template="green"] .g-status--received {
  background: var(--gt-surface-2); color: var(--gt-accent);
}
.g-body[data-guest-template="green"] .g-status--in_progress {
  background: #FFF5E0; color: #8A6100;
}
.g-body[data-guest-template="green"] .g-status--done {
  background: var(--gt-accent); color: #fff;
}
.g-body[data-guest-template="green"] .g-confirm__check {
  background: var(--gt-surface-2); color: var(--gt-accent);
}
/* `--c-ok` resta il verde semantico #46b450 e sulla menta starebbe a ~3:1.
   Qui il messaggio di conferma prende la tinta del tema, che ci sta a 7,97:1. */
.g-body[data-guest-template="green"] .g-flash--notice {
  background: var(--gt-surface-2); color: var(--gt-accent);
}

/* --- Navigazione di sezione ------------------------------------------------ */
.g-body[data-guest-template="green"] .g-sectionnav__item {
  background: var(--gt-surface); border-color: var(--gt-line-2); color: var(--gt-muted);
  font-weight: 500;
}
.g-body[data-guest-template="green"] .g-sectionnav__item:hover {
  border-color: var(--gt-line-3); color: var(--gt-ink);
}
.g-body[data-guest-template="green"] .g-sectionnav__item--active {
  background: var(--gt-accent); border-color: var(--gt-accent); color: #fff; font-weight: 700;
}
.g-body[data-guest-template="green"] .g-topbar__action--active {
  background: #fff; color: var(--gt-accent);
}
/* Il contatore è arancione di serie (`--sb-accent-strong`): fuori tema. */
.g-body[data-guest-template="green"] .g-navbadge { background: var(--gt-accent); color: #fff; }
.g-body[data-guest-template="green"] .g-sectionnav__item--active .g-navbadge {
  background: #fff; color: var(--gt-accent);
}

/* --- Piè di pagina --------------------------------------------------------- */
.g-body[data-guest-template="green"] .g-footer { border-top-color: var(--gt-line-2); }
.g-body[data-guest-template="green"] .g-footer__name { font-weight: 700; color: var(--gt-ink); }
.g-body[data-guest-template="green"] .g-footer__line { color: var(--gt-muted); }
.g-body[data-guest-template="green"] .g-footer__link { color: var(--gt-accent); }
.g-body[data-guest-template="green"] .g-footer__note { color: var(--gt-muted-2); }

/* --- Immagini di ripiego ---------------------------------------------------
   Le default sono disegnate nell'indaco storico. Al loro posto le righe a 45°
   del mockup, che per questo placeholder ha già i suoi due verdi. */
.g-body[data-guest-template="green"] .g-img--placeholder { display: none; }
.g-body[data-guest-template="green"] .g-service__media,
.g-body[data-guest-template="green"] .g-cat-head__media,
.g-body[data-guest-template="green"] .g-detail__media,
.g-body[data-guest-template="green"] .g-cat__media {
  background: repeating-linear-gradient(45deg, #DCEFE5 0 12px, #CFE8DC 12px 24px);
}

/* --- Scheda orari/prezzo, riepilogo e modulo di richiesta ------------------
   Qui NON serve la correzione di contrasto che `warm` ha dovuto fare sui
   metadati: `--gt-muted` sta a 8,10:1 sul bianco e `--gt-muted-2` a 5,21:1,
   entrambi sopra AA per il testo normale. */
.g-body[data-guest-template="green"] .g-fact + .g-fact { border-top-color: var(--gt-line); }
.g-body[data-guest-template="green"] .g-fact__icon,
.g-body[data-guest-template="green"] .g-recap__cat { color: var(--gt-accent); }
.g-body[data-guest-template="green"] .g-fact__label,
.g-body[data-guest-template="green"] .g-fact__key,
.g-body[data-guest-template="green"] .g-fact__note { color: var(--gt-muted); }
.g-body[data-guest-template="green"] .g-fact__value,
.g-body[data-guest-template="green"] .g-total { color: var(--gt-ink); font-weight: 700; }
.g-body[data-guest-template="green"] .g-recap__name { font-weight: 700; color: var(--gt-ink); }