/**
 * Pulizia UI — regole R08 e R13 del piano prodotto.
 *
 * R08: niente riquadri annidati, niente fasce salvia sovradimensionate, meno
 * spazio morto. R13: un solo bordo neutro, niente cerchi o aloni verde scuro.
 *
 * Questo foglio arriva per ultimo perché diverse superfici stanno in file
 * candidati di Codex che non vanno toccati.
 */

/* ------------------------------------------------------------------ *
 * 1. Cornici annidate: la scheda non sta dentro una scatola bianca.
 * ------------------------------------------------------------------ */

html body.single-esperienze .intro.tbp-exp-intro {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Sezioni della scheda: vivono sullo sfondo di pagina, separate dallo spazio
   e dal titolo, non da un bordo salvia su fondo salvia. */
html body.single-esperienze .tbp-exp-section {
  padding-right: 0 !important;
  padding-left: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.single-esperienze .tbp-exp-section + .tbp-exp-section {
  margin-top: 28px !important;
}

/* ------------------------------------------------------------------ *
 * 2. Niente anelli verdi attorno ai pulsanti oro.
 * ------------------------------------------------------------------ */

html body .tbp-btn--premium,
html body .tbp-exp-card__buy,
html body .tbp-book-strip__cta {
  border: 0 !important;
  box-shadow: none !important;
}

html body .tbp-btn--premium:focus-visible,
html body .tbp-exp-card__buy:focus-visible,
html body .tbp-book-strip__cta:focus-visible {
  outline: 2px solid var(--tbp-green, #084828) !important;
  outline-offset: 3px !important;
}

/* ------------------------------------------------------------------ *
 * 3-6. Scheda attività.
 *
 * Il markup della card sta in un file candidato e le sue regole usano un
 * selettore con ID (`:is(#tbp-results-container, ...)`), quindi qui serve la
 * stessa forza: `:is()` con un ID vale ID anche sui rami che ID non hanno.
 * ------------------------------------------------------------------ */

/* Titolo e prezzo leggibili, non didascalie.
   Il selettore ricalca quello del file candidato, che scende a 0.88rem con
   `:is(#id, .classe) .tbp-exp-card:not():not():not() .tbp-exp-card__title`:
   a specificita' piu' bassa la nostra regola veniva ignorata. */
html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-exp-card:not(.tbp-exp-card--checkout):not(.tbp-exp-card--mini):not(.tbp-exp-card--hidden) .tbp-exp-card__title,
html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-exp-card:not(.tbp-exp-card--checkout):not(.tbp-exp-card--mini):not(.tbp-exp-card--hidden) h3.tbp-exp-card__title {
  font-size: clamp(1.12rem, 5vw, 1.5rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em !important;
}

/* Il prezzo stava sopra il titolo: 37px contro 23 su schermo grande, 28 contro
   16 sul telefono. Su una card di scoperta chi guarda cerca prima che cosa si
   fa, poi quanto costa; il prezzo resta ben visibile ma sotto al nome — circa
   otto decimi del titolo, non una volta e mezza (12/9). */
html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-exp-card__price {
  font-size: clamp(0.95rem, 3.9vw, 1.18rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

/* Le diapositive non ancora caricate mostravano il testo alternativo come
   testo grezzo sopra la fotografia: sulla scheda si leggeva «...o con il
   professionista 1» in un angolo. Il testo alternativo serve a chi non vede
   la foto, non a chi la sta aspettando: resta nel codice per i lettori di
   schermo, ma non si disegna (12/9). */
html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-exp-card__slide img {
  color: transparent !important;
  background-color: #E7EDE8;
}

/* Nome dell'host centrato sotto la foto. */
html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-exp-card__person {
  align-items: center !important;
  text-align: center !important;
}

html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-exp-card__maker-name {
  width: 100% !important;
  text-align: center !important;
}

/* Valutazione su una riga sola: «(0 recensioni)» non si spezza. */
html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-card-rating {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-card-rating__count,
html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-card-rating__count--empty {
  white-space: nowrap !important;
}

/* Regione accanto agli altri tag, non su una riga tutta sua: `display:
   contents` porta le pastiglie nello stesso flusso senza toccare il markup. */
html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-exp-card__meta {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-exp-card__meta > .tbp-card-rating {
  flex: 0 0 100% !important;
}

html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-exp-card__place,
html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-exp-card__tags {
  display: contents !important;
}

html body :is(#tbp-results-container, .tbp-exp-card-scope, .grid-risultati) .tbp-exp-card__place-bit {
  /* La regione apre la fila dei tag, accanto a modalita' e categoria. */
  order: -1 !important;
  display: inline-block !important;
  width: auto !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / 16%) !important;
  color: rgb(255 255 255 / 92%) !important;
  font-size: clamp(.58rem, 2.5vw, .7rem) !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

/* ------------------------------------------------------------------ *
 * 7. Nebbia sopra la barra: sfumatura vera, non una fascia lattiginosa.
 *    Sfoca quello che c'è dietro e svanisce con una maschera, così
 *    funziona sia sul salvia della pagina sia sul verde del footer.
 * ------------------------------------------------------------------ */

@media (max-width: 849px) {
  html body.tbp-has-app-bar .tbp-app-bar-veil {
    height: calc(var(--tbp-app-bar-h) + var(--tbp-app-bar-inset) + env(safe-area-inset-bottom, 0px) + 104px) !important;
    background: linear-gradient(to top, rgb(244 247 245 / 46%), rgb(244 247 245 / 0%)) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / 92%) 26%, rgb(0 0 0 / 62%) 48%, rgb(0 0 0 / 30%) 68%, rgb(0 0 0 / 10%) 85%, transparent 100%) !important;
    mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / 92%) 26%, rgb(0 0 0 / 62%) 48%, rgb(0 0 0 / 30%) 68%, rgb(0 0 0 / 10%) 85%, transparent 100%) !important;
  }
}

/* ------------------------------------------------------------------ *
 * 8. Home: aria tra titolo, testo e immagine.
 * ------------------------------------------------------------------ */

html body.home .tbp-page-hero--home .tbp-page-hero__title {
  margin-bottom: 18px !important;
}

html body.home .tbp-page-hero--home .tbp-page-hero__description {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.62 !important;
}

html body.home .tbp-page-hero--home .tbp-page-hero__visual {
  margin-top: 30px !important;
  margin-bottom: 26px !important;
}

/* ------------------------------------------------------------------ *
 * 9. Comandi video: nessun bottone audio, nessuna pastiglia sopra le
 *    anteprime. Resta solo quando la riproduzione è davvero bloccata.
 * ------------------------------------------------------------------ */

html body .tbp-video-preview__sound {
  display: none !important;
}

html body .tbp-video-preview:not([data-state="blocked"]):not([data-state="error"]) {
  display: none !important;
}

/* ------------------------------------------------------------------ *
 * Card strette della griglia (due colonne sul telefono): foto e dati
 * affiancati non ci stanno, la valutazione sforava e veniva tagliata dal
 * bordo della card. Sotto i 560px si impilano.
 * ------------------------------------------------------------------ */

@media (max-width: 560px) {
  /* La foto resta a sinistra, il nome e' centrato sotto la foto. Il resto
     dei dati va sotto, a piena larghezza. */
  html body :is(#tbp-results-container, .grid-risultati, .tbp-home-feed__grid) .tbp-exp-card__dock {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    gap: 8px !important;
  }

  html body :is(#tbp-results-container, .grid-risultati, .tbp-home-feed__grid) .tbp-exp-card__meta {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  html body :is(#tbp-results-container, .grid-risultati, .tbp-home-feed__grid) .tbp-card-rating {
    justify-content: flex-start !important;
  }

  html body :is(#tbp-results-container, .grid-risultati, .tbp-home-feed__grid) .tbp-exp-card__tags {
    justify-content: flex-start !important;
  }
}

/* ------------------------------------------------------------------ *
 * Menu dell'account: le voci lunghe («Il tuo Spazio personale ToBePolo»)
 * sfondavano la colonna invece di andare a capo.
 * ------------------------------------------------------------------ */

html body :is(.woocommerce-MyAccount-navigation, .tbp-account-nav-section) a,
html body :is(.woocommerce-MyAccount-navigation, .tbp-account-nav-section) a > * {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body :is(.woocommerce-MyAccount-navigation, .tbp-account-nav-section) a {
  align-items: center !important;
  height: auto !important;
  line-height: 1.28 !important;
}

/* L'etichetta ha `nowrap` da una regola piu' specifica: qui la si batte
   nominandola, altrimenti resta su una riga e sfonda la colonna. */
html body :is(.woocommerce-MyAccount-navigation, .tbp-account-nav-section) a .label,
html body :is(.woocommerce-MyAccount-navigation, .tbp-account-nav-section) a span.label,
html body :is(.woocommerce-MyAccount-navigation, .tbp-account-nav-section) li a .label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* L'illustrazione non si mangia meta' riga. */
html body :is(.woocommerce-MyAccount-navigation, .tbp-account-nav-section) a .icona {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: auto !important;
}

/* ------------------------------------------------------------------ *
 * Gestionale su telefono: i grafici dei rapporti hanno una larghezza
 * fissa e venivano tagliati dal bordo. Il riquadro che li contiene
 * scorre di lato, così restano leggibili senza rompere la pagina.
 * ------------------------------------------------------------------ */

@media (max-width: 849px) {
  html body .wcfm-content .postbox > .inside {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html body .wcfm-content .chart-placeholder {
    max-width: none !important;
  }

  /* Tabelle dei rapporti: stessa storia. */
  html body .wcfm-content table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}

/* ------------------------------------------------------------------ *
 * Account su telefono: le linguette delle prenotazioni erano tagliate
 * («Prossim», «Annulla») perché servivano 85px in 65 disponibili.
 * ------------------------------------------------------------------ */

@media (max-width: 560px) {
  html body .tbp-flow-orders__tabs {
    gap: 6px !important;
  }

  html body .tbp-flow-orders__tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 4px !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
    overflow-wrap: normal !important;
    hyphens: manual;
  }

  /* Niente sfora la colonna dell'account: avvisi, griglie, tabelle. */
  html body .woocommerce-MyAccount-content .woocommerce-info,
  html body .woocommerce-MyAccount-content .message-container,
  html body .woocommerce-MyAccount-content .tbp-wishlist-page,
  html body .woocommerce-MyAccount-content .tbp-wishlist-grid {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* L'avviso di conferma email era piu' largo della colonna dell'account. */
@media (max-width: 560px) {
  html body .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message, .woocommerce-error),
  html body .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .message-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
    box-sizing: border-box !important;
  }
}

/* ------------------------------------------------------------------ *
 * Preferiti: la griglia aveva una colonna fissa da 280px dentro una
 * colonna da 259, quindi sporgeva. Le colonne si adattano.
 * ------------------------------------------------------------------ */

html body .tbp-wishlist-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
}

html body .tbp-wishlist-page,
html body .tbp-wishlist-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------ *
 * Prenotazioni: banner di verifica e stato vuoto.
 * Il tema applicava un float al pulsante dell'avviso: la frase iniziava
 * accanto al bottone e la seconda riga tornava a sinistra. Una fascia flex
 * mantiene messaggio e azione leggibili su ogni larghezza.
 * ------------------------------------------------------------------ */
html body.woocommerce-account.tbp-flow-orders .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message),
html body.woocommerce-account.tbp-flow-orders .woocommerce-notices-wrapper :is(.woocommerce-info, .woocommerce-message) {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto 28px !important;
  padding: 18px 22px !important;
  border: 1px solid #d9e5de !important;
  border-radius: 18px !important;
  background: #f6f9f7 !important;
  color: #355a48 !important;
  font-size: 0.96rem !important;
  line-height: 1.45 !important;
}

html body.woocommerce-account.tbp-flow-orders .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message)::before,
html body.woocommerce-account.tbp-flow-orders .woocommerce-notices-wrapper :is(.woocommerce-info, .woocommerce-message)::before {
  display: none !important;
}

html body.woocommerce-account.tbp-flow-orders :is(.woocommerce-info, .woocommerce-message) .message-container {
  display: contents !important;
}

html body.woocommerce-account.tbp-flow-orders :is(.woocommerce-info, .woocommerce-message) .button,
html body.woocommerce-account.tbp-flow-orders :is(.woocommerce-info, .woocommerce-message) a.button {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #084828 !important;
  color: #fff !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body.woocommerce-account.tbp-flow-orders :is(.woocommerce-info, .woocommerce-message) .button:hover,
html body.woocommerce-account.tbp-flow-orders :is(.woocommerce-info, .woocommerce-message) a.button:hover {
  background: #0c6139 !important;
  color: #fff !important;
}

html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders {
  box-sizing: border-box;
  width: min(100%, 920px) !important;
  margin: 0 auto !important;
  padding: 0 0 52px !important;
}

html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__title {
  margin: 0 0 22px !important;
  color: #084828 !important;
  font-size: clamp(1.75rem, 3vw, 2.35rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em;
  line-height: 1.1 !important;
}

html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__empty-state {
  display: flex;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 270px;
  padding: 38px 28px 34px;
  border: 1px solid #d9e5de;
  border-radius: 22px;
  background: #f6f9f7;
  text-align: center;
}

html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__empty-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin: 0 0 16px;
  border-radius: 50%;
  background: #e7b740;
  color: #084828;
  font-size: 1.45rem;
  line-height: 1;
}

html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__empty-state h2 {
  margin: 0 0 8px !important;
  color: #084828 !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__empty-state .tbp-flow-orders__empty {
  max-width: 480px;
  margin: 0 0 24px !important;
  color: #5d786b !important;
  font-size: 0.96rem !important;
  line-height: 1.5 !important;
}

html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__empty-state .tbp-btn--premium {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 280px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 13px 24px !important;
  border-radius: 999px !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
}

html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__tabs {
  gap: 10px !important;
  margin: 0 0 18px !important;
}

html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__tab {
  min-height: 50px !important;
  border: 1px solid #d9e5de !important;
  border-radius: 14px !important;
  background: #f6f9f7 !important;
  font-size: 0.9rem !important;
}

html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__tab.is-active {
  border-color: #084828 !important;
  background: #084828 !important;
  color: #fff !important;
}

html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__tab.is-active .tbp-flow-orders__count {
  color: #d6e6da !important;
}

html[data-tbp-theme="dark"] body.woocommerce-account.tbp-flow-orders .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message),
html[data-tbp-theme="dark"] body.woocommerce-account.tbp-flow-orders .woocommerce-notices-wrapper :is(.woocommerce-info, .woocommerce-message),
html[data-tbp-theme="dark"] body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__empty-state {
  border-color: #365444 !important;
  background: #1b2a22 !important;
  color: #edf3ed !important;
}

html[data-tbp-theme="dark"] body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__title,
html[data-tbp-theme="dark"] body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__empty-state h2 {
  color: #edf3ed !important;
}

@media (max-width: 640px) {
  html body.woocommerce-account.tbp-flow-orders .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message),
  html body.woocommerce-account.tbp-flow-orders .woocommerce-notices-wrapper :is(.woocommerce-info, .woocommerce-message) {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 0 22px !important;
    padding: 16px !important;
  }

  html body.woocommerce-account.tbp-flow-orders :is(.woocommerce-info, .woocommerce-message) .button,
  html body.woocommerce-account.tbp-flow-orders :is(.woocommerce-info, .woocommerce-message) a.button {
    width: 100% !important;
    white-space: normal !important;
  }

  html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders {
    padding: 0 12px 34px !important;
  }

  html body.woocommerce-account.tbp-flow-orders .tbp-flow-orders__empty-state {
    min-height: 230px;
    padding: 30px 20px 26px;
  }
}

/* ------------------------------------------------------------------ *
 * Gestione profilo: il form WooCommerce aveva una colonna utile troppo
 * stretta e lasciava i campi ad affidarsi ai soli placeholder. La pagina
 * diventa una scheda unica, con sezioni riconoscibili e una griglia che
 * sfrutta davvero lo spazio disponibile.
 * ------------------------------------------------------------------ */
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto 36px !important;
  padding: clamp(24px, 4vw, 46px) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 24px !important;
  border: 1px solid #d9e5de !important;
  border-radius: 24px !important;
  background: #f6f9f7 !important;
  color: #173c2b !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > h1,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p.descrizione,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > fieldset,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > .tbp-account-photo,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > .clear,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p:last-child {
  grid-column: 1 / -1 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > h1 {
  margin: 0 0 10px !important;
  color: #084828 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em;
  line-height: 1.05 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p.descrizione {
  max-width: 680px;
  margin: 0 0 32px !important;
  color: #5d786b !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p.form-row {
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p.form-row > label,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset label {
  display: block !important;
  margin: 0 0 7px !important;
  color: #173c2b !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p.form-row input,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset input,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset select,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset .select2-selection {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border: 1px solid #cbdad1 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #173c2b !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p.form-row input:focus,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset input:focus,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset select:focus {
  border-color: #084828 !important;
  box-shadow: 0 0 0 3px rgb(8 72 40 / 13%) !important;
  outline: 0 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > .tbp-account-photo,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > fieldset.tbp-account-billing-data,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > fieldset.tbp-account-billing-address,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > fieldset:not(.tbp-account-photo):not(.tbp-account-billing-data):not(.tbp-account-billing-address) {
  min-width: 0 !important;
  margin: 14px 0 0 !important;
  padding: 28px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #d9e5de !important;
  background: transparent !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset > legend {
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: #084828 !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .tbp-account-photo__row {
  grid-template-columns: 104px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .tbp-account-photo__preview,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .tbp-account-photo__preview img {
  width: 104px !important;
  height: 104px !important;
  border-radius: 16px !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .tbp-account-photo__control input[type="file"] {
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .tbp-account-photo__control p {
  max-width: 600px;
  margin: 8px 0 0 !important;
  color: #5d786b !important;
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .woocommerce-address-fields,
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .woocommerce-address-fields__field-wrapper {
  margin: 0 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .woocommerce-address-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 24px !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .woocommerce-address-fields__field-wrapper .form-row {
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .woocommerce-address-fields__field-wrapper .form-row-wide {
  grid-column: 1 / -1 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > fieldset:not(.tbp-account-photo):not(.tbp-account-billing-data):not(.tbp-account-billing-address) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 24px !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > fieldset:not(.tbp-account-photo):not(.tbp-account-billing-data):not(.tbp-account-billing-address) > legend {
  grid-column: 1 / -1 !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p:last-child {
  display: flex !important;
  justify-content: flex-end;
  margin: 28px 0 0 !important;
  padding-top: 24px !important;
  border-top: 1px solid #d9e5de !important;
}

html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p:last-child button[type="submit"] {
  min-height: 50px !important;
  margin: 0 !important;
  padding: 13px 26px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #084828 !important;
  color: #fff !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm {
  border-color: #365444 !important;
  background: #1b2a22 !important;
  color: #edf3ed !important;
}

html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > h1,
html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset > legend,
html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p.form-row > label,
html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset label {
  color: #edf3ed !important;
}

html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p.descrizione,
html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .tbp-account-photo__control p {
  color: #b8c9bd !important;
}

html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > fieldset,
html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p:last-child {
  border-top-color: #365444 !important;
}

html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p.form-row input,
html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset input,
html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset select,
html[data-tbp-theme="dark"] body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm fieldset .select2-selection {
  border-color: #496453 !important;
  background: #24382c !important;
  color: #edf3ed !important;
}

@media (max-width: 760px) {
  html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 0 24px !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > fieldset:not(.tbp-account-photo):not(.tbp-account-billing-data):not(.tbp-account-billing-address) {
    grid-template-columns: 1fr !important;
  }

  html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .woocommerce-address-fields__field-wrapper .form-row-wide {
    grid-column: auto !important;
  }

  html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .tbp-account-photo__row {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .tbp-account-photo__preview,
  html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm .tbp-account-photo__preview img {
    width: 88px !important;
    height: 88px !important;
  }

  html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p:last-child {
    justify-content: stretch;
  }

  html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > p:last-child button[type="submit"] {
    width: 100% !important;
  }
}

/* ------------------------------------------------------------------ *
 * Banner delle pagine informative: l'immagine di sfondo restava alla sua
 * larghezza naturale (209px in un riquadro da 331) e lasciava una fascia
 * vuota accanto. Deve riempire il riquadro.
 * ------------------------------------------------------------------ */

html body .tbp-info-page .banner-bg.fill > img,
html body .tbp-info-page .banner-bg.fill > img.bg,
html body .banner .banner-bg.fill > img.bg {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ------------------------------------------------------------------ *
 * Sfondo del sito: velatura tricolore al posto del bianco.
 *
 * Il colore sta su un solo strato fisso dietro tutto, così non si ripete,
 * non scorre e non va ridisegnato a ogni scroll. I quattro contenitori che
 * prima dipingevano il bianco (html, body, #wrapper, #main) diventano
 * trasparenti, altrimenti il gradiente si vedrebbe solo ai bordi.
 * ------------------------------------------------------------------ */

html body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: var(--tbp-flag-wash);
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

/* Selettori con la classe di pagina: diverse pagine dipingono il salvia su
   `body.single-esperienze`, `body.mio-account` e simili, e vincono su un
   semplice `html body`. */
html,
html body,
html body[class],
html body[class] #wrapper,
html body[class] #main,
html body[class] main,
html body[class] .page-wrapper,
html body[class] .content-area,
html body[class] #content,
html body[class] > div[id] {
  background-color: transparent !important;
  background-image: none !important;
}

/* Superfici di pagina che restavano bianche con regole piu' forti: qui si
   nominano con l'ID o con la classe piena, cosi' la velatura passa ovunque. */
html body[class] div#wrapper,
html body[class] div#main,
html body[class] main#main {
  background-color: transparent !important;
  background-image: none !important;
}

/* ------------------------------------------------------------------ *
 * Ma non sotto quello che si legge (Elind, 13/9).
 *
 * La velatura passava anche dietro le colonne di testo. Su uno schermo
 * stretto la colonna e' tutta la pagina, quindi il rosa arrivava dietro la
 * descrizione; e siccome il riquadro del corpo ha angoli tondi e un'ombra
 * ma era trasparente, si leggeva come una scatola vuota appoggiata sopra un
 * colore. Parole sue: «grafiche strane che si vedono dietro come se fossero
 * dei moduli».
 *
 * Il tricolore resta dov'e' un'atmosfera — ai margini, dietro la testata,
 * nelle pagine senza colonna — e si spegne dove c'e' da leggere. Il riquadro
 * torna un riquadro: fondo pieno, e l'ombra che aveva gia' adesso ha senso.
 * ------------------------------------------------------------------ */
html body[class] .woocommerce-MyAccount-content,
html body[class] .corpo.tbp-exp-corpo,
html body[class] .tbp-info-page {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

/* Il pannello di accesso e' un foglio fisso sopra la pagina: se fosse
   trasparente si vedrebbe il footer sotto. Porta la velatura con se'. */
html body.tbp-auth-flow.tbp-flow-fullscreen :is(.account-register-inner, .account-login-inner),
html body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune, .registrazione-confermata) :is(.account-register-inner, .account-login-inner) {
  background: var(--tbp-flag-wash) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* I pannelli fissi hanno bisogno del proprio colore: essendo sopra lo strato
   di sfondo, la velatura non li raggiunge. */
html body.tbp-wizard-fullscreen form.tbp-wizard-flow,
html body.tbp-auth-flow.tbp-flow-fullscreen {
  background: var(--tbp-flag-wash) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Il footer verde e le card scure restano quelli che sono. */

/* ------------------------------------------------------------------ *
 * Intestazione e cassetto sulla stessa velatura.
 * L'intestazione diventa trasparente e lascia passare lo strato fisso.
 * Il cassetto è un pannello sopra la pagina: porta la velatura con sé,
 * altrimenti si vedrebbe il sito sotto.
 * ------------------------------------------------------------------ */

html body[class] :is(#masthead, #header, .header-wrapper, .header-main, .header-bg-container, .header-bg-color, .header-top, .header-bottom) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[class] :is(#main-menu, .mobile-sidebar, .off-canvas-center .mfp-content, .off-canvas .mfp-content, #main-menu .sidebar-menu) {
  background: var(--tbp-flag-wash) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* ------------------------------------------------------------------ *
 * Dove e Quando: nessun riquadro quando ci si clicca dentro.
 * Il contorno resta solo per chi naviga da tastiera, che altrimenti non
 * saprebbe dove si trova.
 * ------------------------------------------------------------------ */

html body form.tbp-home-search .tbp-home-search__field:focus-within,
html body form.tbp-home-search .tbp-home-search__field:hover {
  border-color: rgb(209 213 219) !important;
  box-shadow: none !important;
}

html body form.tbp-home-search :is(input, .tbp-home-search__date-control):focus,
html body form.tbp-home-search input:focus:not(:focus-visible),
html body form.tbp-home-search input[type="date"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

html body form.tbp-home-search input:focus-visible,
html body form.tbp-home-search input[type="date"]:focus-visible {
  outline: 2px solid rgb(100 116 139) !important;
  outline-offset: 2px !important;
}

/* ------------------------------------------------------------------ *
 * Home: le sedici categorie su otto per riga, due file pari, e più
 * respiro fra immagine, ricerca, categorie e catalogo.
 * ------------------------------------------------------------------ */

@media (min-width: 900px) {
  html body.home .tbp-home-cats {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body.home .tbp-home-cats__item {
    flex: initial !important;
    width: 100% !important;
    max-width: none !important;
  }
}

html body.home .tbp-page-hero--home .tbp-page-hero__visual {
  margin-bottom: 44px !important;
}

html body.home .tbp-home-search {
  margin-bottom: 40px !important;
}

html body.home .tbp-home-cats {
  margin-bottom: 48px !important;
}

/* ------------------------------------------------------------------ *
 * Logo nell'intestazione: con lo sfondo del sito diventato una velatura,
 * il pittogramma restava trasparente e volti e cielo prendevano il colore
 * della pagina. Torna su una tessera bianca, quadrata, con il raggio
 * generoso dei quadrati arrotondati.
 * ------------------------------------------------------------------ */

html body[class] img.tbp-brand-lockup__mark,
html body[class] img.header_logo.tbp-brand-lockup__mark,
html body[class] :is(#masthead, .header-main, .logo, .brand) img.tbp-brand-lockup__mark {
  aspect-ratio: 1 / 1 !important;
  padding: 5px !important;
  border-radius: 22% !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
}

/* Footer: la voce «Mappa» porta la sua icona (la home ora e' la mappa). */
html body .tbp-mega-footer__list a[data-has-icon] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body .tbp-mega-footer__list .tbp-mega-footer__icon {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  object-fit: contain !important;
}

/* Cerca: card tutte orizzontali (5:4) al posto delle verticali 3:5 (Elind, 11/9).
   Una colonna sul telefono, due dal tablet in su: con tre colonne titolo,
   prezzo e professionista coprivano quasi tutta la foto. Il Feed resta a
   mosaico: queste regole valgono solo per la pagina Cerca. I selettori
   superano quelli di tbp-discovery-cards.css (1,1,2) e public-rating.css
   (1,4,2), che fissano 3:5 e l'altezza sul telefono. */
html body.tbp-core-cerca #tbp-results-container .grid-risultati.grid-risultati.grid-risultati {
  grid-template-columns: minmax(0, 1fr) !important;
  /* Sul telefono tbp-video-preview.css (1,3,3) fissava righe da 384px: con
     le card 5:4 restava una fascia vuota sotto la foto. */
  grid-auto-rows: auto !important;
  max-width: 560px !important;
}
@media (min-width: 700px) {
  html body.tbp-core-cerca #tbp-results-container .grid-risultati.grid-risultati.grid-risultati {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    max-width: 1120px !important;
  }
}
html body.tbp-core-cerca #tbp-results-container .grid-risultati .tbp-exp-card.tbp-exp-card {
  grid-column: auto !important;
  grid-row: auto !important;
  height: auto !important;
  min-height: 0 !important;
}
html body.tbp-core-cerca #tbp-results-container .grid-risultati .tbp-exp-card.tbp-exp-card .tbp-exp-card__media {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 5 / 4 !important;
}
/* Sul telefono, a una colonna, le card di Cerca sono quadrate: in 5:4 il
   prezzo delle card con titolo lungo toccava la foto del professionista. */
@media (max-width: 699px) {
  html body.tbp-core-cerca #tbp-results-container .grid-risultati .tbp-exp-card.tbp-exp-card .tbp-exp-card__media {
    aspect-ratio: 1 / 1 !important;
  }
}

/* Cerca, filtri: la descrizione parte sulla stessa riga del titolo della
   sezione (si risparmia una riga per sezione) e tra le sezioni c'e' un po'
   piu' d'aria (Elind, 11/9). */
html body.tbp-core-cerca #tbp-filter-form .tbp-filter-section__head .tbp-filter-section__title,
html body.tbp-core-cerca #tbp-filter-form .tbp-search-query-head label.tbp-filter-section__title {
  display: inline !important;
  margin: 0 .4em 0 0 !important;
}
html body.tbp-core-cerca #tbp-filter-form .tbp-filter-section__head .tbp-filter-section__lead {
  display: inline !important;
  margin: 0 !important;
}
html body.tbp-core-cerca #tbp-filter-form .tbp-filter-section__head {
  margin: 0 0 10px !important;
}
html body.tbp-core-cerca #tbp-filters-panel {
  row-gap: 26px !important;
}
html body.tbp-core-cerca #tbp-filter-form .tbp-more-filters__grid {
  row-gap: 24px !important;
}

/* Categorie: al massimo due. Il messaggio compare sotto la fila. */
html body.tbp-core-cerca .tbp-cat-limit {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff7e0;
  color: #6b4e00;
  font: 600 13px/1.35 var(--tbp-font, Manrope, sans-serif);
}
html body.tbp-core-cerca .tbp-cat-limit[hidden] {
  display: none !important;
}

/* Feed: il mosaico non parte attaccato all'intestazione. */
html body.tbp-feed-page #tbp-home-feed {
  padding-top: 10px !important;
}
@media (min-width: 850px) {
  html body.tbp-feed-page #tbp-home-feed {
    padding-top: 32px !important;
  }
}

/* ------------------------------------------------------------------ *
 * Avvisi WooCommerce (11/9): Woo mette a fuoco da solo il primo avviso
 * perche' i lettori di schermo lo annuncino. Su un riquadro che non si
 * clicca l'anello del browser (colore d'accento del Mac, rosso per Elind)
 * sembrava una cornice rotta intorno all'avviso.
 * ------------------------------------------------------------------ */
html body :is(.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-notices-wrapper, .tbp-auth-notices)[tabindex="-1"]:focus,
html body :is(.woocommerce-message, .woocommerce-error, .woocommerce-info):focus {
  outline: none !important;
}

/* ------------------------------------------------------------------
 * Bersagli da toccare (12/9): con il dito servono almeno 34px. Le
 * valutazioni sotto le card erano piu' basse:
 * si allarga l'area sensibile senza cambiare l'aspetto.
 * ------------------------------------------------------------------ */
@media (pointer: coarse) {
  html body a.tbp-card-rating {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-block: -5px;
  }
  /* 29/9: il tasto «Riduci» della barra non c'e' piu'. */
}

/* ------------------------------------------------------------------
 * Una spunta sola (12/9). Su iPhone tornava fuori anche il disegno di
 * sistema e si vedevano due «V» dentro la stessa casella. Qui il disegno
 * nativo si spegne con peso da ID, cosi' resta solo la nostra.
 * ------------------------------------------------------------------ */
html body :is(#main, #wrapper, #wcfm-main-contentainer, .wc-setup-content, .tbp-legal-checkboxes, .tbp-onboarding-legal-checkboxes) input[type="checkbox"],
html body input[type="checkbox"].tbp-onboarding-legal-checkboxes__input,
html body input[type="checkbox"].tbp-registration-legal__input,
html body input[type="checkbox"].tbp-legal-checkbox {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Nessun segno di spunta disegnato con i caratteri sopra la casella. */
html body :is(#main, #wrapper, #wcfm-main-contentainer, .wc-setup-content) input[type="checkbox"]::before,
html body :is(#main, #wrapper, #wcfm-main-contentainer, .wc-setup-content) input[type="checkbox"]::after {
  content: none !important;
}

/* Le pagine di guida, riscritte il 12/9 sui testi legali veri: hanno un
   attacco, una tabella dei livelli di rischio e la riga che rimanda al testo
   che vale. Prima non esistevano perche' le pagine erano di tre righe. */

html body .tbp-guide__intro {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--tbp-verde-scuro, #084828);
  max-width: 62ch;
  margin: 0 0 26px;
}

html body .tbp-guide section { margin: 0 0 26px; }

html body .tbp-guide ul {
  margin: 0 0 16px;
  padding-left: 1.15em;
}

html body .tbp-guide li {
  margin-bottom: 7px;
  line-height: 1.55;
}

/* La riga che dice quale testo vale davvero: si legge, non urla. */
html body .tbp-guide__nota {
  margin: 34px 0 20px;
  padding: 14px 16px;
  background: #F1F5F2;
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.5;
  color: #45544C;
}

/* La tabella dei livelli: su un telefono si scorre, non si spezza. */
html body .tbp-tabella-scorrevole {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 18px;
  border: 1px solid #DDE6E0;
  border-radius: 12px;
}

html body table.tbp-tabella {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .94rem;
  margin: 0;
}

html body table.tbp-tabella th,
html body table.tbp-tabella td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid #E6EDE8;
  line-height: 1.45;
}

html body table.tbp-tabella thead th {
  background: #F1F5F2;
  font-weight: 600;
  color: #084828;
  white-space: nowrap;
}

html body table.tbp-tabella tbody tr:last-child td { border-bottom: 0; }

/* Il testo sotto gli elenchi di persone. */
html body .tbp-dir-page__testo {
  margin: 44px auto 0;
  padding-top: 32px;
  border-top: 1px solid #DDE6E0;
  max-width: 760px;
}

/* La lettera agli investitori (12/9): numeri che fanno da spina dorsale, i tre
   clienti come definizioni, e la ripartizione del ricavo come barra — non una
   torta, perche' sono due sole quantita' e il confronto si legge meglio dritto. */

html body .tbp-cifre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 1px;
  background: #DDE6E0;
  border: 1px solid #DDE6E0;
  border-radius: 12px;
  overflow: hidden;
  margin: 22px 0 10px;
}

html body .tbp-cifra { background: #fff; padding: 18px 16px; }

html body .tbp-cifra b {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #145E3F;
  margin-bottom: 5px;
}

html body .tbp-cifra span {
  display: block;
  font-size: .82rem;
  line-height: 1.4;
  color: #55655D;
}

html body .tbp-fonte {
  font-size: .82rem;
  line-height: 1.5;
  color: #6A7972;
  margin: 0 0 22px;
}

html body dl.tbp-clienti { margin: 20px 0 8px; }

html body dl.tbp-clienti dt {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A6212;
  padding-top: 16px;
  border-top: 1px solid #DDE6E0;
  margin: 0 0 5px;
}

html body dl.tbp-clienti dd {
  margin: 0 0 16px;
  line-height: 1.55;
  font-size: .97rem;
}

html body .tbp-barra {
  display: flex;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #DDE6E0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 18px 0 8px;
}

html body .tbp-barra > div { display: grid; place-items: center; }
html body .tbp-barra__artigiano { flex: 70; background: #145E3F; color: #fff; }
html body .tbp-barra__piattaforma { flex: 30; background: #F3EDDF; color: #8A6212; }

html body .tbp-rilievo {
  padding: 4px 0 4px 18px;
  margin: 24px 0;
  line-height: 1.6;
}

html body .tbp-lettera .tbp-guide__intro { font-size: 1.2rem; }

/* ------------------------------------------------------------------------ */
/* La scheda sopra la mappa (Elind, 13/9, due volte).                         */
/*                                                                            */
/* Il plugin la rimpicciolisce: `.tbp-map-feedcard { width: 272px;            */
/* zoom: .72 }`. A quel punto non si legge piu' niente — parole di Elind      */
/* guardandola. Qui torna a grandezza naturale.                               */
/*                                                                            */
/* E si ferma qui. Per mezza giornata c'erano anche quattro regole mie che    */
/* la facevano orizzontale, le imponevano una foto 16/10 e nascondevano il    */
/* professionista e le etichette: sembrava giusto, sopra una mappa lo spazio  */
/* che manca e' quello verticale. Con un titolo lungo — «Dentro la Ginevra    */
/* internazionale: scopri le Nazioni Unite (ONU), la sua diplomazia e perche' */
/* esiste» — la card si sfasciava: il titolo copriva la foto, il prezzo       */
/* finiva sopra le recensioni. Elind: «riprendi la card uguale come e' nel    */
/* feed perche' cosi' non va». Tolte. La card del feed sa gia' stare in piedi */
/* con qualunque titolo, ed e' l'unico posto dove quel lavoro va fatto.       */
/* ------------------------------------------------------------------------ */

/* Map shell sizing now belongs to map-archivio.css; column card geometry
   is shared with the feed in tbp-feed-viste.css. */

/* ─────────────────────────────────────────────────────────────────────────
   Cerca: «Dove» e «Quando» partivano da altezze diverse (Elind, 13/9).
   La causa non e' la casella: e' il testino sotto il titolo. «Scegli una
   data, oppure lasciala vuota se sei flessibile.» va a capo su due righe,
   «Cerca una citta' o un Paese...» sta su una, e siccome #tbp-filters-panel
   ha align-items:start ogni sezione si tiene la sua altezza: la seconda
   casella scende di una riga di testo.
   Non si aggiusta con un'altezza fissa sul testino, perche' in tedesco o in
   francese le righe diventano tre.
   La soluzione esiste gia' in tbp-search-engine.css (file di Codex, non si
   tocca): subgrid, applicata pero' solo a .tbp-more-filters__grid. Qui la
   si estende al pannello principale — stesso meccanismo, stesso @supports,
   stesso punto di rottura. Titolo e testino condividono la prima riga della
   griglia, quindi le due caselle partono dalla stessa altezza qualunque cosa
   ci sia scritto sopra. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 740px) {
    html body.tbp-core-cerca #tbp-filter-form #tbp-filters-panel > .tbp-filter-section {
      /* !important perche' tbp-search-engine.css impone display:block !important
         sulle sezioni, e senza display:grid la subgrid non parte proprio. */
      display: grid !important;
      grid-template-rows: subgrid;
      grid-row: span 2;
      align-self: stretch;
      row-gap: 0;
    }
    html body.tbp-core-cerca #tbp-filter-form #tbp-filters-panel > .tbp-filter-section > :not(.tbp-filter-section__head) {
      align-self: start;
    }
  }
}

/* ------------------------------------------------------------------------ */
/* Da computer, niente lastre bianche sopra la mappa (Elind, 13/9).           */
/*                                                                            */
/* La barra di navigazione e la voce attiva sono state svuotate nel file che  */
/* le possiede (tbp-core-app.css), il cartiglio del claim nel suo             */
/* (tbp-home-map.css). Restano due che stanno altrove: il riquadro bianco     */
/* dietro il pittogramma, definito piu' su in questo stesso foglio, e la      */
/* pillola dello scelta-lingua, che arriva dal plugin delle traduzioni con    */
/* `!important` e va ribattuta da qui.                                        */
/* ------------------------------------------------------------------------ */

@media (min-width: 850px) {
	html body[class] img.tbp-brand-lockup__mark,
	html body[class] img.header_logo.tbp-brand-lockup__mark,
	html body[class] :is(#masthead, .header-main, .logo, .brand) img.tbp-brand-lockup__mark {
		padding: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	html body .tbp-header-desktop-slot--lingue nav.tbp-language-switcher--desktop {
		background: transparent !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   Cerca: le dodici sezioni si numerano e si separano (Elind, 13/9).
   «E' giusto che sia compatto, ma uno si perde.»

   Il markup sta in plugins/filtro-esperienze, che e' di Codex e non si
   tocca: il numero lo mette un contatore CSS, che conta i titoli in ordine
   di documento. Sono 1 Attivita' o interesse, 2 Dove, 3 Quando, poi le nove
   dei filtri estesi fino a 12 Categorie. Se domani Codex ne aggiunge o ne
   toglie una, la numerazione si aggiusta da sola: non c'e' nessun elenco da
   tenere allineato a mano, ed e' il motivo per cui si fa cosi' e non
   scrivendo i numeri nei titoli.

   Le righe di separazione stanno SOPRA ogni sezione, non intorno: il
   pannello e' volutamente senza riquadri — il foglio di Codex toglie sfondi
   e bordi dappertutto — e rimetterli qui contraddirebbe quella scelta. Una
   riga sottile divide senza incorniciare.

   Si allineano perche' le sezioni di una stessa fila partono tutte dalla
   stessa altezza: e' la subgrid messa poco sopra per Dove/Quando e quella
   che Codex aveva gia' per i filtri estesi. Senza, le righe uscirebbero
   sfalsate.

   Il !important serve: tbp-search-engine.css impone padding:0 e border:0
   con !important sulle sezioni. */

html body.tbp-core-cerca #tbp-filter-form {
  counter-reset: tbp-sez;
}

/* Il numero. Pastiglia tenue invece di un pallino pieno: dodici cerchi
   scuri di fila peserebbero piu' del testo che devono ordinare. */
html body.tbp-core-cerca #tbp-filter-form .tbp-filter-section__title::before {
  counter-increment: tbp-sez;
  content: counter(tbp-sez);
  display: inline-block;
  min-width: 1.15em;
  margin-inline-end: .5em;
  padding: .05em .38em;
  border-radius: 999px;
  background: rgb(8 72 40 / 9%);
  color: #084828;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  /* Dentro la riga di testo del titolo: se sporgesse, alzerebbe la testata
     e le sezioni della stessa fila non partirebbero piu' insieme. */
  line-height: inherit;
  vertical-align: baseline;
}

/* La riga che separa una fila dalla precedente. La prima sta sotto il campo
   di ricerca e serve: divide «che cosa cerchi» da «con quali filtri». */
html body.tbp-core-cerca #tbp-filter-form .tbp-filter-section {
  padding-top: 14px !important;
  border-top: 1px solid rgb(8 72 40 / 11%) !important;
}

/* Le sezioni dei filtri estesi stanno in una griglia annidata: la riga va
   messa a loro, non al contenitore, altrimenti se ne vedrebbe una sola per
   tutto il blocco invece di una per fila. */
html body.tbp-core-cerca #tbp-filter-form .tbp-more-filters {
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Su telefono le sezioni sono incolonnate: la riga sopra ognuna diventa un
   elenco verticale, ed e' esattamente la lettura che serve li'. */
@media (max-width: 739px) {
  html body.tbp-core-cerca #tbp-filter-form .tbp-filter-section {
    padding-top: 12px !important;
  }
}

/* Card selection keeps shadow feedback without moving the card.
   Swipe/media and Leaflet transforms remain owned by their components. */

html body :is(#tbp-results-container, .tbp-exp-card-scope) .tbp-exp-card,
html body :is(#tbp-results-container, .tbp-exp-card-scope) article.card-esperienza,
html body :is(#tbp-results-container, .tbp-exp-card-scope) a.card-esperienza {
  transition: box-shadow .16s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html body :is(#tbp-results-container, .tbp-exp-card-scope) .tbp-exp-card:hover,
  html body :is(#tbp-results-container, .tbp-exp-card-scope) .tbp-exp-card:focus-visible,
  html body :is(#tbp-results-container, .tbp-exp-card-scope) article.card-esperienza:hover,
  html body :is(#tbp-results-container, .tbp-exp-card-scope) a.card-esperienza:hover,
  html body :is(#tbp-results-container, .tbp-exp-card-scope) a.card-esperienza:focus-visible {
    box-shadow: 0 14px 30px rgba(8, 72, 40, 0.20) !important;
  }
}

@media (hover: none) {
  html body :is(#tbp-results-container, .tbp-exp-card-scope) .tbp-exp-card:active:not(.is-dragging),
  html body :is(#tbp-results-container, .tbp-exp-card-scope) article.card-esperienza:active:not(.is-dragging),
  html body :is(#tbp-results-container, .tbp-exp-card-scope) a.card-esperienza:active:not(.is-dragging) {
    box-shadow: 0 14px 30px rgba(8, 72, 40, 0.20) !important;
  }
}


/* ============================================================
   Scheda attivita': il prezzo sopra il titolo, e grande (13/9)
   ============================================================
   Elind, davanti alla scheda di una tostatura di caffe': «porta sopra il
   prezzo e fallo piu' grande».

   Vale solo qui, non nelle card di scoperta. Nel feed il prezzo sta sotto al
   nome (12/9) perche' chi sfoglia cerca prima che cosa si fa; ma chi e' dentro
   la scheda ha gia' scelto l'attivita' e la domanda che gli resta e' quanto
   costa. Sono due momenti diversi, e la variante .tbp-exp-card--scheda le
   tiene separate senza toccare il file candidato.

   Nessuna modifica al codice: la testata e' gia' una colonna flessibile
   (titolo, poi prezzo), quindi `order` basta a invertirli. Il titolo resta
   l'<h1> della pagina: cambia dove si disegna, non che cosa e'.

   La specificita' e' alta di proposito: il file candidato porta il prezzo a
   1.25rem con `:is(#id, .classe).tbp-exp-hero .tbp-exp-card__price`, e la
   nostra regola del 12/9 lo tiene piu' piccolo del titolo. Le si scavalca
   entrambe aggiungendo body.single-esperienze e la variante. */
html body.single-esperienze :is(#tbp-results-container, .tbp-exp-card-scope) .tbp-exp-card--scheda .tbp-exp-card__price {
  order: -1 !important;
  margin: 0 0 2px !important;
  font-size: clamp(1.55rem, 6.8vw, 2rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  /* «€45» accanto a «€128»: le cifre alla stessa larghezza non ballano. */
  font-variant-numeric: tabular-nums !important;
}

/* Il titolo non cambia dimensione — cambia solo l'ordine — ma con il prezzo
   sopra serve un filo d'aria in mezzo, altrimenti le due righe si toccano. */
html body.single-esperienze :is(#tbp-results-container, .tbp-exp-card-scope) .tbp-exp-card--scheda .tbp-exp-card__head {
  gap: 2px !important;
}

/* Conseguenza dello scambio, da rimediare subito. Sotto i 1024 px la testata
   e' appoggiata sulla fotografia (sopra e' un blocco bianco: lo decide
   tbp-experience-desktop.css con `position: static`). La sfumatura che
   protegge il testo bianco e' disegnata sull'altezza della testata stessa e
   arriva a zero in fondo: col prezzo grande in prima riga il titolo scivola
   dove la sfumatura e' ormai finita, e la seconda riga finisce sul cielo.
   Si allunga la parte scura invece di scurire tutta la foto. */
@media (max-width: 1023px) {
  html body.single-esperienze :is(#tbp-results-container, .tbp-exp-card-scope) .tbp-exp-card--scheda .tbp-exp-card__head {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.42) 58%, rgba(0, 0, 0, 0.14) 86%, transparent 100%) !important;
  }
}

/* SoftGlass registration symbol: approved profile mark with a visible plus. */
html body .tbp-icon-register,
html body .tbp-icon-register.tbp-lava-icon {
  position: relative !important;
  display: inline-block !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
}

/* Hub cards provide the 64px slot; give the absolute layers a real canvas. */
html body .tbp-icon-register:not(.tbp-lava-icon) {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html body .tbp-icon-register > .tbp-icon-composite__profile {
  position: absolute !important;
  inset: 9% !important;
  width: 82% !important;
  height: 82% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  z-index: 1 !important;
}

html body .tbp-icon-register > .tbp-icon-composite__plus {
  position: absolute !important;
  right: 1% !important;
  bottom: 1% !important;
  display: grid !important;
  place-items: center !important;
  width: 40% !important;
  height: 40% !important;
  padding: 5% !important;
  box-sizing: border-box !important;
  border: 2px solid var(--tbp-green, #084828) !important;
  border-radius: 50% !important;
  background: var(--tbp-white, #fff) !important;
  box-shadow: 0 2px 5px rgba(8, 72, 40, 0.22) !important;
  z-index: 2 !important;
}

html body .tbp-icon-register > .tbp-icon-composite__plus img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
}

/* In the drawer a legacy rule sizes every direct image to 80px.  The
   registration wrapper is intentionally a 48px slot, so keep its profile
   layer inside that slot instead of letting the face spill out and clip. */
html body .off-canvas-center .login-registrazione a .tbp-icon-register > .tbp-icon-composite__profile,
html body .off-canvas-center .nav-vertical > li > a .tbp-icon-register > .tbp-icon-composite__profile,
html body .off-canvas-center .tbp-account-shortcuts a .tbp-icon-register > .tbp-icon-composite__profile {
  width:82% !important;
  height:82% !important;
  max-width:none !important;
  max-height:none !important;
}
html body .mfp-wrap.off-canvas-center #main-menu .login-registrazione a .tbp-icon-register > .tbp-icon-composite__profile {
  width:82% !important;
  height:82% !important;
  max-width:none !important;
  max-height:none !important;
}

html[data-tbp-theme="dark"] body .tbp-icon-register > .tbp-icon-composite__plus {
  border-color: rgba(255, 255, 255, 0.82) !important;
  background: #f5f8f6 !important;
}

/* Scegli il profilo: la riga sotto «Continua» spiega perche' e' spento. */
html body.scegli-ruolo .tbp-role-actions .tbp-role-hint {
  display: block;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #5b6b62;
  text-align: center;
}
html body.scegli-ruolo .tbp-role-actions .tbp-role-hint[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Calendario di Cerca (flatpickr): niente cerchietti verdi su ogni giorno
   (era il bordo trasparente di flatpickr colorato dal rebrand), giorni come
   caselle pulite, il selezionato pieno, oggi con un punto (Elind, 20/9). */
html body .flatpickr-calendar {
  width: min(100vw - 24px, 372px) !important;
  padding: 10px 8px 12px !important;
  border: 1px solid #dfe7e2 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px -12px rgba(8, 72, 40, 0.28) !important;
  font-family: var(--tbp-font, Manrope, sans-serif) !important;
}
html body .flatpickr-calendar.arrowTop::before,
html body .flatpickr-calendar.arrowTop::after,
html body .flatpickr-calendar.arrowBottom::before,
html body .flatpickr-calendar.arrowBottom::after { display: none !important; }
html body .flatpickr-months { align-items: center !important; padding: 0 4px 6px !important; }
html body .flatpickr-months .flatpickr-month { height: 40px !important; }
html body .flatpickr-current-month {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  padding: 0 !important; height: 40px !important;
  font-size: 17px !important; font-weight: 700 !important; color: #084828 !important;
}
html body .flatpickr-current-month .flatpickr-monthDropdown-months,
html body .flatpickr-current-month input.cur-year,
html body .flatpickr-current-month .numInputWrapper {
  font: inherit !important; color: inherit !important; background: transparent !important;
  border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: auto !important;
}
html body .flatpickr-current-month .numInputWrapper { width: 4.2ch !important; }
html body .flatpickr-current-month .numInputWrapper span { display: none !important; }
html body .flatpickr-months .flatpickr-prev-month,
html body .flatpickr-months .flatpickr-next-month {
  position: static !important; width: 40px !important; height: 40px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 12px !important; color: #084828 !important;
}
html body .flatpickr-months .flatpickr-prev-month svg,
html body .flatpickr-months .flatpickr-next-month svg { width: 16px !important; height: 16px !important; fill: #084828 !important; }
html body .flatpickr-weekdays { height: 28px !important; }
html body span.flatpickr-weekday {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; color: #6b7c72 !important; background: transparent !important;
}
html body .flatpickr-days, html body .dayContainer { width: 100% !important; min-width: 0 !important; max-width: none !important; }
html body .dayContainer { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 2px 0 !important; padding: 2px 0 0 !important; }
html body .flatpickr-day {
  width: auto !important; max-width: none !important; height: 42px !important; line-height: 42px !important;
  margin: 0 !important; border: 0 !important; border-radius: 12px !important;
  font-size: 15px !important; font-weight: 600 !important; color: #143d2b !important;
  background: transparent !important; box-shadow: none !important;
}
html body .flatpickr-day.prevMonthDay,
html body .flatpickr-day.nextMonthDay { color: #b3c0b8 !important; font-weight: 500 !important; }
html body .flatpickr-day.flatpickr-disabled,
html body .flatpickr-day.flatpickr-disabled:hover { color: #c3ccc7 !important; background: transparent !important; text-decoration: none !important; }
html body .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) { background: #eef4f0 !important; color: #084828 !important; }
html body .flatpickr-day.today:not(.selected) { position: relative !important; color: #084828 !important; }
html body .flatpickr-day.today:not(.selected)::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: #D0161A;
}
html body .flatpickr-day.selected,
html body .flatpickr-day.selected:hover,
html body .flatpickr-day.startRange,
html body .flatpickr-day.endRange { background: #084828 !important; color: #fff !important; border: 0 !important; }
html[data-tbp-theme="dark"] body .flatpickr-calendar { background: #1e1e1e !important; border-color: #3a4a41 !important; }
html[data-tbp-theme="dark"] body .flatpickr-day { color: #e6ede9 !important; }
html[data-tbp-theme="dark"] body .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) { background: #2a3630 !important; color: #fff !important; }
html[data-tbp-theme="dark"] body .flatpickr-current-month,
html[data-tbp-theme="dark"] body .flatpickr-months .flatpickr-prev-month,
html[data-tbp-theme="dark"] body .flatpickr-months .flatpickr-next-month { color: #e6ede9 !important; }
html[data-tbp-theme="dark"] body .flatpickr-months .flatpickr-prev-month svg,
html[data-tbp-theme="dark"] body .flatpickr-months .flatpickr-next-month svg { fill: #e6ede9 !important; }

/* ------------------------------------------------------------------ */
/* Il logotipo ToBePolo nel carattere del marchio (Oxanium, i file di Elena,
   20/9). Il CSS del tema lo chiedeva gia' ma il font non era caricato e
   usciva in un sans qualunque. */
@font-face {
  font-family: "Oxanium";
  src: url("../fonts/Oxanium-Bold.ttf") format("truetype");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oxanium";
  src: url("../fonts/Oxanium-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
html body .tbp-wordmark,
html body .tbp-wordmark__tobe,
html body .tbp-wordmark__polo,
html body .tbp-account-logotype {
  font-family: "Oxanium", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
html body .tbp-wordmark__tobe { color: #145E3F !important; -webkit-text-fill-color: #145E3F !important; }
html body .tbp-wordmark__polo { color: #D0161A !important; -webkit-text-fill-color: #D0161A !important; }
html[data-tbp-theme="dark"] body .tbp-wordmark__tobe { color: #edf3ed !important; -webkit-text-fill-color: #edf3ed !important; }

/* ------------------------------------------------------------------ *
 * Avvisi dell'account (23/9 notte, Elind: «i bordi del riquadro della
 * password sono UI e UX totalmente sbagliati»). Il doppio bordo era
 * l'anello di messa a fuoco (tolto in tbp-interaction-motion.css); qui
 * l'avviso diventa una fascia morbida, senza cornice pesante, con aria
 * sotto: prima toccava il titolo «Il tuo account ToBePolo».
 * ------------------------------------------------------------------ */
html body.woocommerce-account .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info),
html body.woocommerce-account .woocommerce > :is(.woocommerce-message, .woocommerce-info) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 24px !important;
  padding: 14px 18px !important;
  border: 1px solid #CFE3D7 !important;
  border-radius: 16px !important;
  background: #EEF6F1 !important;
  box-shadow: none !important;
  outline: none !important;
  color: #084828 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
html body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error,
html body.woocommerce-account .woocommerce > .woocommerce-error {
  margin: 0 0 24px !important;
  padding: 14px 18px !important;
  border: 1px solid #F1C7CB !important;
  border-radius: 16px !important;
  background: #FDF1F2 !important;
  box-shadow: none !important;
  outline: none !important;
  color: #9E1C27 !important;
  font-weight: 600 !important;
}
@layer tbp-appearance {
  html:is([data-tbp-theme="dark"], [data-tbp-theme="tobepolo"]) body.woocommerce-account .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info),
  html:is([data-tbp-theme="dark"], [data-tbp-theme="tobepolo"]) body.woocommerce-account .woocommerce > :is(.woocommerce-message, .woocommerce-info) {
    background: #16301f !important;
    border-color: #2c5a3e !important;
    color: #dff1e6 !important;
    -webkit-text-fill-color: #dff1e6 !important;
  }
}