/* ==========================================================================
   Emporia UI — CSS del progetto (dopo nitido.css e emporia-components.css)
   Solo var(--clb-*): niente colori letterali. Prefisso classi: ui-
   ========================================================================== */

/* navbar sempre in alto: lo sticky va sull'header, non sulla nav
   (un elemento sticky resta fermo solo dentro il suo contenitore, e l'header è alto quanto la nav) */
.site-header { position: sticky; top: 0; z-index: 1030; }

/* marchio e avatar */
.ui-mark { flex: none; color: var(--clb-color-text); }
.ui-avatar {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--clb-radius-pill);
  font: 600 11px/1 var(--clb-font-sans); letter-spacing: .02em;
  color: var(--clb-color-text-inv); background: var(--clb-color-inv-bg);
}
.ui-avatar--lg { width: 36px; height: 36px; font-size: 13px; }

/* --------------------------------------------------------------------------
   Pagine di accesso: form a sinistra, pannello "codice" a destra
   -------------------------------------------------------------------------- */
.ui-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--clb-color-bg); }
@media (min-width: 992px) { .ui-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.ui-auth__main { display: flex; flex-direction: column; padding: var(--clb-space-6) var(--clb-space-6); }
@media (min-width: 576px) { .ui-auth__main { padding: var(--clb-space-8) var(--clb-space-12); } }
.ui-auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--clb-space-4); }
.ui-auth__brand { display: inline-flex; align-items: center; gap: var(--clb-space-2); font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--clb-color-text); text-decoration: none; }
.ui-auth__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--clb-space-10) 0; }
.ui-auth__card { width: 100%; max-width: 380px; }
.ui-auth__card h1 { font-size: var(--clb-text-2xl); letter-spacing: -.03em; margin: var(--clb-space-3) 0 var(--clb-space-2); }
.ui-auth__card .lead { font-size: var(--clb-text-base); margin-bottom: var(--clb-space-6); }
.ui-auth__foot { font-size: var(--clb-text-sm); color: var(--clb-color-text-3); }
.ui-auth__foot a { color: var(--clb-color-text-2); }
.ui-auth__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--clb-space-3); }
.ui-auth__row a { font-size: var(--clb-text-sm); color: var(--clb-color-text-3); }
.ui-auth__error {
  padding: 10px 12px; margin-bottom: var(--clb-space-4); border-radius: var(--clb-radius-sm);
  font-size: 14px; color: var(--clb-color-danger); background: var(--clb-color-danger-bg);
}

/* pannello a destra: sempre scuro, griglia, finestra di codice */
.ui-auth__aside {
  display: none; position: relative; overflow: hidden;
  background: var(--clb-color-inv-bg); color: var(--clb-color-text-inv);
}
@media (min-width: 992px) { .ui-auth__aside { display: flex; align-items: center; justify-content: center; padding: var(--clb-space-12); } }
.ui-auth__aside::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--clb-color-text-inv) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--clb-color-text-inv) 9%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 45%, var(--clb-color-backdrop) 20%, transparent 75%);
}
.ui-auth__aside-inner { position: relative; width: 100%; max-width: 520px; }
.ui-auth__claim { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; margin: 0 0 var(--clb-space-6); color: var(--clb-color-text-inv); }
.ui-auth__claim span { color: color-mix(in srgb, var(--clb-color-text-inv) 55%, transparent); }
.ui-window {
  border-radius: var(--clb-radius-lg); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--clb-color-text-inv) 16%, transparent);
  background: color-mix(in srgb, var(--clb-color-inv-bg) 80%, var(--clb-color-text-inv) 6%);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--clb-color-backdrop) 45%, transparent);
}
/* in scuro la finestra resta un terminale scuro: con i token invertiti si schiarirebbe e l'arancio non si leggerebbe */
[data-bs-theme="dark"] .ui-window {
  --clb-color-text-inv: var(--clb-color-text);
  --clb-color-inv-bg: var(--clb-color-surface);
}
.ui-window__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--clb-color-text-inv) 12%, transparent); }
.ui-window__bar i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--clb-color-text-inv) 22%, transparent); }
.ui-window__bar span { margin-left: 8px; font: 500 12px/1 var(--clb-font-mono); color: color-mix(in srgb, var(--clb-color-text-inv) 60%, transparent); }
.ui-window pre {
  margin: 0; padding: 18px 20px; border: 0; border-radius: 0; background: transparent;
  font-size: 13px; line-height: 1.8; color: color-mix(in srgb, var(--clb-color-text-inv) 88%, transparent);
}
.ui-window .t-tag { color: var(--clb-color-text-inv); font-weight: 500; }
.ui-window .t-attr { color: color-mix(in srgb, var(--clb-color-text-inv) 58%, transparent); }
.ui-window .t-val { color: var(--clb-color-signal); }
.ui-window .t-dim { color: color-mix(in srgb, var(--clb-color-text-inv) 40%, transparent); }
.ui-auth__meta { display: flex; gap: var(--clb-space-6); margin-top: var(--clb-space-6); font: 500 12px/1.4 var(--clb-font-mono); text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--clb-color-text-inv) 55%, transparent); }
.ui-auth__meta b { display: block; font: 600 22px/1.2 var(--clb-font-sans); letter-spacing: -.02em; text-transform: none; color: var(--clb-color-text-inv); }

/* --------------------------------------------------------------------------
   Layout documentazione: sidebar · contenuto · indice
   -------------------------------------------------------------------------- */
.ui-docs {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--clb-space-8);
  max-width: 1440px; margin: 0 auto; padding: 0 var(--clb-space-4);
}
@media (min-width: 992px) { .ui-docs { grid-template-columns: var(--clb-sidebar-w) minmax(0, 1fr); padding: 0 var(--clb-space-6); } }
@media (min-width: 1280px) { .ui-docs { grid-template-columns: var(--clb-sidebar-w) minmax(0, 1fr) 220px; gap: var(--clb-space-10); } }

.ui-docs__nav { display: none; }
@media (min-width: 992px) {
  .ui-docs__nav {
    display: block; position: sticky; top: var(--clb-navbar-h); align-self: start;
    max-height: calc(100vh - var(--clb-navbar-h)); overflow-y: auto;
    padding: var(--clb-space-4) var(--clb-space-2) var(--clb-space-10) var(--clb-space-3);
    border-right: 1px solid var(--clb-color-border-hair);
  }
}
.ui-docs__search {
  display: flex; align-items: center; gap: var(--clb-space-2); width: 100%;
  padding: 7px 10px; margin: var(--clb-space-2) 0 var(--clb-space-2);
  font-size: 14px; color: var(--clb-color-text-3); text-align: left;
  background: var(--clb-color-surface); border: 1px solid var(--clb-color-border); border-radius: var(--clb-radius-sm);
}
.ui-docs__search kbd { margin-left: auto; }
.ui-docs__search:hover { border-color: var(--clb-color-border-strong); color: var(--clb-color-text-2); }

.ui-docs__main { min-width: 0; padding: var(--clb-space-8) 0 var(--clb-space-16); }
.ui-docs__content { max-width: 760px; }
.ui-docs__content > h2 { margin-top: var(--clb-space-12); padding-top: var(--clb-space-2); scroll-margin-top: calc(var(--clb-navbar-h) + var(--clb-space-4)); }
.ui-docs__content > h3 { margin-top: var(--clb-space-8); scroll-margin-top: calc(var(--clb-navbar-h) + var(--clb-space-4)); }
.ui-docs__content > p, .ui-docs__content > ul, .ui-docs__content > ol { color: var(--clb-color-text-2); max-width: 72ch; }
.ui-docs__content > p strong { color: var(--clb-color-text); }
.ui-docs__content .clb-code { margin: var(--clb-space-4) 0 var(--clb-space-6); }
.ui-docs__content .table { margin: var(--clb-space-4) 0 var(--clb-space-6); }

.ui-docs__toc { display: none; }
@media (min-width: 1280px) {
  .ui-docs__toc {
    display: block; position: sticky; top: var(--clb-navbar-h); align-self: start;
    max-height: calc(100vh - var(--clb-navbar-h)); overflow-y: auto; padding: var(--clb-space-8) 0;
  }
}
.ui-toc__title { font: 500 var(--clb-text-xs)/1 var(--clb-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--clb-color-text-3); margin-bottom: var(--clb-space-3); }
.ui-toc { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--clb-color-border); font-size: 13px; }
.ui-toc a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; color: var(--clb-color-text-3); text-decoration: none; border-left: 1px solid transparent; }
.ui-toc a:hover { color: var(--clb-color-text); }
.ui-toc a.is-active { color: var(--clb-color-text); border-left-color: var(--clb-color-text); }
.ui-toc .is-sub a { padding-left: 24px; }

/* sidebar mobile (offcanvas) */
.ui-docs__mobilebar { display: flex; align-items: center; gap: var(--clb-space-2); padding: var(--clb-space-3) 0; border-bottom: 1px solid var(--clb-color-border-hair); }
@media (min-width: 992px) { .ui-docs__mobilebar { display: none; } }

/* paginazione fra pagine della doc */
.ui-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--clb-space-4); margin-top: var(--clb-space-16); }
.ui-pager a {
  display: block; padding: var(--clb-space-4) var(--clb-space-5); border: 1px solid var(--clb-color-border); border-radius: var(--clb-radius-md);
  color: var(--clb-color-text); text-decoration: none; background: var(--clb-color-surface);
}
.ui-pager a:hover { border-color: var(--clb-color-border-strong); }
.ui-pager small { display: block; color: var(--clb-color-text-3); font-size: var(--clb-text-xs); }
.ui-pager .is-next { text-align: right; grid-column: 2; }

/* card di navigazione (panoramica) */
.ui-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--clb-space-4); margin: var(--clb-space-6) 0; }
.ui-tile {
  position: relative; display: block; padding: var(--clb-space-5); border: 1px solid var(--clb-color-border); border-radius: var(--clb-radius-lg);
  background: var(--clb-color-surface); color: var(--clb-color-text); text-decoration: none; transition: border-color .15s ease;
}
a.ui-tile:hover { border-color: var(--clb-color-border-strong); }
.ui-tile__title { font-weight: 600; font-size: var(--clb-text-md); letter-spacing: -.01em; margin: var(--clb-space-2) 0 var(--clb-space-1); }
.ui-tile p { margin: 0; font-size: 14px; color: var(--clb-color-text-2); }
.ui-tile .badge { position: absolute; top: var(--clb-space-4); right: var(--clb-space-4); }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.ui-person { display: flex; align-items: center; gap: var(--clb-space-3); min-width: 0; }
.ui-person__name { font-weight: 500; color: var(--clb-color-text); text-decoration: none; }
.ui-person__mail { display: block; font-size: 13px; color: var(--clb-color-text-3); overflow: hidden; text-overflow: ellipsis; }
.ui-muted-date { font: 13px var(--clb-font-mono); color: var(--clb-color-text-3); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Pagine componente
   -------------------------------------------------------------------------- */
.ui-docs__content--wide { max-width: 980px; }
.ui-docs__title.is-code { font-family: var(--clb-font-mono); font-weight: 500; letter-spacing: -.02em; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); }
.ui-docs__intro > p { color: var(--clb-color-text-2); max-width: 72ch; }
.ui-docs__content > .table-responsive { margin: var(--clb-space-4) 0 var(--clb-space-6); border: 1px solid var(--clb-color-border); border-radius: var(--clb-radius-md); }
.ui-docs__content > .table-responsive .table { margin: 0; }
.ui-docs__content > .table-responsive .table > :not(caption) > * > *:first-child { white-space: nowrap; }
.ui-docs__title { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Telefono e tablet
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* le tabelle di riferimento vanno a capo invece di scorrere di lato */
  .ui-docs__content > .table-responsive .table > :not(caption) > * > *:first-child { white-space: normal; }
  .ui-docs__content > .table-responsive .table code { overflow-wrap: anywhere; }
  .ui-window pre { font-size: 12px; padding: 14px 16px; }
}
.ui-docs__content > .table-responsive tr:last-child > td { border-bottom: 0; }
.ui-docs__content > blockquote { padding: var(--clb-space-3) var(--clb-space-4); border-left: 2px solid var(--clb-color-border-strong); color: var(--clb-color-text-2); background: var(--clb-color-surface-sunk); border-radius: 0 var(--clb-radius-sm) var(--clb-radius-sm) 0; }
.ui-docs__source { margin-top: var(--clb-space-10); font-size: var(--clb-text-sm); color: var(--clb-color-text-3); }
.clb-sidenav a.is-code { font-family: var(--clb-font-mono); font-size: 13px; }

.ui-variants { display: flex; flex-wrap: wrap; align-items: center; gap: var(--clb-space-2); margin: var(--clb-space-4) 0 var(--clb-space-2); }
.ui-variants__label { font: 500 var(--clb-text-xs)/1 var(--clb-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--clb-color-text-3); margin-right: var(--clb-space-1); }

/* esempio: barra, anteprima in iframe, codice */
.ui-example { margin: var(--clb-space-4) 0 var(--clb-space-8); border: 1px solid var(--clb-color-border); border-radius: var(--clb-radius-lg); overflow: hidden; background: var(--clb-color-surface); }
.ui-example__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--clb-space-3); padding: 6px 8px 6px 6px; border-bottom: 1px solid var(--clb-color-border); background: var(--clb-color-surface); }
.ui-example__sizes { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--clb-radius-sm); background: var(--clb-color-surface-2); }
.ui-example__sizes button { border: 0; background: transparent; padding: 4px 10px; border-radius: var(--clb-radius-xs); font-size: 12px; font-weight: 500; color: var(--clb-color-text-3); }
.ui-example__sizes button:hover { color: var(--clb-color-text); }
.ui-example__sizes button.is-active { background: var(--clb-color-surface); color: var(--clb-color-text); box-shadow: var(--clb-shadow-sm); }
.ui-example__open { font-size: 12px; color: var(--clb-color-text-3); text-decoration: none; }
.ui-example__open:hover { color: var(--clb-color-text); }
.ui-example__stage { --ui-frame-w: 100%; background: var(--clb-color-bg); }
.ui-example__stage.is-narrow {
  background-color: var(--clb-color-surface-sunk);
  background-image: linear-gradient(var(--clb-color-border-hair) 1px, transparent 1px), linear-gradient(90deg, var(--clb-color-border-hair) 1px, transparent 1px);
  background-size: 24px 24px; padding: var(--clb-space-4) 0;
}
.ui-example__frame { display: block; width: var(--ui-frame-w); max-width: 100%; margin: 0 auto; border: 0; background: var(--clb-color-bg); transition: width .2s ease; }
.ui-example__stage.is-narrow .ui-example__frame { border: 1px solid var(--clb-color-border); border-radius: var(--clb-radius-md); }
.ui-docs__content .ui-example__code { margin: 0; }
.ui-example__code pre { margin: 0; border: 0; border-top: 1px solid var(--clb-color-border); border-radius: 0; max-height: 420px; overflow: auto; }

/* --------------------------------------------------------------------------
   Ricerca "/"
   -------------------------------------------------------------------------- */
.ui-search__dialog { max-width: 620px; margin-top: 12vh; }
.ui-search__head { display: flex; align-items: center; gap: var(--clb-space-3); padding: 12px 16px; border-bottom: 1px solid var(--clb-color-border); color: var(--clb-color-text-3); }
.ui-search__input { flex: 1; border: 0; outline: 0; background: transparent; font-size: var(--clb-text-md); color: var(--clb-color-text); }
.ui-search__input:focus-visible { box-shadow: none; }
.ui-search__input::-webkit-search-cancel-button { display: none; }
.ui-search__list { list-style: none; margin: 0; padding: 0; }
.ui-search__list a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--clb-space-4); padding: 9px 12px; border-radius: var(--clb-radius-sm); color: var(--clb-color-text); text-decoration: none; }
.ui-search__list [aria-selected="true"] a, .ui-search__list a:hover { background: var(--clb-color-surface-2); }
.ui-search__list [aria-selected="true"] a { box-shadow: inset 2px 0 0 var(--clb-color-signal); }
.ui-search__t { font-family: var(--clb-font-mono); font-size: 14px; }
.ui-search__g { font-size: 12px; color: var(--clb-color-text-3); white-space: nowrap; }
.ui-search__empty { margin: var(--clb-space-6) 0; text-align: center; color: var(--clb-color-text-3); font-size: 14px; }
.ui-docs__intro > p:first-child { font-size: var(--clb-text-md); line-height: var(--clb-leading-base); }

/* pagine dei blocchi vetrina: niente indice a destra, anteprime larghe */
@media (min-width: 1280px) {
  .ui-docs--largo { grid-template-columns: var(--clb-sidebar-w) minmax(0, 1fr); }
  .ui-docs--largo .ui-docs__toc { display: none; }
}
.ui-docs--largo .ui-docs__content--wide { max-width: 1180px; }

/* --------------------------------------------------------------------------
   Style: selettore, catalogo, pagina di uno style, catalogo blocchi
   -------------------------------------------------------------------------- */
.ui-stile-sel { display: block; margin: 0 0 var(--clb-space-2); }
.ui-stile-sel span { display: block; margin: var(--clb-space-2) 0 4px; font: 500 var(--clb-text-xs)/1.2 var(--clb-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--clb-color-text-3); }
.ui-example__style { margin-left: auto; margin-right: var(--clb-space-3); font: 500 12px/1 var(--clb-font-mono); color: var(--clb-color-text-3); }

.ui-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--clb-space-5); margin: var(--clb-space-6) 0; }
.ui-style-card { display: flex; flex-direction: column; border: 1px solid var(--clb-color-border); border-radius: var(--clb-radius-lg); overflow: hidden; background: var(--clb-color-surface); color: var(--clb-color-text); text-decoration: none; transition: border-color .15s ease; }
.ui-style-card:hover { border-color: var(--clb-color-border-strong); }
.ui-style-card__media { display: block; aspect-ratio: 16 / 9; background: var(--clb-color-surface-2); border-bottom: 1px solid var(--clb-color-border); overflow: hidden; }
.ui-style-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.ui-style-card__swatches { display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; }
.ui-style-card__swatches i { display: block; }
.ui-style-card__body { display: flex; flex-direction: column; gap: 4px; padding: var(--clb-space-4) var(--clb-space-4) var(--clb-space-5); }
.ui-style-card__name { font-weight: 600; font-size: var(--clb-text-md); letter-spacing: -.01em; }
.ui-style-card__mood { font-size: 13px; color: var(--clb-color-text-2); }
.ui-style-card__fits { font-size: 12px; color: var(--clb-color-text-3); }

.ui-style-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--clb-space-3) var(--clb-space-6); margin: var(--clb-space-4) 0; font-size: 14px; color: var(--clb-color-text-2); }
.ui-style-meta code { margin: 0 4px 4px 0; display: inline-block; }
.ui-style-meta__k { display: block; margin-bottom: 4px; font: 500 var(--clb-text-xs)/1.2 var(--clb-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--clb-color-text-3); }

.ui-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--clb-space-3); margin: var(--clb-space-3) 0 var(--clb-space-5); }
.ui-swatch { display: grid; grid-template-columns: auto 1fr; column-gap: var(--clb-space-3); align-items: center; padding: var(--clb-space-2); border: 1px solid var(--clb-color-border-hair); border-radius: var(--clb-radius-md); background: var(--clb-color-surface); }
.ui-swatch__chips { grid-row: span 3; display: flex; width: 44px; height: 44px; border-radius: var(--clb-radius-sm); overflow: hidden; border: 1px solid var(--clb-color-border); }
.ui-swatch__chips i { flex: 1; }
.ui-swatch__name { font: 500 13px/1.3 var(--clb-font-mono); }
.ui-swatch__val { font: 11px/1.4 var(--clb-font-mono); color: var(--clb-color-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-guida > h2 { font-size: var(--clb-text-xl); margin-top: var(--clb-space-8); }
.ui-guida > .table-responsive { margin: var(--clb-space-4) 0; border: 1px solid var(--clb-color-border); border-radius: var(--clb-radius-md); }
.ui-guida > .table-responsive .table { margin: 0; }
.ui-guida > p, .ui-guida > ul, .ui-guida > ol { color: var(--clb-color-text-2); max-width: 72ch; }

.ui-catalog__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--clb-space-4); margin-top: var(--clb-space-6); }
.ui-catalog__name { font-family: var(--clb-font-mono); font-weight: 500; font-size: var(--clb-text-base); margin: 0; }

/* --------------------------------------------------------------------------
   Home su telefono: titoli e testi al centro, video più piccolo al centro
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ui-home .ec-hero__text,
  .ui-home .ec-section-header,
  .ui-home .ec-split__text,
  .ui-home .ec-faq__aside,
  .ui-home .ec-stat { text-align: center; }
  .ui-home .ec-section-header { justify-items: center; }
  .ui-home .ec-stat-grid--inline .ec-stat__body { align-items: center; }
  .ui-home .ec-section-header__title,
  .ui-home .ec-section-header__subtitle,
  .ui-home .ec-hero__subtitle,
  .ui-home .ec-split__text { margin-inline: auto; }
  .ui-home .ec-hero__actions,
  .ui-home .ec-split__text .d-flex { justify-content: center; }
  /* al centro l'occhiello ha il filetto da tutti e due i lati */
  .ui-home .ec-hero__eyebrow::after,
  .ui-home .ec-section-header__eyebrow::after { content: ""; flex: none; width: 1.75rem; height: 1px; background: currentColor; }

  .ui-home .ec-hero__media { width: 78%; margin-inline: auto; }
  .ui-home .ec-hero__badge { left: calc(var(--clb-space-8) * -1); bottom: var(--clb-space-8); }
}

/* tema da telefono: un'icona sola, luna in chiaro e sole in scuro */
.ui-theme-icon { display: inline-flex; align-items: center; justify-content: center; padding: .375rem; line-height: 1; }
.ui-theme-icon__sun { display: none; }
[data-bs-theme="dark"] .ui-theme-icon__sun { display: block; }
[data-bs-theme="dark"] .ui-theme-icon__moon { display: none; }