/* listino.css — il listino dei gettoni, in due forme sullo stesso design system (rh-*):
   intera su /listino, compatta dentro piani.html#gettoni. Prefisso ls-. */
.ls-agg { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px; border: 1px solid var(--rh-border); border-radius: 999px; background: #fff; font-size: 13px; color: var(--rh-text-2); }
.ls-agg .ls-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rh-green); box-shadow: 0 0 0 3px rgba(29,125,82,.15); }
.ls-agg b { color: var(--rh-text); font-weight: 600; }
.ls-avviso { margin-top: 18px; padding: 12px 16px; border: 1px solid var(--rh-border); border-radius: var(--rh-radius); background: var(--rh-bg-2); font-size: 14px; color: var(--rh-text-2); }
.ls-avviso:empty { display: none; }

/* la tabella */
.ls-wrap { overflow-x: auto; margin-top: 22px; border: 1px solid var(--rh-border); border-radius: var(--rh-radius-lg); background: #fff; }
table.ls-tab { border-collapse: collapse; width: 100%; min-width: 760px; }
table.ls-tab th, table.ls-tab td { padding: 13px 14px; border-bottom: 1px solid var(--rh-border); text-align: center; vertical-align: middle; font-size: 14px; }
table.ls-tab thead th { background: var(--rh-bg-2); position: sticky; top: 0; z-index: 2; }
table.ls-tab th.ls-voce, table.ls-tab td.ls-voce { text-align: left; min-width: 300px; width: 42%; }
.ls-h-name { font-weight: 700; font-size: 15px; }
.ls-h-price { display: block; font-family: var(--rh-mono); font-size: 11px; color: var(--rh-text-2); font-weight: 400; margin-top: 3px; }
tr.ls-cat td { text-align: left; font-family: var(--rh-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--rh-bord); font-weight: 600; padding: 10px 14px; background: var(--rh-bg-3); }
td.ls-voce .ls-nome { font-weight: 600; color: var(--rh-text); }
td.ls-voce .ls-cosa { display: block; font-size: 12.5px; color: var(--rh-text-2); margin-top: 2px; }
td.ls-voce .ls-nota { display: inline-block; margin-top: 5px; font-family: var(--rh-mono); font-size: 10.5px; color: var(--rh-gold); border: 1px solid var(--rh-border-2); border-radius: 999px; padding: 1px 8px; }
.ls-tok { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--rh-serif); font-size: 20px; font-weight: 600; color: var(--rh-text); font-variant-numeric: tabular-nums; }
.ls-tok small { font-family: var(--rh-sans); font-size: 11.5px; color: var(--rh-text-2); font-weight: 400; }
.ls-eur { display: block; font-family: var(--rh-mono); font-size: 11px; color: var(--rh-text-dim); margin-top: 1px; }
td.ls-no { color: var(--rh-border-2); font-size: 18px; }
td.ls-soon { color: var(--rh-amber); font-weight: 600; font-size: 12px; }
td.ls-incl { color: var(--rh-green); font-weight: 600; font-size: 12px; }
table.ls-tab tbody tr:hover td { background: #fcfaf6; }
.ls-legenda { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 12px; font-size: 13px; color: var(--rh-text-2); }
.ls-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.ls-dotl { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* i pacchetti */
.ls-tok-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.ls-tok-card { background: #fff; border: 1px solid var(--rh-border); border-radius: var(--rh-radius); padding: 22px 18px; text-align: center; position: relative; }
.ls-tok-card.ls-best { border: 2px solid var(--rh-bord); }
.ls-tok-card .ls-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--rh-bord); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.ls-tok-qty { font-family: var(--rh-serif); font-size: 26px; font-weight: 600; color: var(--rh-text); }
.ls-tok-qty small { font-size: 13px; color: var(--rh-text-2); font-family: var(--rh-sans); font-weight: 400; }
.ls-tok-price { font-family: var(--rh-mono); font-size: 15px; color: var(--rh-bord); margin-top: 6px; }
.ls-tok-unit { font-size: 12px; color: var(--rh-text-dim); margin-top: 4px; }
.ls-tok-save { font-size: 12px; color: var(--rh-green); font-weight: 600; margin-top: 2px; min-height: 16px; }
.ls-inclusi { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.ls-inclusi span { background: #fff; border: 1px solid var(--rh-border); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--rh-text-2); }
.ls-inclusi b { color: var(--rh-text); }
.ls-inclusi:empty { display: none; }
.ls-note { text-align: center; font-size: 13px; color: var(--rh-text-dim); margin-top: 18px; }

/* le regole */
.ls-regole { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 24px; }
.ls-regola { background: #fff; border: 1px solid var(--rh-border); border-radius: var(--rh-radius); padding: 18px; }
.ls-regola .ls-ic { font-size: 22px; }
.ls-regola b { display: block; margin: 8px 0 4px; font-size: 15px; }
.ls-regola p { margin: 0; font-size: 13.5px; color: var(--rh-text-2); }
.ls-piede { text-align: center; font-size: 12.5px; color: var(--rh-text-dim); max-width: 60em; margin: 30px auto 0; line-height: 1.6; }
.ls-azioni { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* la forma compatta, dentro piani.html */
.ls-compatta { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 22px; }
.ls-compatta:empty { display: none; }
.ls-cmp { background: #fff; border: 1px solid var(--rh-border); border-radius: var(--rh-radius); padding: 14px 16px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ls-cmp .ls-n { font-weight: 600; font-size: 14px; }
.ls-cmp .ls-c { font-size: 12px; color: var(--rh-text-2); }
.ls-cmp .ls-p { font-family: var(--rh-serif); font-size: 22px; font-weight: 600; white-space: nowrap; text-align: right; }
.ls-cmp .ls-p small { font-family: var(--rh-sans); font-size: 11px; color: var(--rh-text-2); font-weight: 400; }
.ls-cmp .ls-da { font-family: var(--rh-mono); font-size: 10px; color: var(--rh-gold); display: block; }

@media (max-width: 860px) { .ls-tok-grid { grid-template-columns: repeat(2, 1fr); } }