:root {
      --erco-side-icon: 50px;
      --erco-side-panel: 310px;
      --erco-black: #000;
      --erco-panel: #1b1b1b;
      --erco-white: #fff;
      --erco-muted: #aaa;
      --erco-line: rgba(255,255,255,.17);
      --erco-speed: 260ms;
      --erco-ease: cubic-bezier(.19,1,.22,1);
      --erco-z: 99999;
      --erco-side-items: 5;
      --erco-side-items: 5;
    }
    /*
      Contenitore generale del widget.
      pointer-events: none evita che l'area invisibile del wrapper blocchi i click
      sulla pagina; riattiviamo i click solo su barra e pannelli.
    */
    .erco-side {
      position: fixed;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: calc(var(--erco-side-panel) + var(--erco-side-icon));
      height: calc(var(--erco-side-icon) * var(--erco-side-items));
      z-index: var(--erco-z);
      pointer-events: none;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      line-height: 1.42;
      transition:
        height 420ms cubic-bezier(.22,.72,.18,1),
        transform 420ms cubic-bezier(.22,.72,.18,1);
    }

    /*
      Quando il widget è minimizzato, l'intero contenitore diventa alto come
      un solo quadrato. Poiché .erco-side resta a top:50% con translateY(-50%),
      anche il quadrato chiuso rimane perfettamente centrato nella viewport.
    */
    .erco-side.is-minimized {
      height: var(--erco-side-icon);
    }

    /* Barra verticale fissa a destra, sempre cliccabile. */
    .erco-side__rail {
      position: absolute;
      top: 0;
      right: 0;
      width: var(--erco-side-icon);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
      background: var(--erco-black);
      pointer-events: auto;
      box-shadow: -4px 8px 22px rgba(0,0,0,.28);
      transition:
        height 420ms cubic-bezier(.22,.72,.18,1),
        transform 420ms cubic-bezier(.22,.72,.18,1);
      will-change: height, transform;
    }

    /*
      Wrapper di ogni icona.
      In stato minimizzato le icone non-toggle rientrano con fade e movimento,
      invece di sparire seccamente.
    */
    .erco-side__item-wrap {
      position: relative;
      width: var(--erco-side-icon);
      height: var(--erco-side-icon);
      flex: 0 0 var(--erco-side-icon);
      opacity: 1;
      transform: translateX(0);
      transition:
        opacity 260ms ease,
        transform 420ms cubic-bezier(.22,.72,.18,1);
    }

    .erco-side__item {
      width: var(--erco-side-icon);
      height: var(--erco-side-icon);
      border: 0;
      border-bottom: 1px solid var(--erco-line);
      margin: 0;
      padding: 0;
      background: #000;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 150ms ease, opacity 150ms ease;
    }

    .erco-side__item:hover,
    .erco-side__item:focus-visible,
    .erco-side__item.is-active {
      background: #303030;
      outline: none;
    }

    /* Le icone sono SVG inline, così il widget non dipende da font icon esterni. */
    .erco-side__item svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition:
        transform 420ms cubic-bezier(.22,.72,.18,1),
        opacity 220ms ease;
      transform-origin: center;
    }

    /* Tooltip testuale delle icone laterali. */
    .erco-side__tooltip {
      position: absolute;
      right: calc(var(--erco-side-icon) + 8px);
      top: 50%;
      transform: translateY(-50%) translateX(8px);
      background: #000;
      color: #fff;
      padding: 6px 9px;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 150ms ease, transform 150ms ease;
    }

    .erco-side__item-wrap:hover .erco-side__tooltip {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

    /* Area che contiene i pannelli: sta a sinistra della barra icone. */
    .erco-side__panels {
      position: absolute;
      top: 0;
      right: var(--erco-side-icon);
      width: var(--erco-side-panel);
      pointer-events: none;
    }

    /*
      Stato base dei pannelli.
      Ogni pannello parte nascosto dietro la barra e alto come una sola icona.
      La variabile --panel-y viene impostata via JS per far uscire il pannello
      dalla stessa altezza del pulsante cliccato.
    */
    .erco-side__panel {
      position: absolute;
      top: var(--panel-y, 0px);
      right: 0;
      width: var(--erco-side-panel);
      min-height: var(--erco-side-icon);
      background: var(--erco-panel);
      color: var(--erco-white);
      box-shadow: -8px 10px 24px rgba(0,0,0,.32);
      transform: translateX(calc(100% + var(--erco-side-icon)));
      transform-origin: right top;
      opacity: 0;
      visibility: hidden;
      height: var(--erco-side-icon);
      overflow: hidden;
      pointer-events: none;
      transition:
        transform 280ms cubic-bezier(.22,.61,.36,1),
        height 760ms cubic-bezier(.22,.72,.18,1),
        opacity 170ms ease,
        visibility 0ms linear 1040ms;
    }

    /*
      Primo stato di apertura: il pannello diventa visibile ma resta ancora chiuso
      verticalmente. Il movimento completo viene gestito aggiungendo classi in JS.
    */
    .erco-side__panel.is-visible {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transition:
        transform 280ms cubic-bezier(.22,.61,.36,1),
        height 760ms cubic-bezier(.22,.72,.18,1),
        opacity 170ms ease,
        visibility 0ms;
    }

    /* Secondo stato: uscita orizzontale da dietro la barra. */
    .erco-side__panel.is-slid {
      transform: translateX(0);
    }

    /*
      Terzo stato: srotolamento verticale.
      --panel-open-height è calcolata via JS usando scrollHeight, così l'animazione
      va verso l'altezza reale del contenuto e non verso un valore arbitrario.
    */
    .erco-side__panel.is-unrolled {
      height: var(--panel-open-height, 320px);
    }

    /* Il contenuto interno appare leggermente dopo lo srotolamento. */
    .erco-side__panel-inner {
      padding: 18px 20px 20px;
      transform: translateY(-8px);
      opacity: 0;
      transition:
        transform 520ms cubic-bezier(.22,.72,.18,1) 260ms,
        opacity 420ms ease 260ms;
    }

    .erco-side__panel.is-unrolled .erco-side__panel-inner {
      transform: translateY(0);
      opacity: 1;
    }

    .erco-side__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 15px;
    }

    .erco-side__title {
      margin: 0;
      color: #fff;
      font-size: 15px;
      line-height: 1.2;
      font-weight: 700;
    }

    .erco-side__close-panel {
      width: 28px;
      height: 28px;
      border: 0;
      padding: 0;
      background: transparent;
      color: #fff;
      cursor: pointer;
      font-size: 25px;
      line-height: 1;
      opacity: .88;
    }

    .erco-side__close-panel:hover,
    .erco-side__close-panel:focus-visible {
      opacity: 1;
      outline: none;
    }

    .erco-side__body {
      color: var(--erco-muted);
    }

    .erco-side__body > * + * {
      margin-top: 13px;
    }

    .erco-side__main {
      color: #fff;
      font-size: 17px;
      line-height: 1.35;
    }

    .erco-side a {
      color: inherit;
    }

    .erco-side__main a,
    .erco-side__text-link {
      color: #fff;
      text-decoration: none;
    }

    .erco-side__main a:hover,
    .erco-side__text-link:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .erco-side__dim {
      color: #969696;
    }

    .erco-side__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .erco-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 7px 12px;
      background: #fff;
      border: 1px solid #fff;
      color: #000 !important;
      text-decoration: none;
      font-size: 13px;
      line-height: 1.2;
      transition: background 150ms ease, border-color 150ms ease;
    }

    .erco-btn:hover,
    .erco-btn:focus-visible {
      background: #d8d8d8;
      border-color: #d8d8d8;
      outline: none;
      text-decoration: none;
    }

    .erco-side__count {
      color: #fff;
      font-weight: 700;
    }

    .erco-social {
      display: flex;
      flex-wrap: wrap;
      border-top: 1px solid var(--erco-line);
      border-left: 1px solid var(--erco-line);
    }

    .erco-social a {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: transparent;
      text-decoration: none;
      border-right: 1px solid var(--erco-line);
      border-bottom: 1px solid var(--erco-line);
      font-size: 13px;
      font-weight: 700;
      transition: background 150ms ease;
    }

    .erco-social a:hover,
    .erco-social a:focus-visible {
      background: #303030;
      outline: none;
    }

    

    /*
      Stato minimizzato del widget.
      Tutte le icone spariscono con animazione tranne il pulsante toggle.
    */
    .erco-side.is-minimized .erco-side__item-wrap:not(.erco-side__item-wrap--toggle) {
      opacity: 0;
      transform: translateX(18px);
      pointer-events: none;
    }

    .erco-side.is-minimized .erco-side__rail {
      height: 100%;
      transform: translateX(0);
    }

    /* La X ruota e diventa visivamente un +. */
    .erco-side.is-minimized .erco-side__item--toggle svg {
      transform: rotate(135deg);
    }

    .erco-side.is-minimized .erco-side__item-wrap--toggle {
      position: absolute;
      top: 0;
      right: 0;
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
      z-index: 2;
    }

    /* Adattamento mobile: pannello largo quasi quanto lo schermo. */
    @media (max-width: 640px) {
      :root {
        --erco-side-icon: 48px;
        --erco-side-panel: calc(100vw - 48px);
      }

      .erco-side {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
      }

      .erco-side__panel {
        height: var(--erco-side-icon);
      }

      .erco-side__panel.is-unrolled {
        height: min(var(--panel-open-height, 320px), 72vh);
        overflow: auto;
      }
    }