/* ==========================================================================
   §E23 — Template ospite "Accogliente" (guest_template = warm)
   Crema e terracotta, riquadri grandi, "In evidenza" come carosello
   orizzontale.

   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 e le strutture nuove.
   ========================================================================== */

/* --- Font self-hosted (niente CDN: residenza dati UE, cfr. ADR-0005) ------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/BricolageGrotesque-400-800-latin-ext-2186fff6.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:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/BricolageGrotesque-400-800-latin-78692770.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:'Karla';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/Karla-400-700-latin-ext-6d91f09c.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:'Karla';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/Karla-400-700-latin-70d3e079.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:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/JetBrainsMono-400-700-latin-ext-b0c48b7a.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:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/JetBrainsMono-400-700-latin-68dbce1c.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 ---------------------------------------------------------------- */
.g-body[data-guest-template="warm"] {
  --gt-bg: #FAF6EF;
  --gt-surface: #FFFFFF;
  --gt-surface-2: #EFE2D2;
  --gt-tint: #F0E7DA;
  --gt-accent: #C4552F;
  --gt-ink: #241F19;
  --gt-muted: rgba(36, 31, 25, 0.60);
  --gt-muted-2: rgba(36, 31, 25, 0.42);
  --gt-line: #E9DDCC;
  --gt-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --gt-sans: 'Karla', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --gt-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --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);
  --c-blue-900: var(--gt-ink);
  --c-blue-700: var(--gt-accent);
  --c-blue-500: var(--gt-accent);
  --c-blue-300: #D8B79A;

  --sb-ink: var(--gt-ink);
  --sb-muted: var(--gt-muted);
  --sb-muted-2: var(--gt-muted-2);
  --sb-line: var(--gt-line);
  --sb-line-2: var(--gt-tint);
  --sb-bg: var(--gt-bg);
  --sb-bg-2: var(--gt-tint);
  --sb-page: var(--gt-bg);
  --sb-chip: var(--gt-tint);
  --sb-chip-line: var(--gt-line);
  --sb-primary: var(--gt-accent);
  --sb-primary-2: #A5401F;
  --sb-primary-300: #E0A98F;
  --sb-grad: linear-gradient(135deg, #C4552F, #A5401F);
  --sb-shadow: 0 2px 10px rgba(36, 31, 25, 0.06);
  --sb-shadow-h: 0 6px 18px rgba(36, 31, 25, 0.12);
  --sb-r-card: 20px;
  --sb-r-btn: 999px;
  --sb-sans: var(--gt-sans);
  --sb-display: var(--gt-display);

  --radius: 20px;
  --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="warm"] .g-app { background: var(--gt-bg); }
.g-body[data-guest-template="warm"] h1,
.g-body[data-guest-template="warm"] h2,
.g-body[data-guest-template="warm"] h3 {
  font-family: var(--gt-display); font-weight: 800; letter-spacing: -.02em;
}

/* --- Topbar --------------------------------------------------------------- */
.g-body[data-guest-template="warm"] .g-topbar {
  background: transparent; box-shadow: none; backdrop-filter: none;
  color: var(--gt-ink); padding: 14px 18px;
}
.g-body[data-guest-template="warm"][data-guest-hero="cover"] .g-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
}
.g-body[data-guest-template="warm"] .g-app { position: relative; }
.g-body[data-guest-template="warm"] .g-topbar__brand {
  font-family: var(--gt-display); font-weight: 700; color: var(--gt-ink);
  padding: 6px 12px; border-radius: 999px; background: rgba(250, 246, 239, 0.9);
}
.g-body[data-guest-template="warm"] .g-topbar__plate { background: rgba(250, 246, 239, 0.9); box-shadow: none; }
.g-body[data-guest-template="warm"] .g-topbar__room { background: var(--gt-tint); color: var(--gt-ink); }
.g-body[data-guest-template="warm"] .g-topbar__action { color: var(--gt-ink); }
.g-body[data-guest-template="warm"] .g-lang__current {
  background: rgba(250, 246, 239, 0.9); border: none; color: var(--gt-ink); font-weight: 700;
}
.g-body[data-guest-template="warm"] .g-lang__current .g-lang__code { color: inherit; }
.g-body[data-guest-template="warm"] .g-lang__menu { background: var(--gt-surface); border-color: var(--gt-line); }
.g-body[data-guest-template="warm"] .g-lang__code { color: var(--gt-accent); }

/* --- Hero + biglietto della struttura -------------------------------------- */
/* L'apertura sta in `.g-app` (fuori da `.g-main`) per essere a tutta larghezza
   senza margini negativi: il padding orizzontale lo portano `.g-main` e i
   blocchi che non sono a tutta larghezza. */
.g-body[data-guest-template="warm"] .g-app {
  padding: 0 0 calc(24px + env(safe-area-inset-bottom));
}
.g-body[data-guest-template="warm"] .g-main { padding: 8px 18px 0; }
.g-body[data-guest-template="warm"] .g-flash { margin: 8px 18px 0; }

.g-body[data-guest-template="warm"] .gt-hero--cover {
  position: relative; height: 210px; overflow: hidden; background: #E9DDCC;
}
.g-body[data-guest-template="warm"] .gt-hero--cover .gt-hero__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Biglietto che scavalca la copertina: è il blocco che porta logo e nome. */
.g-body[data-guest-template="warm"] .gt-idcard {
  display: flex; align-items: center; gap: 12px;
  margin: -42px 18px 0; padding: 18px; border-radius: 22px;
  background: var(--gt-bg); box-shadow: 0 4px 20px rgba(36, 31, 25, 0.10);
  position: relative; z-index: 5;
}
.g-body[data-guest-template="warm"] .gt-idcard__logo {
  width: 52px; height: 52px; flex: none; border-radius: 14px; overflow: hidden;
  background: var(--gt-surface-2); display: grid; place-items: center;
  font-family: var(--gt-display); font-weight: 800; color: var(--gt-accent);
}
.g-body[data-guest-template="warm"] .gt-idcard__logo-img { max-width: 100%; max-height: 100%; }
.g-body[data-guest-template="warm"] .gt-idcard__name {
  margin: 0; font-family: var(--gt-display); font-weight: 800;
  font-size: 1.35rem; line-height: 1.1; letter-spacing: -.02em; color: var(--gt-ink);
}
.g-body[data-guest-template="warm"] .gt-idcard__sub { margin: 3px 0 0; font-size: 0.78rem; color: var(--gt-muted); }

.g-body[data-guest-template="warm"] .gt-hero--plain { padding: 8px 18px 0; }
/* §E23/UX — la targhetta (logo o monogramma) anche senza copertina: prima il
   logo caricato dalla struttura si vedeva solo sopra la foto. Le dimensioni le
   porta `.gt-idcard__logo`, qui serve solo staccarla da quello che segue. */
.g-body[data-guest-template="warm"] .gt-hero__mark { display: grid; margin-bottom: 12px; }
.g-body[data-guest-template="warm"] .gt-hero__title {
  margin: 0; font-family: var(--gt-display); font-weight: 800;
  font-size: 2.1rem; line-height: 1.05; letter-spacing: -.02em; color: var(--gt-ink);
}
.g-body[data-guest-template="warm"] .gt-hero__sub {
  margin: 10px 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--gt-muted);
}
.g-body[data-guest-template="warm"] .gt-hero__badge {
  display: inline-block; margin-bottom: 10px; padding: 6px 13px; border-radius: 999px;
  background: var(--gt-tint); color: var(--gt-ink); font-size: 0.72rem; font-weight: 700;
}
.g-body[data-guest-template="warm"] .gt-eyebrow {
  display: block; margin-bottom: 6px;
  font: 700 12px/1 var(--gt-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gt-accent);
}

/* --- Card assistente ------------------------------------------------------- */
.g-body[data-guest-template="warm"] .g-assistant {
  background: var(--gt-surface-2); border: none; border-radius: 22px; box-shadow: none;
}
.g-body[data-guest-template="warm"] .g-assistant__icon {
  background: var(--gt-accent); color: var(--gt-bg); border-radius: 14px;
  font-family: var(--gt-display); font-weight: 800;
}
.g-body[data-guest-template="warm"] .g-assistant__title { font-family: var(--gt-display); font-weight: 700; }
.g-body[data-guest-template="warm"] .g-assistant__sub { color: var(--gt-muted); }

/* --- Sezioni --------------------------------------------------------------- */
.g-body[data-guest-template="warm"] .g-section__title {
  font-family: var(--gt-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em;
}
.g-body[data-guest-template="warm"] .g-section__count,
.g-body[data-guest-template="warm"] .g-link { color: var(--gt-accent); font-weight: 700; font-size: 0.72rem; }

/* --- "In evidenza": carosello orizzontale ---------------------------------- */
/* Solo la home usa `--rail`: le pagine catalogo restano a griglia, dove
   l'ospite sta cercando e vuole vedere tutto insieme. */
.g-body[data-guest-template="warm"] .g-grid--rail {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -18px; padding: 4px 18px 10px; scrollbar-width: none;
}
.g-body[data-guest-template="warm"] .g-grid--rail::-webkit-scrollbar { display: none; }
.g-body[data-guest-template="warm"] .g-grid--rail > * { flex: 0 0 238px; scroll-snap-align: start; }
/* Le card del carosello si allineano all'altezza della più alta: senza altezza
   esplicita la foto assorbe lo spazio in più e ogni riquadro avrebbe
   un'immagine di misura diversa. */
.g-body[data-guest-template="warm"] .g-grid--rail .g-service__media {
  flex: 0 0 150px; height: 150px; aspect-ratio: auto;
}

.g-body[data-guest-template="warm"] .g-service {
  border: none; border-radius: 22px; background: var(--gt-surface);
  box-shadow: 0 2px 10px rgba(36, 31, 25, 0.06);
}
.g-body[data-guest-template="warm"] .g-service:hover { transform: translateY(-2px); }
.g-body[data-guest-template="warm"] .g-service__media {
  flex: 0 0 150px; height: 150px; aspect-ratio: auto; background: var(--gt-surface-2);
}
.g-body[data-guest-template="warm"] .g-service__body { padding: 14px; }
.g-body[data-guest-template="warm"] .g-service__cat {
  font-size: 0.62rem; font-weight: 700; letter-spacing: .1em; color: var(--gt-accent);
}
.g-body[data-guest-template="warm"] .g-service__name {
  font-family: var(--gt-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; margin: 5px 0 6px;
}
.g-body[data-guest-template="warm"] .g-service__hours { color: var(--gt-muted); }
.g-body[data-guest-template="warm"] .g-service__price {
  font-family: var(--gt-display); font-weight: 700; font-size: 0.95rem; color: var(--gt-ink);
}
.g-body[data-guest-template="warm"] .g-badge--featured { background: var(--gt-accent); color: #fff; }
.g-body[data-guest-template="warm"] .g-badge--popular { background: var(--gt-ink); color: var(--gt-bg); }
.g-body[data-guest-template="warm"] .g-service__placeholder { color: var(--gt-accent); }

/* --- Categorie: riquadri color terra --------------------------------------- */
.g-body[data-guest-template="warm"] .g-cat {
  border: none; border-radius: 20px; background: var(--gt-surface-2); box-shadow: none;
}
.g-body[data-guest-template="warm"] .g-cat:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-h); }
.g-body[data-guest-template="warm"] .g-cat__media {
  flex: 0 0 92px; height: 92px; aspect-ratio: auto; background: #E4D4BF;
}
.g-body[data-guest-template="warm"] .g-cat__body { padding: 14px; }
.g-body[data-guest-template="warm"] .g-cat__name { font-family: var(--gt-display); font-weight: 700; font-size: 0.95rem; }
.g-body[data-guest-template="warm"] .g-cat__desc { color: var(--gt-muted); }
.g-body[data-guest-template="warm"] .g-cat__count { color: var(--gt-accent); font-weight: 700; }

/* --- CTA, liste, dettaglio, form ------------------------------------------- */
/* Le superfici a card dell'app ospite: in application.css condividono una
   regola sola con `background: #fff` letterale, quindi vanno ridipinte tutte
   insieme — Wi-Fi e Contatti compresi. */
.g-body[data-guest-template="warm"] .g-cta,
.g-body[data-guest-template="warm"] .g-list__item,
.g-body[data-guest-template="warm"] .g-faq,
.g-body[data-guest-template="warm"] .g-facts--card,
.g-body[data-guest-template="warm"] .g-form-card,
.g-body[data-guest-template="warm"] .g-recap,
.g-body[data-guest-template="warm"] .g-wifi,
.g-body[data-guest-template="warm"] .g-contacts {
  background: var(--gt-surface); border: none; border-radius: 20px;
  box-shadow: 0 2px 10px rgba(36, 31, 25, 0.05);
}
.g-body[data-guest-template="warm"] .chip {
  background: var(--gt-tint); border-color: var(--gt-line); color: var(--gt-accent);
}
.g-body[data-guest-template="warm"] .chip:hover { background: var(--gt-surface-2); }
.g-body[data-guest-template="warm"] .g-empty {
  background: var(--gt-surface-2); border: 1px dashed var(--gt-line); color: var(--gt-muted);
}
.g-body[data-guest-template="warm"] .g-cta__icon { background: var(--gt-tint); color: var(--gt-accent); border-radius: 14px; }
.g-body[data-guest-template="warm"] .g-cta__title { font-family: var(--gt-display); font-weight: 700; }
.g-body[data-guest-template="warm"] .g-detail__title,
.g-body[data-guest-template="warm"] .g-page__title,
.g-body[data-guest-template="warm"] .g-chat__title {
  font-family: var(--gt-display); font-weight: 800; letter-spacing: -.02em; color: var(--gt-ink);
}
.g-body[data-guest-template="warm"] .g-detail__cat { color: var(--gt-accent); }
.g-body[data-guest-template="warm"] .g-detail__media,
.g-body[data-guest-template="warm"] .g-cat-head__media { background: var(--gt-surface-2); }
.g-body[data-guest-template="warm"] .g-back { color: var(--gt-accent); }
.g-body[data-guest-template="warm"] .g-file__icon,
.g-body[data-guest-template="warm"] .g-contact__icon { background: var(--gt-tint); color: var(--gt-accent); }

.g-body[data-guest-template="warm"] .form__input,
.g-body[data-guest-template="warm"] .g-chat__input {
  background-color: var(--gt-surface); border-color: var(--gt-line); color: var(--gt-ink); border-radius: 14px;
}
.g-body[data-guest-template="warm"] .btn--primary {
  background: var(--gt-ink); color: var(--gt-bg); box-shadow: none;
  font-family: var(--gt-sans); font-weight: 700; border-radius: 999px;
}
.g-body[data-guest-template="warm"] .btn--primary:hover { background: var(--gt-accent); }
.g-body[data-guest-template="warm"] .btn--ghost {
  background: var(--gt-surface); border-color: var(--gt-line); color: var(--gt-ink); border-radius: 999px;
}

/* --- Richieste e chat ------------------------------------------------------ */
.g-body[data-guest-template="warm"] .g-req,
.g-body[data-guest-template="warm"] .g-offer {
  background: var(--gt-surface); border-color: var(--gt-line); border-radius: 20px;
}
.g-body[data-guest-template="warm"] .g-chat__log { background: var(--gt-tint); }
.g-body[data-guest-template="warm"] .g-msg__bubble { background: var(--gt-surface); color: var(--gt-ink); }
.g-body[data-guest-template="warm"] .g-msg--user .g-msg__bubble { background: var(--gt-ink); color: var(--gt-bg); }
.g-body[data-guest-template="warm"] .g-msg--user .g-msg__bubble a { color: var(--gt-bg); }
.g-body[data-guest-template="warm"] .g-offer__cta { background: var(--gt-ink); color: var(--gt-bg); }
.g-body[data-guest-template="warm"] .g-status--received { background: var(--gt-tint); color: var(--gt-accent); }

/* --- Footer: fascia color terra a tutta larghezza -------------------------- */
/* Il footer vive in `.g-app`, non in `.g-main`: è già a tutta larghezza e la
   fascia color terra arriva ai bordi senza margini negativi. */
.g-body[data-guest-template="warm"] .g-footer {
  margin: 26px 0 0; padding: 22px 18px 28px;
  background: var(--gt-surface-2); border-top: none; text-align: center;
}
.g-body[data-guest-template="warm"] .g-footer__name { font-family: var(--gt-display); font-weight: 800; }
.g-body[data-guest-template="warm"] .g-footer__line { color: var(--gt-muted); }
.g-body[data-guest-template="warm"] .g-footer__link { color: var(--gt-accent); }
.g-body[data-guest-template="warm"] .g-footer__note { color: var(--gt-muted-2); }

/* --- Immagini di ripiego ---------------------------------------------------
   Le default sono disegnate nell'indigo storico: qui stonerebbero. Al loro
   posto il riquadro tratteggiato del mockup, nei colori del tema. */
.g-body[data-guest-template="warm"] .g-img--placeholder { display: none; }
.g-body[data-guest-template="warm"] .g-service__media,
.g-body[data-guest-template="warm"] .g-cat-head__media,
.g-body[data-guest-template="warm"] .g-detail__media {
  background: repeating-linear-gradient(135deg, #E9DDCC 0 9px, #F2E8DA 9px 18px);
}
.g-body[data-guest-template="warm"] .g-cat__media {
  background: repeating-linear-gradient(135deg, #E4D4BF 0 9px, #ECDFCD 9px 18px);
}

/* Il campo della chat non ha uno stile di focus proprio in application.css e
   ricadrebbe sull'anello azzurro del browser, fuori tema. */
.g-body[data-guest-template="warm"] .g-chat__input:focus {
  outline: none; border-color: var(--gt-accent);
  box-shadow: 0 0 0 3px rgba(196, 85, 47, 0.22);
}

/* §E23/UX — navigazione fra le sezioni nella palette del tema. */
.g-body[data-guest-template="warm"] .g-sectionnav__list { padding: 12px 18px 6px; }
.g-body[data-guest-template="warm"] .g-sectionnav__item {
  background: var(--gt-surface); border-color: var(--gt-line); color: var(--gt-muted);
  font-weight: 700;
}
.g-body[data-guest-template="warm"] .g-sectionnav__item:hover { color: var(--gt-ink); }
.g-body[data-guest-template="warm"] .g-sectionnav__item--active {
  background: var(--gt-ink); border-color: var(--gt-ink); color: var(--gt-bg);
}

/* §E23/UX — "Le mie richieste" nella testata: pagina corrente marcata. */
.g-body[data-guest-template="warm"] .g-topbar__action--active {
  background: var(--gt-ink); color: var(--gt-bg);
}

/* ==========================================================================
   §E23/UX — Scheda orari/prezzo, riepilogo e modulo di richiesta.
   ========================================================================== */
.g-body[data-guest-template="warm"] .g-fact + .g-fact { border-top-color: var(--gt-line); }
.g-body[data-guest-template="warm"] .g-fact__icon,
.g-body[data-guest-template="warm"] .g-recap__cat { color: var(--gt-accent); }
/* Misurato: `--gt-muted` sul bianco della card dà 4.35:1, sotto il 4.5 che AA
   chiede per il testo normale — e giorni e prezzo non sono decorazione, sono
   metà dell'informazione. Qui serve un grado più scuro (6.05:1). Il token di
   partenza resta com'è: lo usano una decina di regole di questo tema e
   ritoccarlo è una decisione a parte. */
.g-body[data-guest-template="warm"] .g-fact__label,
.g-body[data-guest-template="warm"] .g-fact__key,
.g-body[data-guest-template="warm"] .g-fact__note,
/* Stessa ragione sulla nuvoletta color crema: `--gt-muted` ci sta a 4.05:1. */
.g-body[data-guest-template="warm"] .g-req-note__time { color: rgba(36, 31, 25, 0.70); }
.g-body[data-guest-template="warm"] .g-fact__value,
.g-body[data-guest-template="warm"] .g-total { color: var(--gt-ink); }
.g-body[data-guest-template="warm"] .g-recap__name {
  font-family: var(--gt-display); font-weight: 800; letter-spacing: -.02em; color: var(--gt-ink);
}

/* La card qui è bianca e il campo lo era altrettanto: il campo scende sulla
   crema della pagina e il contorno regge 4.33:1 sul bianco. `--gt-line` non
   basterebbe, è pensato per separare due superfici, non per contornare un
   controllo. */
.g-body[data-guest-template="warm"] .form__input {
  background-color: var(--gt-bg); border-color: var(--gt-muted);
}
.g-body[data-guest-template="warm"] .form__input:focus {
  background-color: var(--gt-surface); border-color: var(--gt-accent);
  box-shadow: 0 0 0 3px rgba(196, 85, 47, .20);
}
.g-body[data-guest-template="warm"] .g-stepper__btn {
  background: var(--gt-surface); border-color: var(--gt-muted); color: var(--gt-ink);
  border-radius: 999px;
}
.g-body[data-guest-template="warm"] .g-stepper__btn:hover:not(:disabled) { background: var(--gt-surface-2); }