/* Rilayer · elegant.css — livello finale sopra stile inline e bhc-theme.
   Palette BHC (nero, viola, magenta, arancio) resa sobria: sentence case ovunque,
   Rilayer come unico carattere, gradiente solo su logo e CTA primaria.
   Selettori con prefisso `html body` per prevalere su bhc-theme (`body …`). */

:root {
  --el-text: #f3f4f6; --el-muted: #a1a7b3; --el-line: #22232d; --el-line-2: #33354a;
  --el-panel: rgba(13, 13, 19, .86); --el-magenta: #e879f9; --el-orange: #fb923c; --el-violet: #7c3aed;
  --el-grad: linear-gradient(100deg, #d946ef, #fb923c);
  --el-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Tipografia: un solo carattere, niente maiuscole forzate ─────────── */
html body, html body button, html body input, html body select, html body textarea,
html body .eyebrow, html body label, html body .badge, html body .tag, html body dt, html body footer,
html body .notice, html body nav button, html body .toolbar label, html body #count, html body .toast,
html body dialog b, html body input[type="file"]::file-selector-button {
  font-family: Rilayer, Arial, sans-serif; text-transform: none; letter-spacing: 0;
}
html body { color: var(--el-text); font-size: 16px; line-height: 1.55; }
html body h1, html body h2, html body h3 {
  font-family: Rilayer, Arial, sans-serif; font-weight: 700; text-transform: none; letter-spacing: -.02em;
  background: none; color: var(--el-text); -webkit-text-fill-color: var(--el-text);
}
html body h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.08; margin: 8px 0 12px; padding-bottom: 0; }
html body h2 { font-size: 24px; letter-spacing: -.015em; }
html body .card h3 { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 6px 0 4px; }
html body p { color: var(--el-text); }
html body .muted, html body .intro p { color: var(--el-muted); font-size: 14.5px; }
html body .eyebrow { font-size: 13px; font-weight: 600; color: var(--el-magenta); }
html body label, html body dt, html body .toolbar label { font-size: 13px; font-weight: 500; color: var(--el-muted); }
html body dd { font-size: 15px; font-weight: 600; }

/* ── Fondo: nebulosa tenue, stelle appena accennate, senza scintillio ── */
html body::before {
  background:
    radial-gradient(55vw 38vw at 85% -10%, rgba(124, 58, 237, .22), transparent 65%),
    radial-gradient(45vw 32vw at 5% 25%, rgba(192, 38, 211, .10), transparent 60%),
    radial-gradient(60vw 40vw at 40% 115%, rgba(76, 29, 149, .16), transparent 65%);
}
html body::after { opacity: .22; animation: none; }

/* ── Avviso e header ordinato ───────────────────────────────────────── */
html body .notice {
  font-size: 12.5px; color: var(--el-muted); background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--el-line); padding: 8px 5%;
}
html body header { padding: 14px 5%; gap: 20px; border-bottom: 1px solid var(--el-line); background: rgba(5,5,5,.8); }
html body .logo {
  font-family: RilayerDisplay, Rilayer, Arial, sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.02em;
  text-transform: lowercase; background: var(--el-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
html body nav { gap: 4px; }

/* ── Bottoni: primaria con gradiente, secondarie discrete e leggibili ─ */
html body button {
  font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 6px; border: 1px solid transparent;
  background: var(--el-grad); color: #0a0a0a; transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s, filter .18s;
}
html body button:hover { filter: brightness(1.06); box-shadow: 0 6px 22px -10px rgba(232,121,249,.7); }
html body button.secondary, html body button.close {
  background: rgba(255,255,255,.04); color: var(--el-text); border-color: var(--el-line-2); box-shadow: none;
}
html body button.secondary:hover, html body button.close:hover { background: rgba(255,255,255,.08); border-color: #4b4d68; filter: none; }
html body nav button.secondary { background: transparent; border-color: transparent; color: var(--el-muted); }
html body nav button.secondary:hover { color: var(--el-text); background: rgba(255,255,255,.06); }
html body button.heart {
  background: rgba(255,255,255,.04); color: var(--el-muted); border-color: var(--el-line-2); font-size: 15px; padding: 8px 11px;
}
html body button.heart:hover { color: var(--el-text); border-color: #4b4d68; filter: none; box-shadow: none; }
html body button.heart[aria-pressed="true"] { color: var(--el-magenta); border-color: rgba(232,121,249,.5); background: rgba(232,121,249,.08); }
html body .card button { font-size: 13px; padding: 9px 13px; }

/* ── Campi ──────────────────────────────────────────────────────────── */
html body input, html body select, html body textarea {
  font-size: 15px; padding: 10px 12px; margin-top: 6px; border-radius: 6px;
  background: rgba(255,255,255,.03); border: 1px solid var(--el-line-2); color: var(--el-text);
}
html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible {
  border-color: var(--el-orange); box-shadow: 0 0 0 3px rgba(251,146,60,.22); outline: none;
}
html body :focus-visible { outline: 2px solid var(--el-orange); outline-offset: 2px; box-shadow: none; }
html body input[type="file"]::file-selector-button { font-size: 13px; padding: 6px 12px; border-radius: 6px; }

/* ── Catalogo: intro compatta, filtri laterali, griglia ariosa ──────── */
html body main { padding: 28px 5% 48px; }
html body .intro { margin-bottom: 24px; gap: 32px; }
html body .intro p { max-width: 380px; margin: 0; }
html body .layout { gap: 32px; }
html body .filters { background: var(--el-panel); border: 1px solid var(--el-line); border-radius: 12px; padding: 20px; gap: 14px; }
html body .filters label { font-size: 13px; }
html body .toolbar { padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--el-line); }
html body .toolbar select { margin-top: 0; padding: 8px 34px 8px 12px; font-size: 14px; }
html body #count { font-size: 14px; }
html body .grid { gap: 22px; }

/* ── Schede: piatte, bordo sottile, alone morbido al passaggio ──────── */
html body .card {
  background: var(--el-panel); border: 1px solid var(--el-line); border-radius: 12px;
  transition: border-color .22s var(--el-ease), box-shadow .22s var(--el-ease), transform .22s var(--el-ease);
}
html body .card:hover, html body .card:focus-within {
  border-color: rgba(232,121,249,.4);
  box-shadow: 0 0 0 1px rgba(232,121,249,.08), 0 24px 48px -28px rgba(124,58,237,.55);
}
html body .art { border-bottom: 1px solid var(--el-line); }
html body .cardbody { padding: 18px 20px 20px; }
html body .badge { font-size: 11px; font-weight: 600; padding: 4px 8px; color: var(--el-text); background: rgba(5,5,5,.8); border-color: var(--el-line-2); }
html body .price { font-size: 24px; font-weight: 700; letter-spacing: -.02em; background: none; color: var(--el-text); -webkit-text-fill-color: var(--el-text); margin: 12px 0; }
html body .tag { font-size: 12.5px; font-weight: 600; padding: 5px 10px; color: var(--el-text); background: rgba(232,121,249,.1); border-color: rgba(232,121,249,.35); }
html body .empty { background: var(--el-panel); border: 1px solid var(--el-line); border-radius: 12px; }

/* ── Modulo e finestra di dettaglio coerenti ────────────────────────── */
html body .panel { background: var(--el-panel); border: 1px solid var(--el-line); border-radius: 14px; padding: 32px; }
html body .panel h1 { font-size: clamp(28px, 3.5vw, 40px); }
html body .panel h2 { font-size: 16px; font-weight: 600; color: var(--el-magenta); letter-spacing: 0; }
html body .step { border-top: 1px solid var(--el-line); margin-top: 28px; padding-top: 22px; }
html body dialog { background: #0d0d13; border: 1px solid var(--el-line-2); border-radius: 14px; padding: 32px; box-shadow: 0 40px 90px -30px rgba(124,58,237,.45); }
html body dialog::backdrop { background: rgba(5,5,5,.72); }
html body dialog h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 6px 0 18px; }
html body dialog .price { font-size: 30px; }
html body dialog b { font-size: 14px; color: var(--el-orange); }
html body .toast { font-size: 14px; font-weight: 500; border-radius: 8px; border-color: var(--el-line-2); box-shadow: 0 16px 40px -18px rgba(0,0,0,.9); }
html body footer { font-size: 12.5px; line-height: 1.7; color: var(--el-muted); border-top: 1px solid var(--el-line); }

/* ── Movimento discreto, rispettando le preferenze ──────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html body .card { animation: el-enter .45s var(--el-ease) both; }
  html body .card:nth-child(2) { animation-delay: 40ms; } html body .card:nth-child(3) { animation-delay: 80ms; }
  html body .card:nth-child(4) { animation-delay: 120ms; } html body .card:nth-child(5) { animation-delay: 160ms; }
  html body .card:nth-child(6) { animation-delay: 200ms; } html body .card:nth-child(n+7) { animation-delay: 240ms; }
  html body .card:hover { transform: translateY(-3px); }
  html body dialog[open] { animation: el-dialog .24s var(--el-ease); }
  html body .toast { animation: el-toast .24s var(--el-ease); }
  html body .intro > * { animation: el-enter .5s var(--el-ease) both; }
  @keyframes el-enter { from { opacity: 0; transform: translateY(8px); } }
  @keyframes el-dialog { from { opacity: 0; transform: translateY(10px) scale(.985); } }
  @keyframes el-toast { from { opacity: 0; transform: translate(-50%, 10px); } }
}
@media (prefers-reduced-motion: reduce) {
  html body .card, html body dialog[open], html body .toast, html body .intro > * { animation: none; }
  html body .card:hover { transform: none; }
}

/* ── Mobile: header e filtri compatti ───────────────────────────────── */
@media (max-width: 650px) {
  html body header { padding: 12px 5%; }
  html body .logo { font-size: 24px; }
  html body nav button { font-size: 13px; padding: 8px 10px; }
  html body main { padding: 20px 5% 40px; }
  html body h1 { font-size: 30px; letter-spacing: -.02em; }
  html body .filters { padding: 14px; gap: 10px; }
  html body .filters label { font-size: 12.5px; }
  html body .filters input, html body .filters select { padding: 9px 10px; font-size: 14px; }
  html body .cardbody { padding: 16px; }
  html body .panel, html body dialog { padding: 20px; }
}

html body .intro h1{font-size:clamp(32px,3.8vw,52px);font-weight:600;line-height:1.1}html body .intro p{font-family:Rilayer,Arial,sans-serif;font-size:17px;line-height:1.6;letter-spacing:0}html body .price{font-family:Rilayer,Arial,sans-serif;font-weight:600}html body .card{animation:none}html body .card .muted{font-family:Rilayer,Arial,sans-serif;letter-spacing:0;font-size:14px}.searchbar{margin-bottom:28px;max-width:760px}.searchbar>label{font-size:14px!important;color:#d5d6df!important}.search-input{position:relative;margin-top:7px}.search-input>svg{position:absolute;left:16px;top:18px;color:#adb0c0}html body .search-input input{padding:16px 18px 16px 48px;margin:0;font-size:17px;background:#101017;border-color:#42404e;border-radius:10px}.quick-filters{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}html body .quick-filters button{padding:7px 15px;border-radius:24px;font-size:14px;font-weight:400}html body .quick-filters button[aria-pressed="true"]{background:#35203e;border-color:#a862b4;color:#f5dcfc}html body .filter-toggle{display:none}.filter-heading{font-weight:600;color:#efeff5;font-size:16px}html body .filters{top:100px}html body .card button[data-detail]{background:#22202d;border:1px solid #474053;color:#f0e9f5;box-shadow:none}html body .card button[data-detail]:hover{background:#34233e;border-color:#a76abb}html body nav button[aria-current="page"]{color:#f3e8f6;background:#221929}html body .notice{font-size:12px}html body header{position:relative}html body .card:hover{transform:translateY(-3px)}html body .toolbar label{display:flex;align-items:center;gap:10px}html body .toolbar{gap:15px}html body .layout>section{min-width:0}html body .art{background:radial-gradient(ellipse at 50% 100%,#2d233d,#111119 70%)}html body .art.resina{background:radial-gradient(ellipse at 50% 100%,#312540,#111119 70%)}
@media(max-width:650px){html body header{display:flex;flex-wrap:wrap;gap:10px}html body .logo{font-size:29px}html body nav{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:0}html body nav button{font-size:14px;padding:9px 7px;min-height:42px}html body nav button[data-nav="pubblica"]{grid-column:1/-1}html body .intro h1{font-size:32px}html body .intro p{font-size:16px;margin-top:13px}html body .searchbar{margin-bottom:18px}html body .filter-toggle{display:block;width:100%;text-align:left}html body .filters{display:none;position:static}html body .filters.is-open{display:grid;grid-template-columns:1fr 1fr}html body .filter-heading{grid-column:1/-1}html body .layout{gap:16px}html body .toolbar{margin-bottom:16px;flex-wrap:wrap}html body .toolbar select{min-width:150px}html body .intro{margin-bottom:20px}html body .quick-filters button{font-size:13px;padding:7px 12px}html body .notice{padding:6px 5%;font-size:11px}}
@media(prefers-reduced-motion:reduce){html body *,html body *::before,html body *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html body .card:hover{transform:none}}