/**
 * ToBePolo navigation — single visual source for the mobile app bar.
 * Icons use the shared content-icon token; labels occupy their own row.
 */

.tbp-app-bar,
.tbp-app-bar-veil {
  display: none;
}

@media (max-width: 849px) {
  :root {
    /* Barra sottile (29/9 sera): capsula alta 64 px che galleggia 10 px sopra il
       fondo, o appena sopra la lineetta dell'iPhone (area sicura meno 10 px). */
    --tbp-app-bar-pill: 64px;
    --tbp-app-bar-lift: max(10px, calc(env(safe-area-inset-bottom, 0px) - 10px));
    /* Spazio che la barra occupa sopra l'area sicura, con 8 px di respiro:
       chi aggiunge env(safe-area-inset-bottom) arriva 8 px sopra la capsula. */
    --tbp-app-bar-h: calc(var(--tbp-app-bar-pill) + var(--tbp-app-bar-lift) - env(safe-area-inset-bottom, 0px) + 8px);
    --tbp-app-bar-inset: 0px;
    --tbp-app-bar-side: max(16px, env(safe-area-inset-left, 0px));
    --tbp-app-bar-icon: 26px;
    --tbp-app-bar-lens-size: auto;
    --tbp-app-bar-radius: 32px;
    --tbp-app-bar-surface: rgba(255, 255, 255, .94);
    --tbp-app-bar-motion: 420ms;
    --tbp-app-bar-dim: 520ms;
  }

  :root {
    /* Spazio riservato in fondo alla pagina per la barra flottante. */
    --tbp-app-bar-reserve: calc(var(--tbp-app-bar-h) + var(--tbp-app-bar-inset) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* Lo spazio sta nel footer, non nel corpo pagina: cosi il verde del footer
     arriva sotto la barra e non resta una fascia bianca in fondo. */
  html body.tbp-has-app-bar {
    padding-bottom: 0 !important;
  }

  html body.tbp-has-app-bar footer#footer,
  html body.tbp-has-app-bar .footer-wrapper {
    padding-bottom: var(--tbp-app-bar-reserve) !important;
  }

  /* Pagine senza footer (flussi a schermo intero): lo spazio torna sul corpo. */
  html body.tbp-has-app-bar:not(.tbp-has-mega-footer) {
    padding-bottom: var(--tbp-app-bar-reserve) !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar-veil {
    display: block !important;
    position: fixed !important;
    z-index: 100001 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: calc(var(--tbp-app-bar-h) + var(--tbp-app-bar-inset) + env(safe-area-inset-bottom, 0px) + 56px) !important;
    pointer-events: none !important;
    background: linear-gradient(to top, rgba(244, 247, 245, .88), rgba(244, 247, 245, 0)) !important;
  }

  /* Nei flussi a schermo intero (accesso, recupero password, checkout) la
     barra non c'e': il velo sfocato restava sopra e appannava il bottone in
     fondo. */
  html body.tbp-flow-fullscreen.tbp-flow-fullscreen .tbp-app-bar-veil {
    display: none !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar {
    display: flex !important;
    position: fixed !important;
    z-index: 100002 !important;
    right: var(--tbp-app-bar-side) !important;
    bottom: calc(var(--tbp-app-bar-inset) + env(safe-area-inset-bottom, 0px)) !important;
    left: var(--tbp-app-bar-side) !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: auto !important;
    max-width: 430px !important;
    height: var(--tbp-app-bar-h) !important;
    margin: 0 auto !important;
    padding: 6px 10px !important;
    gap: 0 !important;
    isolation: isolate !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: var(--tbp-app-bar-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    /* Keep the viewport anchor out of the animated compositor layer. */
    animation: none;
    transform: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  html body.tbp-has-app-bar .tbp-app-bar__material {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border: 1px solid var(--tbp-glass-border) !important;
    border-radius: var(--tbp-app-bar-radius) !important;
    background: var(--tbp-app-bar-surface) !important;
    box-shadow: var(--tbp-ui-shadow), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__lens {
    --tbp-lens-x: 0px;
    position: absolute !important;
    z-index: 1 !important;
    top: 8px !important;
    right: auto !important;
    bottom: 8px !important;
    left: 0 !important;
    height: auto !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: var(--tbp-app-bar-radius) !important;
    background: rgba(255, 255, 255, .56) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), inset 0 0 0 1px rgba(8, 72, 40, .06) !important;
    transform: translate3d(var(--tbp-lens-x), 0, 0) !important;
    transform-origin: center !important;
    will-change: transform, width !important;
    transition:
      transform var(--tbp-app-bar-motion) var(--tbp-motion-spring, cubic-bezier(.2, .82, .2, 1)),
      width var(--tbp-app-bar-motion) var(--tbp-motion-spring, cubic-bezier(.2, .82, .2, 1)),
      opacity var(--tbp-motion-fast, 160ms) ease,
      background-color var(--tbp-motion-fast, 160ms) ease,
      border-color var(--tbp-motion-fast, 160ms) ease !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar.is-ready .tbp-app-bar__lens {
    opacity: 1 !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar.is-measuring .tbp-app-bar__lens {
    transition: none !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__lens.is-gold {
    background: var(--tbp-cta-gold, var(--tbp-gold)) !important;
    box-shadow: none !important;
    border: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__item {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-rows: var(--tbp-app-bar-icon) minmax(15px, auto) !important;
    row-gap: 4px !important;
    align-content: center !important;
    justify-items: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: var(--tbp-app-bar-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tbp-green) !important;
    text-decoration: none !important;
    opacity: .72 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    transition:
      opacity var(--tbp-motion-fast, 160ms) ease,
      transform var(--tbp-app-bar-motion) var(--tbp-motion-spring, cubic-bezier(.2, .82, .2, 1)) !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__item.is-active,
  html body.tbp-has-app-bar .tbp-app-bar__item.is-preview,
  html body.tbp-has-app-bar .tbp-app-bar__item.is-open {
    opacity: 1 !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__lava,
  html body.tbp-has-app-bar .tbp-app-bar img.tbp-lava-icon,
  html body.tbp-has-app-bar .tbp-app-bar__plus-glyph {
    grid-row: 1 !important;
    display: block !important;
    position: static !important;
    width: var(--tbp-app-bar-icon) !important;
    min-width: var(--tbp-app-bar-icon) !important;
    max-width: var(--tbp-app-bar-icon) !important;
    height: var(--tbp-app-bar-icon) !important;
    min-height: var(--tbp-app-bar-icon) !important;
    max-height: var(--tbp-app-bar-icon) !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: translate3d(0, var(--tbp-app-bar-icon-y, 0px), 0) scale(1) !important;
    transition: transform var(--tbp-app-bar-motion) var(--tbp-motion-spring, cubic-bezier(.2, .82, .2, 1)) !important;
  }

  html body.tbp-has-app-bar .tbp-navigation-compass {
    display: grid !important;
    place-items: center !important;
  }

  html body.tbp-has-app-bar .tbp-navigation-compass svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__item.is-active .tbp-app-bar__lava,
  html body.tbp-has-app-bar .tbp-app-bar__item.is-preview .tbp-app-bar__lava,
  html body.tbp-has-app-bar .tbp-app-bar__item.is-active img.tbp-lava-icon,
  html body.tbp-has-app-bar .tbp-app-bar__item.is-preview img.tbp-lava-icon {
    transform: translate3d(0, calc(var(--tbp-app-bar-icon-y, 0px) - 1px), 0) scale(1) !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__label {
    grid-row: 2 !important;
    display: block !important;
    position: static !important;
    z-index: 2 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 3px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    color: var(--tbp-green) !important;
    -webkit-text-fill-color: var(--tbp-green) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Manrope, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -.02em !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    justify-self: center !important;
    transform: none !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar--guest .tbp-app-bar__label {
    font-size: 12px !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__item--register {
    z-index: 3 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: var(--tbp-cta-gold, var(--tbp-gold)) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    /* Stessa pillola compatta di "Crea": niente colonna a tutta altezza. */
    flex: 1 1 0 !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    row-gap: 4px !important;
    min-width: 0 !important;
    max-width: 96px !important;
    height: 80px !important;
    min-height: 0 !important;
    max-height: 80px !important;
    margin-inline: 2px !important;
    padding: 6px 4px !important;
    border-radius: 18px !important;
  }

  /* La "lente" oro dietro Registrati sborda e pulsa come un blob: via. */
  html body.tbp-has-app-bar .tbp-app-bar__lens,
  html body.tbp-has-app-bar .tbp-app-bar__lens.is-gold {
    display: none !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__item--register::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--tbp-register-light-width, 42%);
    z-index: 1;
    background: var(--tbp-cta-light, linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .52) 50%, transparent 72%));
    transform: translateX(-160%);
    animation: var(--tbp-cta-animation, tbp-register-shimmer 2.6s ease-in-out infinite);
    pointer-events: none;
  }

  html body.tbp-has-app-bar .tbp-app-bar__item--register .tbp-app-bar__lava,
  html body.tbp-has-app-bar .tbp-app-bar__item--register .tbp-app-bar__label {
    position: relative;
    z-index: 2;
  }

  html body.tbp-has-app-bar .tbp-app-bar__lens.is-gold {
    background: var(--tbp-cta-gold, var(--tbp-gold)) !important;
    box-shadow: none !important;
    border: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: var(--tbp-register-lens-animation, tbp-register-glow 2.6s ease-in-out infinite);
  }

  html body.tbp-has-app-bar .tbp-app-bar__item--register .tbp-app-bar__label {
    color: var(--tbp-gold-label, #fff) !important;
    -webkit-text-fill-color: var(--tbp-gold-label, #fff) !important;
    text-shadow: var(--tbp-gold-label-shadow, none) !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar--five .tbp-app-bar__item:not(.tbp-app-bar__item--plus) {
    flex: 1 1 0 !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar--auth .tbp-app-bar__item--plus {
    flex: 1.85 1 0 !important;
    min-width: 112px !important;
    max-width: 148px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: var(--tbp-radius-card) !important;
    background: var(--tbp-cta-gold, var(--tbp-gold)) !important;
    box-shadow: 0 9px 22px -16px rgba(63, 48, 0, .46) !important;
    opacity: 1 !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar--auth .tbp-app-bar__item--plus .tbp-app-bar__label {
    padding: 0 5px !important;
    color: var(--tbp-white) !important;
    -webkit-text-fill-color: var(--tbp-white) !important;
    font-size: clamp(8px, 2.2vw, 10px) !important;
    font-weight: 850 !important;
    letter-spacing: -.035em !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__plus-glyph {
    display: grid !important;
    place-items: center !important;
    color: var(--tbp-white) !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__plus-glyph svg {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    fill: currentColor !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__item--plus.is-open,
  html body.tbp-has-app-bar .tbp-app-bar__item--plus.is-launching {
    transform: translate3d(0, -2px, 0) scale(1.02) !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__icon--chrome {
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    margin: 11px 0 !important;
    color: var(--tbp-green) !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__icon--chrome svg {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    fill: none !important;
    stroke: currentColor !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__item--back[aria-disabled="true"] {
    pointer-events: none !important;
    opacity: .38 !important;
  }

  html body.tbp-has-app-bar.tbp-wcfm-ui #wcfm_menu {
    bottom: calc(var(--tbp-app-bar-h) + var(--tbp-app-bar-inset) + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.tbp-has-app-bar .mfp-wrap.off-canvas-center .mfp-content,
  html body.tbp-has-app-bar .off-canvas-center .mfp-content {
    padding-bottom: 0 !important;
  }

  html body.tbp-has-app-bar .off-canvas-center .tbp-account-shortcuts,
  html body.tbp-has-app-bar .off-canvas-center .nav-vertical > .html:last-child {
    padding-bottom: calc(var(--tbp-app-bar-h) + var(--tbp-app-bar-inset) + env(safe-area-inset-bottom, 0px) + 20px) !important;
  }

  html body.tbp-has-app-bar .tbp-esperienze-steps-footer {
    position: sticky !important;
    z-index: 20 !important;
    bottom: calc(var(--tbp-app-bar-h) + var(--tbp-app-bar-inset) + env(safe-area-inset-bottom, 0px)) !important;
    padding: 12px 0 16px !important;
    background: transparent !important;
  }

  html body:has(.mfp-wrap.off-canvas-center) .tbp-app-bar,
  html body:has(.mfp-wrap.off-canvas-center) .tbp-app-bar-veil {
    display: none !important;
  }
}

@media (min-width: 600px) and (max-width: 849px) {
  html body.tbp-has-app-bar .tbp-app-bar {
    max-width: min(560px, calc(100% - 24px)) !important;
  }
}

@media (min-width: 850px) {
  html body.tbp-has-app-bar .tbp-app-bar,
  html body.tbp-has-app-bar .tbp-app-bar-veil {
    display: none !important;
  }

  .tbp-desktop-nav__item .tbp-navigation-compass {
    display: grid !important;
    place-items: center !important;
    width: var(--tbp-icon, 48px) !important;
    height: var(--tbp-icon, 48px) !important;
    margin: 0 !important;
  }

  .tbp-desktop-nav__item .tbp-navigation-compass svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .tbp-desktop-nav__glyph {
    display: grid !important;
    place-items: center !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
    color: var(--tbp-white) !important;
  }

  .tbp-desktop-nav__glyph svg {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    fill: currentColor !important;
  }

  .tbp-desktop-nav__item--plus,
  .tbp-desktop-nav__item--register {
    min-width: 112px !important;
    background: var(--tbp-cta-gold, var(--tbp-gold)) !important;
    opacity: 1 !important;
  }

  .tbp-desktop-nav__item--plus .tbp-desktop-nav__label {
    color: var(--tbp-white) !important;
    white-space: nowrap !important;
  }

  .tbp-desktop-nav__item--register .tbp-desktop-nav__label {
    color: var(--tbp-gold-label, #fff) !important;
    text-shadow: var(--tbp-gold-label-shadow, none) !important;
  }
}

@keyframes tbp-app-bar-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Frozen auth uses these fallbacks; conversion pages override the tokens. */
@keyframes tbp-register-shimmer {
  0% { transform: translateX(-160%); }
  100% { transform: translateX(280%); }
}

@keyframes tbp-register-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  html body.tbp-has-app-bar .tbp-app-bar__item--register::after,
  html body.tbp-has-app-bar .tbp-app-bar__lens.is-gold {
    animation: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) and (max-width: 849px) {
  html body.tbp-has-app-bar .tbp-app-bar__material,
  html body.tbp-has-app-bar .tbp-app-bar__lens {
    background: rgba(244, 247, 245, .98) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__lens.is-gold {
    background: var(--tbp-cta-gold, var(--tbp-gold)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.tbp-has-app-bar .tbp-app-bar,
  html body.tbp-has-app-bar .tbp-app-bar__lens,
  html body.tbp-has-app-bar .tbp-app-bar__item,
  html body.tbp-has-app-bar .tbp-app-bar__lava,
  html body.tbp-has-app-bar .tbp-app-bar img.tbp-lava-icon {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}


/* Le voci oro portano etichette su due righe: il \n nel label diventa un a capo. */
html body.tbp-has-app-bar .tbp-app-bar__item--plus .tbp-app-bar__label,
.tbp-desktop-nav__item--plus .tbp-desktop-nav__label,
.tbp-desktop-nav__item--register .tbp-desktop-nav__label {
  white-space: pre-line !important;
  line-height: 1.12 !important;
  text-align: center !important;
}


/* "Crea" su una riga: la tessera oro è una voce come le altre, non un totem. */
@media (max-width: 849px) {
  html body.tbp-has-app-bar .tbp-app-bar--auth .tbp-app-bar__item--plus,
  html body.tbp-has-app-bar .tbp-app-bar__item--plus {
    flex: 1 1 0 !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    row-gap: 2px !important;
    min-width: 0 !important;
    max-width: 76px !important;
    height: 66px !important;
    min-height: 0 !important;
    max-height: 66px !important;
    margin-inline: 2px !important;
    padding: 4px !important;
    border-radius: 16px !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar--auth .tbp-app-bar__item--plus .tbp-app-bar__label,
  html body.tbp-has-app-bar .tbp-app-bar__item--plus .tbp-app-bar__label {
    font-size: 11px !important;
  }

  /* La voce upgrade porta la parola piu lunga: pillola un filo piu larga. */
  html body.tbp-has-app-bar .tbp-app-bar__item--upgrade {
    max-width: 104px !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__item--upgrade .tbp-app-bar__label {
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__item--plus .tbp-app-bar__plus-glyph svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Anche in altezza: il glifo non usa la fascia icona piena da 58px. */
  html body.tbp-has-app-bar .tbp-app-bar__item--plus .tbp-app-bar__icon--chrome,
  html body.tbp-has-app-bar .tbp-app-bar__item--plus .tbp-app-bar__plus-glyph {
    width: 36px !important;
    height: 26px !important;
    min-height: 0 !important;
  }

  html body.tbp-has-app-bar .tbp-app-bar__item--plus {
    row-gap: 2px !important;
  }
}


/* L'oro della navbar è lo stesso oro liquido dei CTA: gradiente + luce animata. */
html body.tbp-has-app-bar .tbp-app-bar__item--plus,
html body.tbp-has-app-bar .tbp-app-bar__item--register,
html body.tbp-has-app-bar .tbp-app-bar__lens.is-gold,
.tbp-desktop-nav__item--plus,
.tbp-desktop-nav__item--register {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--tbp-cta-gold, var(--tbp-gold)) !important;
}

html body.tbp-has-app-bar .tbp-app-bar__item--plus::after,
html body.tbp-has-app-bar .tbp-app-bar__item--register::after,
html body.tbp-has-app-bar .tbp-app-bar__lens.is-gold::after,
.tbp-desktop-nav__item--plus::after,
.tbp-desktop-nav__item--register::after {
  content: "";
  position: absolute;
  inset: -45%;
  border-radius: inherit;
  background: var(--tbp-cta-light);
  animation: var(--tbp-cta-animation);
  pointer-events: none;
  z-index: -1;
}


/* Contorno verde scuro anche sulle etichette bianche delle voci oro. */
html body.tbp-has-app-bar .tbp-app-bar__item--plus .tbp-app-bar__label,
html body.tbp-has-app-bar .tbp-app-bar__item--register .tbp-app-bar__label,
.tbp-desktop-nav__item--plus .tbp-desktop-nav__label,
.tbp-desktop-nav__item--register .tbp-desktop-nav__label {
  -webkit-text-stroke: 0.4px rgba(6, 56, 31, 0.7);
  paint-order: stroke fill;
}


/* Le pillole oro del nav desktop restano compatte: due righe, niente larghezze extra. */
.tbp-desktop-nav__item--plus,
.tbp-desktop-nav__item--register {
  max-width: 190px;
  padding-inline: 14px !important;
}


/* Il vecchio glow della lente scala oltre la tessera e sborda dall'app bar. */
html body.tbp-has-app-bar .tbp-app-bar__lens.is-gold {
  animation: none !important;
}


/* Navbar mobile: superficie unita con contorno grigio sottile (Elind 7/9). */
@media (max-width: 849px) {
  html body.tbp-has-app-bar .tbp-app-bar {
    background: var(--tbp-app-bar-surface, rgba(255, 255, 255, 0.94)) !important;
    border: 1px solid var(--tbp-line, rgba(8, 72, 40, 0.14)) !important;
  }
}

/* Desktop: senza app bar il padding in fondo al body lasciava una fascia bianca sotto il footer. */
@media (min-width: 850px) {
  html body.tbp-has-app-bar,
  html body.tbp-has-app-bar.tbp-has-mega-footer {
    padding-bottom: 0 !important;
  }
}

/* ==========================================================================
   Barra sempre aperta (CEO, 29/9): «Riduci»/«Apri» non c'e' piu'.
   Il tasto resta nascosto anche se una pagina vecchia in cache lo porta
   ancora (js/tbp-app-bar.js lo toglie e cancella la scelta salvata).
   ========================================================================== */
html body .tbp-app-bar__toggle { display: none !important; }

@media (max-width: 849px) {
  html body.tbp-has-app-bar .tbp-app-bar--five .tbp-app-bar__item--plus { min-width: 64px !important; }
}

/* ==========================================================================
   Nascosta solo a schermo intero (CEO, 29/9): la mappa della Home in
   «Schermo intero» e la creazione o modifica di un'esperienza nell'Ufficio,
   a domande o in vista classica. Appena si esce la barra torna.
   Al suo posto non resta spazio vuoto: la riserva in fondo alla pagina va a
   zero e la barra dei passi del modulo scende al bordo dello schermo.
   ========================================================================== */
@media (max-width: 849px) {
  html body.tbp-has-app-bar.tbp-map-fullscreen,
  html body.tbp-has-app-bar.tbp-wizard-fullscreen,
  html body.tbp-has-app-bar:has(#wcfm_esperienze_manage_form) {
    --tbp-app-bar-reserve: 0px;
    padding-bottom: 0 !important;
  }
  html body.tbp-has-app-bar.tbp-map-fullscreen :is(.tbp-app-bar, .tbp-app-bar-veil),
  html body.tbp-has-app-bar.tbp-wizard-fullscreen :is(.tbp-app-bar, .tbp-app-bar-veil),
  html body.tbp-has-app-bar:has(#wcfm_esperienze_manage_form) :is(.tbp-app-bar, .tbp-app-bar-veil) {
    display: none !important;
  }
  html body.tbp-has-app-bar:is(.tbp-map-fullscreen, .tbp-wizard-fullscreen) :is(footer#footer, .footer-wrapper),
  html body.tbp-has-app-bar:has(#wcfm_esperienze_manage_form) :is(footer#footer, .footer-wrapper) {
    padding-bottom: 0 !important;
  }
  html body.tbp-has-app-bar:has(#wcfm_esperienze_manage_form) .tbp-esperienze-steps-footer {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  html body.tbp-has-app-bar.tbp-wcfm-ui:has(#wcfm_esperienze_manage_form) #wcfm_menu {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ==========================================================================
   Feedback della scelta: la voce toccata resta a colori, le altre sbiadiscono
   in grigio. Cosi si capisce quale pulsante e stato premuto e dove ci si trova.
   ========================================================================== */
@media (max-width: 849px) {
  html body.tbp-has-app-bar .tbp-app-bar__item .tbp-app-bar__lava,
  html body.tbp-has-app-bar .tbp-app-bar__item img.tbp-lava-icon,
  html body.tbp-has-app-bar .tbp-app-bar__item .tbp-app-bar__label {
    transition:
      filter var(--tbp-app-bar-dim, 520ms) ease,
      opacity var(--tbp-app-bar-dim, 520ms) ease,
      color var(--tbp-app-bar-dim, 520ms) ease,
      transform var(--tbp-app-bar-motion) var(--tbp-motion-spring, cubic-bezier(.2, .82, .2, 1)) !important;
  }

  /* Destinazioni non attive: grigie. Il tasto Crea resta oro, e un'azione. */
  html body.tbp-has-app-bar .tbp-app-bar__item:not(.is-active):not(.is-preview):not(.is-open):not(.tbp-app-bar__item--plus) .tbp-app-bar__lava,
  html body.tbp-has-app-bar .tbp-app-bar__item:not(.is-active):not(.is-preview):not(.is-open):not(.tbp-app-bar__item--plus) img.tbp-lava-icon {
    filter: grayscale(1) !important;
    opacity: .5 !important;
  }
  html body.tbp-has-app-bar .tbp-app-bar__item:not(.is-active):not(.is-preview):not(.is-open):not(.tbp-app-bar__item--plus) .tbp-app-bar__label {
    color: var(--tbp-muted, #5D786B) !important;
  }

  /* Mentre si sceglie, sbiadisce anche il tasto Crea: resta acceso solo il tocco. */
  html body.tbp-has-app-bar .tbp-app-bar:has(.is-preview) .tbp-app-bar__item:not(.is-preview) .tbp-app-bar__lava,
  html body.tbp-has-app-bar .tbp-app-bar:has(.is-preview) .tbp-app-bar__item:not(.is-preview) img.tbp-lava-icon,
  html body.tbp-has-app-bar .tbp-app-bar:has(.is-preview) .tbp-app-bar__item:not(.is-preview) .tbp-app-bar__plus-glyph {
    filter: grayscale(1) !important;
    opacity: .38 !important;
  }
  html body.tbp-has-app-bar .tbp-app-bar:has(.is-preview) .tbp-app-bar__item:not(.is-preview) {
    opacity: .6 !important;
  }
  html body.tbp-has-app-bar .tbp-app-bar:has(.is-preview) .tbp-app-bar__item--plus:not(.is-preview) {
    background-image: none !important;
    background-color: rgba(8, 72, 40, .10) !important;
  }

  /* La voce scelta si stacca: colore pieno e un gradino piu grande. */
  html body.tbp-has-app-bar .tbp-app-bar__item.is-preview .tbp-app-bar__lava,
  html body.tbp-has-app-bar .tbp-app-bar__item.is-preview img.tbp-lava-icon {
    filter: none !important;
    opacity: 1 !important;
    transform: translate3d(0, calc(var(--tbp-app-bar-icon-y, 0px) - 3px), 0) scale(1.12) !important;
  }
  html body.tbp-has-app-bar .tbp-app-bar__item.is-preview .tbp-app-bar__label {
    color: var(--tbp-green, #084828) !important;
    font-weight: 800 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    html body.tbp-has-app-bar .tbp-app-bar__item .tbp-app-bar__lava,
    html body.tbp-has-app-bar .tbp-app-bar__item img.tbp-lava-icon,
    html body.tbp-has-app-bar .tbp-app-bar__item .tbp-app-bar__label { transition: none !important; }
    html body.tbp-has-app-bar .tbp-app-bar__item.is-preview .tbp-app-bar__lava,
    html body.tbp-has-app-bar .tbp-app-bar__item.is-preview img.tbp-lava-icon { transform: none !important; }
  }
}


/* ==========================================================================
   Barra sottile (CEO, 29/9 sera): «falla sottile, o per lo meno riduci di
   molto la barra navbar di ToBePolo, tenendo le icone e i nomi però».
   Prima: 118 px a tutta larghezza, icone 48 px, tessera oro alta 80 px e una
   sfumatura crema che saliva di altri 72 px sulla pagina. Ora una capsula di
   vetro alta 64 px, 16 px dai lati, che galleggia sopra il fondo (e sopra la
   lineetta dell'iPhone). Icone 26 px, nomi 10,5 px su una riga (due solo se
   una parola non ci sta). L'oro di «Registrati», «Crea» e «Mestiere» e' una
   pastiglia dietro la voce; la pagina aperta ha una pastiglia leggera.
   Il vetro e' solo la capsula: niente velo ne' sfumatura sopra.
   Selettori con #tbp-app-bar: vincono sulle regole vecchie sparse in piu'
   fogli (anche quelle scritte nella pagina); quello che i temi impongono nel
   layer tbp-appearance si corregge nel layer, in fondo.
   ========================================================================== */
@supports (height: 100dvh) {
  @media (max-width: 849px) {
    /* Ancorata dall'alto con dvh, come prima: Safari non la sposta quando la
       sua barra degli indirizzi entra ed esce. */
    html body.tbp-has-app-bar #tbp-app-bar {
      top: calc(100dvh - var(--tbp-app-bar-lift) - var(--tbp-app-bar-pill)) !important;
      bottom: auto !important;
    }
  }
}
@media (max-width: 849px) {
  html body.tbp-has-app-bar .tbp-app-bar-veil {
    display: none !important;
  }

  html body.tbp-has-app-bar #tbp-app-bar {
    left: var(--tbp-app-bar-side) !important;
    right: max(16px, env(safe-area-inset-right, 0px)) !important;
    bottom: var(--tbp-app-bar-lift) !important;
    width: auto !important;
    max-width: 480px !important;
    height: var(--tbp-app-bar-pill) !important;
    margin: 0 auto !important;
    padding: 4px !important;
    gap: 2px !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    border-radius: var(--tbp-app-bar-radius) !important;
    overflow: visible !important;
    --tbp-icon: var(--tbp-app-bar-icon);
  }
  html body.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__material {
    inset: 0 !important;
    border-radius: inherit !important;
  }

  /* Voci: icona sopra, nome sotto, tutto dentro i 56 px della capsula.
     Larghe almeno 44 px (bersaglio del dito). */
  html body.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    row-gap: 3px !important;
    gap: 3px !important;
    flex: 1 1 0 !important;
    align-self: stretch !important;
    min-width: 44px !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 5px 2px 4px !important;
    border-radius: calc(var(--tbp-app-bar-radius) - 4px) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
  html body.tbp-has-app-bar #tbp-app-bar :is(.tbp-app-bar__lava, img.tbp-lava-icon, .tbp-navigation-compass, .tbp-app-bar__plus-glyph) {
    --tbp-icon: var(--tbp-app-bar-icon);
    flex: 0 0 var(--tbp-app-bar-icon) !important;
    width: var(--tbp-app-bar-icon) !important;
    min-width: var(--tbp-app-bar-icon) !important;
    max-width: var(--tbp-app-bar-icon) !important;
    height: var(--tbp-app-bar-icon) !important;
    min-height: var(--tbp-app-bar-icon) !important;
    max-height: var(--tbp-app-bar-icon) !important;
    margin: 0 !important;
  }
  html body.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__plus-glyph svg {
    width: 18px !important;
    height: 18px !important;
  }
  html body.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__label {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1px !important;
    overflow: visible !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance;
  }

  /* Oro: la pastiglia sta dietro la voce, non e' piu' una tessera alta. */
  html body.tbp-has-app-bar #tbp-app-bar :is(.tbp-app-bar__item--register, .tbp-app-bar__item--plus) {
    flex: 1.15 1 0 !important;
    overflow: hidden !important;
    background: var(--tbp-cta-gold, var(--tbp-gold)) !important;
    box-shadow: none !important;
  }
  html body.tbp-has-app-bar #tbp-app-bar :is(.tbp-app-bar__item--register, .tbp-app-bar__item--plus) .tbp-app-bar__label {
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  /* Sull'oro l'icona resta a colori: e' l'azione principale, non una voce spenta. */
  html body.tbp-has-app-bar #tbp-app-bar :is(.tbp-app-bar__item--register, .tbp-app-bar__item--plus) :is(.tbp-app-bar__lava, img.tbp-lava-icon) {
    filter: none !important;
    opacity: 1 !important;
  }

  /* La pagina aperta: pastiglia leggera dietro la voce. */
  html body.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__item.is-active:not(.tbp-app-bar__item--register):not(.tbp-app-bar__item--plus),
  html body.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__item.is-preview:not(.tbp-app-bar__item--register):not(.tbp-app-bar__item--plus) {
    background: rgba(8, 72, 40, .09) !important;
  }
  html[data-tbp-theme="dark"] body.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__item.is-active:not(.tbp-app-bar__item--register):not(.tbp-app-bar__item--plus),
  html[data-tbp-theme="dark"] body.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__item.is-preview:not(.tbp-app-bar__item--register):not(.tbp-app-bar__item--plus) {
    background: rgba(237, 243, 237, .12) !important;
  }

  /* Il tocco non ingrandisce piu' l'icona di 1,12 volte: con 26 px bastava
     il colore a dire quale voce e' stata scelta. */
  html body.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__item.is-preview :is(.tbp-app-bar__lava, img.tbp-lava-icon) {
    transform: none !important;
  }
}

@media (max-width: 359px) {
  html body.tbp-has-app-bar #tbp-app-bar {
    left: 10px !important;
    right: 10px !important;
    padding: 4px 3px !important;
  }
  html body.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__label,
  html body.tbp-has-app-bar #tbp-app-bar :is(.tbp-app-bar__item--register, .tbp-app-bar__item--plus) .tbp-app-bar__label {
    font-size: 10px !important;
    letter-spacing: -.02em !important;
  }
}

/* Vetro della capsula e correzioni a cio' che i temi impongono nel layer. */
@layer tbp-appearance {
  @media (max-width: 849px) {
    html body.tbp-has-app-bar.tbp-has-app-bar .tbp-app-bar,
    html body.tbp-has-app-bar.tbp-has-app-bar #tbp-app-bar {
      overflow: visible !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }
    html body.tbp-has-app-bar.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__material {
      border: 1px solid rgba(189, 207, 195, .75) !important;
      box-shadow: 0 8px 24px rgba(8, 72, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
      background: rgba(250, 249, 245, .88) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    /* Notte: lo stesso vetro verde-nero della barra «Prenota» (singolo.css). */
    html[data-tbp-theme="dark"] body.tbp-has-app-bar.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__material {
      background: rgba(29, 41, 37, .88) !important;
      border-color: rgba(74, 98, 86, .8) !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    }
    /* La sfumatura crema che saliva 72 px sopra la barra: via. Il ::before resta
       solo come lastra che sfoca, grande quanto la capsula: e' lui, non
       .tbp-app-bar__material, a sfocare davvero su Chrome/Android (la sfocatura
       del materiale non si vede; con la sfumatura spenta il testo sotto le
       icone restava nitido). */
    html body.tbp-has-app-bar.tbp-has-app-bar #tbp-app-bar::before {
      content: "" !important;
      position: absolute !important;
      z-index: -1 !important;
      inset: 0 !important;
      pointer-events: none !important;
      border-radius: inherit !important;
      background: none !important;
      -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
      backdrop-filter: blur(20px) saturate(170%) !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
    }
    /* Nomi: una riga, a capo solo fra parole (i temi mettono «anywhere»). */
    html body.tbp-has-app-bar.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__label {
      white-space: normal !important;
      overflow-wrap: normal !important;
      line-height: 1.1 !important;
      font-size: 10.5px !important;
    }
    html body.tbp-has-app-bar.tbp-has-app-bar #tbp-app-bar :is(.tbp-app-bar__item--register, .tbp-app-bar__item--plus) .tbp-app-bar__label {
      white-space: nowrap !important;
      font-size: 10.5px !important;
    }
    /* «Crea» aveva l'icona a 40 px nel layer. */
    html body.tbp-has-app-bar.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__item--create img.tbp-lava-icon {
      width: var(--tbp-app-bar-icon) !important;
      min-width: var(--tbp-app-bar-icon) !important;
      max-width: var(--tbp-app-bar-icon) !important;
      height: var(--tbp-app-bar-icon) !important;
      min-height: var(--tbp-app-bar-icon) !important;
      max-height: var(--tbp-app-bar-icon) !important;
    }
  }
  /* Barra «Prenota» della scheda (esperienze/css/singolo.css): agganciata alla
     barra a tutta larghezza perdeva gli angoli bassi. Sopra la capsula resta
     staccata di 8 px, quindi tiene angoli e bordo tutto attorno. */
  @media (max-width: 849px) {
    html body.single-esperienze.tbp-has-app-bar #tbp-book-strip.is-agganciata {
      border-radius: 22px !important;
      border-bottom-color: rgba(189, 207, 195, .75) !important;
    }
    html[data-tbp-theme="dark"] body.single-esperienze.tbp-has-app-bar #tbp-book-strip.is-agganciata {
      border-bottom-color: rgba(74, 98, 86, .8) !important;
    }
  }
  @media (max-width: 359px) {
    html body.tbp-has-app-bar.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__label,
    html body.tbp-has-app-bar.tbp-has-app-bar #tbp-app-bar :is(.tbp-app-bar__item--register, .tbp-app-bar__item--plus) .tbp-app-bar__label {
      font-size: 10px !important;
    }
  }
}

/* ==========================================================================
   Spazio in fondo (CEO, 29/9 sera: in Mio account di un Mastro in revisione
   «Gestione account → Esci» restava sotto la capsula). Sotto la capsula non
   deve restare niente di irraggiungibile: la riserva in fondo alla pagina e'
   capsula + area sicura (o distacco dal fondo, se e' di piu') + 24 px.
   Il piede verde la porta in fondo come prima; dove il piede non si vede
   (Ufficio e pagine senza piede) la porta il corpo pagina, con la classe
   tbp-app-bar-senza-piede che mette js/tbp-app-bar.js. La Home (mappa) non
   cambia; a schermo intero la riserva resta 0 (regole piu' su).
   ========================================================================== */
@media (max-width: 849px) {
  :root {
    /* Fascia smerigliata (blocco qui sotto): dal fondo dello schermo fino a
       8 px sopra la capsula. */
    --tbp-app-bar-band: calc(var(--tbp-app-bar-pill) + var(--tbp-app-bar-lift) + 8px);
    /* Riserva = fascia + 16 px (+ quanto l'area sicura supera il distacco):
       l'ultimo contenuto e «Esci» restano sopra la fascia, nitidi e toccabili.
       Stessi valori di prima: 98 px senza area sicura, 122 px sull'iPhone. */
    --tbp-app-bar-reserve: calc(var(--tbp-app-bar-band) + max(0px, env(safe-area-inset-bottom, 0px) - var(--tbp-app-bar-lift)) + 16px);
  }
  /* Ancore, campi a fuoco e scrollIntoView si fermano sopra la capsula. */
  html:has(> body.tbp-has-app-bar:not(.tbp-home-map)) {
    scroll-padding-bottom: var(--tbp-app-bar-reserve);
  }
  html body.tbp-has-app-bar.tbp-app-bar-senza-piede:not(.tbp-home-map) {
    padding-bottom: var(--tbp-app-bar-reserve) !important;
  }
}

/* ==========================================================================
   Fascia smerigliata dietro la capsula (CEO, 29/9 sera: «attorno a sé non ha
   opacità ... si vede tutto attorno e si perde in mezzo al testo»).
   Come le tab bar di iOS: a tutta larghezza, dal fondo dello schermo (area
   sicura compresa) fino a 8 px sopra la capsula, sfoca e vela quello che
   scorre sotto; il bordo alto sfuma sui primi 14 px, niente linea netta.
   - E' il ::after della barra: segue la capsula anche mentre la barra di
     Safari entra ed esce, e sparisce con lei dove la barra e' nascosta
     (mappa a schermo intero, creazione esperienza, chat di Colombo, menu,
     flussi a schermo intero). Il vecchio velo .tbp-app-bar-veil resta spento.
   - Prende i tocchi: un tocco sulla fascia arriva alla barra, che lo ignora,
     e non apre il link sfocato sotto. Trascinando sulla fascia la pagina
     scorre come prima.
   - La capsula non cambia. Il suo ::before (la lastra che sfoca la capsula
     su Chrome/Android) resta com'e', grande quanto la capsula: la fascia sta
     sotto di lui (z-index -2 contro -1).
   - La riserva in fondo alla pagina parte dalla fascia (--tbp-app-bar-band,
     blocco «Spazio in fondo»): tra l'ultimo contenuto e la fascia restano
     16 px. Chi segue --tbp-app-bar-h (barra «Prenota», nastro degli enti,
     Colombo, avvisi) sta gia' 8 px sopra la capsula, cioe' sopra la fascia.
   Nel layer tbp-appearance, come il vetro della capsula: i temi non la
   ricolorano. Dove backdrop-filter non c'e', velo quasi pieno.
   ========================================================================== */
@media (max-width: 849px) {
  :root {
    --tbp-app-bar-band-veil: rgba(250, 249, 245, .76);
    --tbp-app-bar-band-filter: blur(20px) saturate(170%);
  }
  html[data-tbp-theme="dark"] {
    --tbp-app-bar-band-veil: rgba(18, 21, 20, .78);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 849px) {
    :root { --tbp-app-bar-band-veil: rgba(250, 249, 245, .94); }
    html[data-tbp-theme="dark"] { --tbp-app-bar-band-veil: rgba(18, 21, 20, .94); }
  }
}
@media (max-width: 849px) and (prefers-reduced-transparency: reduce) {
  :root {
    --tbp-app-bar-band-veil: rgba(250, 249, 245, .98);
    --tbp-app-bar-band-filter: none;
  }
  html[data-tbp-theme="dark"] { --tbp-app-bar-band-veil: rgba(18, 21, 20, .98); }
}

@layer tbp-appearance {
  @media (max-width: 849px) {
    html body.tbp-has-app-bar.tbp-has-app-bar #tbp-app-bar::after {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      z-index: -2 !important;
      /* 8 px sopra la capsula; sotto, fino al fondo dello schermo e oltre
         (rimbalzo dello scorrimento, barra degli strumenti di Safari). */
      top: -8px !important;
      bottom: calc(-1 * var(--tbp-app-bar-lift) - 60px) !important;
      /* A tutta larghezza: la capsula e' centrata, quindi 50% - 50vw e' il
         bordo sinistro dello schermo; 40 px in piu' per parte, fuori vista. */
      left: calc(50% - 50vw - 40px) !important;
      right: calc(50% - 50vw - 40px) !important;
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
      pointer-events: auto !important;
      background: var(--tbp-app-bar-band-veil) !important;
      -webkit-backdrop-filter: var(--tbp-app-bar-band-filter) !important;
      backdrop-filter: var(--tbp-app-bar-band-filter) !important;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px) !important;
      mask-image: linear-gradient(to bottom, transparent 0, #000 14px) !important;
    }
  }
}