/* ==========================================================================
   NerdPick Vault — design system (porting di src/index.css + classi Tailwind
   dei componenti React). Parte 1: base, utility, bottoni, header, footer.
   ========================================================================== */

:root {
  --np-white: #FFFFFF;
  --np-black: #111111;
  --np-magenta: #E6007E;
  --np-cyan: #00B3CC;
  --np-yellow: #FFE600;
  --np-gray-1: #1a1a1a;
  --np-gray-2: #222222;
  --np-gray-3: #18181B;
  --np-light: #F2F3F5;
  --np-light-2: #F7F7F8;
  --np-font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --np-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --np-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --np-bg: #FFFFFF;
  --np-fg: #111111;
  --np-surface: #FFFFFF;
  --np-surface-2: #F2F3F5;
  --np-shadow: #111111;
  --np-border-soft: rgba(0,0,0,.1);
}
/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--np-font-body);
  font-size: 16px;
  line-height: 1.5;
  background: var(--np-bg);
  color: var(--np-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .2s ease, color .2s ease;
}
body.np-lock { overflow: hidden; }
::selection { background: var(--np-magenta); color: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p { margin: 0; }
.np-site { min-height: 100vh; display: flex; flex-direction: column; }
.np-main { flex: 1; }
.np-container { max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
.np-arcade, h1, h2, h3, h4, h5, h6 { font-family: var(--np-font-display); letter-spacing: .05em; font-weight: 400; }
.np-upper { text-transform: uppercase; }
.np-text-magenta { color: var(--np-magenta) !important; }
.np-text-cyan { color: var(--np-cyan) !important; }
.np-text-yellow { color: var(--np-yellow) !important; }
.np-text-muted { color: rgba(255,255,255,.4) !important; }
.np-hp { position: absolute; left: -9999px; opacity: 0; }

/* Icone */
.np-icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.np-icon--xxs { width: 12px; height: 12px; }
.np-icon--xs { width: 14px; height: 14px; }
.np-icon--sm { width: 16px; height: 16px; }
.np-icon--md { width: 20px; height: 20px; }
.np-icon--lg { width: 24px; height: 24px; }
.np-icon--xl { width: 48px; height: 48px; }

/* Responsive helpers (sm 640 / md 768 / lg 1024 / xl 1280) */
@media (max-width: 639.98px) { .np-hide-sm-down { display: none !important; } }
@media (max-width: 767.98px) { .np-hide-md-down { display: none !important; } }
@media (min-width: 768px) { .np-show-md-down { display: none !important; } }
@media (max-width: 1023.98px) { .np-hide-lg-down { display: none !important; } }
@media (min-width: 1024px) { .np-hide-lg-up { display: none !important; } }

/* Animazioni (solo transform/opacity) */
@keyframes np-glitch { 0% { transform: translate3d(0,0,0); opacity: 1; } 20% { transform: translate3d(-2px,1px,0); opacity: .95; } 40% { transform: translate3d(2px,-1px,0); opacity: 1; } 60% { transform: translate3d(-1px,-1px,0); opacity: .95; } 80% { transform: translate3d(1px,1px,0); opacity: 1; } 100% { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes np-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes np-ping { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes np-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes np-zoom-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes np-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes np-bump { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes np-spin { to { transform: rotate(360deg); } }
.np-glitch-target { will-change: transform; transition: transform .15s cubic-bezier(.4,0,.2,1); }
.np-scanlines {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.25) 50%), linear-gradient(90deg, rgba(255,0,0,.03), rgba(0,255,0,.01), rgba(0,0,255,.03));
  background-size: 100% 4px, 6px 100%;
}
.np-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; position: relative; }
.np-dot--cyan { background: var(--np-cyan); }
.np-dot--black { background: var(--np-black); }
.np-dot--yellow { background: var(--np-yellow); }
.np-dot--pulse { animation: np-pulse 1.6s ease-in-out infinite; }
.np-dot--glow { box-shadow: 0 0 6px var(--np-cyan); }
.np-dot--ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: np-ping 1.2s cubic-bezier(0,0,.2,1) infinite; }

/* Eyebrow / titoli sezione / barra accento */
.np-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1.4 var(--np-font-mono); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.np-eyebrow--cyan { color: var(--np-cyan); }
.np-eyebrow--magenta { color: var(--np-magenta); }
.np-eyebrow--yellow { color: var(--np-yellow); }
.np-eyebrow--box { color: #111111; background: #00B3CC; padding: 2px 8px; border: 1px solid var(--np-black); border-radius: 2px; }
.np-eyebrow--box .np-dot--cyan { background: #111111; }
.np-section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 4px solid var(--np-black); }
@media (min-width: 640px) { .np-section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.np-section-title { font-size: 36px; line-height: 1; text-transform: uppercase; letter-spacing: -.01em; }
.np-section-title--sm { font-size: 30px; }
@media (min-width: 640px) { .np-section-title { font-size: 48px; } .np-section-title--sm { font-size: 36px; } }
.np-accent-bar { height: 6px; background: var(--np-magenta); width: 100%; margin-top: 16px; border-radius: 2px; box-shadow: 0 2px 0 var(--np-black); }
.np-page-head { margin-bottom: 32px; }
.np-page-head__title { font-size: 36px; line-height: 1; text-transform: uppercase; }
@media (min-width: 640px) { .np-page-head__title { font-size: 60px; } }

/* Chip / tag */
.np-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font: 700 12px/1.4 var(--np-font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--np-black); background: var(--np-yellow); border: 2px solid var(--np-black); }
.np-chip--sm { padding: 2px 10px; border-width: 1px; font-size: 12px; }
.np-chip--shadow { box-shadow: 2px 2px 0 var(--np-black); }
.np-chip--cyan { background: var(--np-cyan); color: var(--np-black); }
.np-chip--yellow { background: var(--np-yellow); color: var(--np-black); }
.np-chip--magenta { background: var(--np-magenta); color: #fff; }
.np-chip--dark { background: var(--np-black); color: #fff; border-color: rgba(255,255,255,.2); }
.np-chip--green { background: #22c55e; color: #06210f; }
.np-meta-chip { display: inline-flex; align-items: center; padding: 2px 8px; font: 700 12px/1.4 var(--np-font-mono); text-transform: uppercase; border: 1px solid rgba(0,0,0,.2); background: rgba(0,0,0,.05); border-radius: 2px; color: var(--np-fg); }
.np-meta-chip--cyan { color: var(--np-cyan) !important; background: rgba(0,179,204,.1) !important; border-color: rgba(0,179,204,.3) !important; }
.np-mini-tag { display: inline-block; padding: 2px 6px; font: 700 10px/1.4 var(--np-font-mono); white-space: nowrap; }
.np-mini-tag--cyan { background: var(--np-cyan); color: #000; }
.np-mini-tag--yellow { background: var(--np-yellow); color: #000; }
.np-mini-tag--magenta { background: var(--np-magenta); color: #fff; }
.np-mini-tag--dark { background: var(--np-black); color: #fff; }
.np-sq { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; }
.np-sq--magenta { background: var(--np-magenta); }

/* Bottoni arcade 3D */
.np-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; font-family: var(--np-font-display); font-size: 16px; letter-spacing: .06em; line-height: 1.2;
  color: #fff; background: var(--np-magenta); border: 2.5px solid var(--np-black); border-radius: 6px;
  box-shadow: 4px 4px 0 var(--np-black); cursor: pointer; user-select: none; text-decoration: none; text-align: center;
  transition: transform .1s ease, opacity .1s ease; will-change: transform; white-space: nowrap;
}
.np-btn:hover { transform: translate3d(-1px,-1px,0); opacity: .96; color: #fff; }
.np-btn:active { transform: translate3d(2px,2px,0); }
.np-btn--cyan { background: var(--np-cyan); color: var(--np-black); }
.np-btn--cyan:hover { color: var(--np-black); }
.np-btn--yellow { background: var(--np-yellow); color: var(--np-black); }
.np-btn--block { width: 100%; }
.np-btn--inline { width: auto; }
.np-btn--sm { font-size: 14px; padding: 8px 14px; }
.np-btn--md { font-size: 16px; padding: 10px 20px; }
.np-btn--lg { font-size: 18px; padding: 12px 24px; }
.np-btn--xl { font-size: 24px; padding: 14px 32px; }
.np-btn--hero { font-size: 24px; padding: 14px 32px; gap: 12px; }
@media (min-width: 768px) { .np-btn--hero { font-size: 30px; } }
.np-btn--push { box-shadow: 0 4px 0 #000; }
.np-btn--push:active { transform: translateY(4px); box-shadow: none; }
.np-btn--ghost { background: var(--np-black); color: #fff; }
.np-btn.loading { opacity: .6; pointer-events: none; }
.np-btn__iconbox { position: relative; width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease, border-color .2s ease; }
.np-icon--cart-pixel { width: 17px; height: 13.6px; image-rendering: pixelated; animation: np-cart-icon-glow 2.2s ease-in-out infinite; }
@keyframes np-cart-icon-glow {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 179, 204, 0)); }
	50% { filter: drop-shadow(0 0 4px var(--np-cyan)); }
}
@keyframes np-cart-icon-glow-hover {
	0%, 100% { filter: drop-shadow(0 0 8px var(--np-cyan)); }
	50% { filter: drop-shadow(0 0 16px var(--np-cyan)); }
}
@keyframes np-cart-icon-tap-flash {
	0%, 100% { filter: drop-shadow(0 0 4px var(--np-cyan)); }
	50% { filter: drop-shadow(0 0 12px var(--np-magenta)); }
}
@keyframes np-cart-icon-confirm-pulse {
	0%, 100% { filter: drop-shadow(0 0 2px var(--np-cyan)); }
	50% { filter: drop-shadow(0 0 14px var(--np-cyan)); }
}
@keyframes np-wheel-spin { to { transform: rotate(360deg); } }
.np-cart-wheel { transform-box: fill-box; transform-origin: 50% 50%; }
/* Card catalogo / quick view: crate dentro .np-btn__iconbox */
.np-btn:hover .np-btn__iconbox { transform: translateY(-3px) scale(1.05); border-color: var(--np-magenta); }
.np-btn:hover .np-btn__iconbox .np-icon--cart-pixel { animation: np-cart-icon-glow-hover .8s ease-in-out infinite; }
.np-btn:hover .np-btn__iconbox .np-cart-wheel { animation: np-wheel-spin .6s linear; }
.np-btn:active .np-btn__iconbox { transform: scale(.95); transition: transform .1s ease; }
.np-btn__iconbox.is-tap .np-icon--cart-pixel { animation: np-cart-icon-tap-flash .3s ease-in-out !important; }
.np-btn__iconbox.is-confirm .np-icon--cart-pixel { animation: np-cart-icon-confirm-pulse .3s ease-in-out 3 !important; }
/* Tooltip "APRI IL VAULT" al hover del crate (desktop) */
/* Toast "reperto aggiunto al Vault" (in alto a destra) */
.np-cart-toast { position: fixed; top: 88px; right: 16px; left: auto; z-index: 9999; padding: 12px 18px; background: #111111; color: #fff; border: 3px solid var(--np-magenta); box-shadow: 4px 4px 0 #000; font-family: var(--np-font-display); font-size: 16px; letter-spacing: .05em; text-transform: uppercase; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; }
.np-cart-toast.is-show { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) { .np-cart-toast { left: 16px; right: 16px; top: 12px; text-align: center; } }
.np-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-family: var(--np-font-display); font-size: 14px; letter-spacing: .04em; color: #fff; background: var(--np-black); border: 2px solid #000; box-shadow: 2px 2px 0 var(--np-black); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.np-btn-ghost:hover { background: var(--np-cyan); color: var(--np-black); }
.np-btn-reset { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px 16px; font-family: var(--np-font-display); font-size: 14px; color: var(--np-yellow); background: var(--np-black); border: 2px solid #000; box-shadow: 2px 2px 0 var(--np-black); text-decoration: none; }
.np-btn-reset:hover { background: #000; }
a.added_to_cart { display: none !important; }

/* Form base */
.np-input, .np-select { width: 100%; padding: 10px; font: 500 12px/1.4 var(--np-font-body); color: var(--np-fg); background: var(--np-surface); border: 2px solid var(--np-black); border-radius: 0; outline: none; }
.np-input:focus, .np-select:focus { border-color: var(--np-cyan); }
.np-input--dark { background: var(--np-gray-2) !important; color: #fff !important; border-color: rgba(255,255,255,.4) !important; }
.np-select { font-family: var(--np-font-mono); font-weight: 700; cursor: pointer; padding: 8px 12px; }
.np-select--block { width: 100%; }
textarea.np-input { resize: vertical; min-height: 110px; }
.np-form__group { margin-bottom: 16px; }
.np-form__label { display: block; margin-bottom: 6px; font: 700 12px/1.4 var(--np-font-display); letter-spacing: .05em; }
.np-form__submit { margin-top: 4px; }
.np-form__error { margin-top: 10px; padding: 10px; font: 700 12px/1.4 var(--np-font-mono); color: #fff; background: var(--np-magenta); border: 2px solid var(--np-black); }
.np-form__success { padding: 24px; text-align: center; background: rgba(0,179,204,.15); border: 2px solid var(--np-black); box-shadow: 4px 4px 0 var(--np-black); }
.np-form__success .np-icon { margin: 0 auto 12px; }
.np-form__success-title { font-size: 18px; margin-bottom: 8px; }
.np-form__success p { font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.np-list { list-style: disc; padding-left: 20px; }
.np-list li { margin: 6px 0; }
.np-prose p, .np-prose ul, .np-prose ol { margin: 0 0 1em; }
.np-prose ul { list-style: disc; padding-left: 20px; }
.np-prose h2, .np-prose h3 { margin: 1.2em 0 .5em; text-transform: uppercase; }
.np-prose a { color: var(--np-cyan); }
.np-panel { padding: 24px; background: var(--np-surface); color: var(--np-fg); border: 3px solid var(--np-black); box-shadow: 6px 6px 0 var(--np-shadow); border-radius: 8px; }
.np-table-wrap { overflow-x: auto; }
.np-table { width: 100%; border-collapse: collapse; font-size: 12px; border: 2px solid var(--np-black); text-align: left; }
.np-table thead { background: var(--np-black); color: #fff; font-family: var(--np-font-display); font-size: 12px; letter-spacing: .05em; }
.np-table th, .np-table td { padding: 12px; border-right: 1px solid rgba(0,0,0,.1); }
.np-table th { border-right-color: rgba(255,255,255,.2); }
.np-table tbody tr { border-top: 1px solid rgba(0,0,0,.1); font-weight: 500; }
.np-table tbody tr:nth-child(odd) { background: rgba(0,0,0,.05); }

/* Badge livello + barra XP */
.np-level-badge { width: 24px; height: 24px; border-radius: 50%; background: var(--np-magenta); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--np-font-display); box-shadow: 0 0 8px var(--np-magenta); flex-shrink: 0; }
.np-level-badge--lg { width: 32px; height: 32px; font-size: 14px; }
.np-xpbar { width: 100%; height: 8px; background: rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.2); overflow: hidden; }
.np-xpbar--lg { height: 12px; background: #000; }
.np-xpbar__fill { height: 100%; background: linear-gradient(90deg, var(--np-magenta) 0%, var(--np-cyan) 100%); transition: width .5s ease; }

/* Overlay generico */
.np-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.85); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity .15s ease; cursor: pointer; }
.np-overlay.is-open { opacity: 1; }
.np-overlay > * { cursor: default; }
.np-overlay[hidden] { display: none; }

/* Breadcrumb */
.np-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font: 700 12px/1.4 var(--np-font-mono); text-transform: uppercase; color: var(--np-fg); }
.np-breadcrumb__item { color: inherit; text-decoration: none; transition: color .15s; }
a.np-breadcrumb__item:hover { color: var(--np-cyan); }
.np-breadcrumb__sep { color: var(--np-cyan); font-weight: 700; }
.np-breadcrumb__current { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .np-breadcrumb__current { max-width: 448px; } }
.np-breadcrumb--light { color: #fff; margin-bottom: 12px; }

/* ==========================================================================
   HEADER: barra di stato, barra principale (logo, mega-menu, Scanner, Missioni XP,
   audio, profilo, carrello), drawer mobile, pannello Scanner. Desktop da 1024px.
   ========================================================================== */
.np-header { position: sticky; top: 0; z-index: 50; background: var(--np-black); color: #fff; border-bottom: 4px solid #000; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); user-select: none; }

/* 1. Barra di stato gialla */
.np-status { height: 28px; background: var(--np-yellow); color: var(--np-black); padding: 0 12px; border-bottom: 2px solid #000; font: 700 11px/1 var(--np-font-body); display: flex; align-items: center; justify-content: center; gap: 14px; overflow: hidden; white-space: nowrap; }
.np-status__tag { display: none; background: var(--np-black); color: var(--np-yellow); padding: 4px 8px; font-size: 9px; font-weight: 800; letter-spacing: .12em; flex-shrink: 0; }
.np-status__mobile { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.np-status__center { display: none; position: relative; flex: 1 1 auto; min-width: 0; height: 100%; }
.np-status__msg { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .6s ease; pointer-events: none; }
.np-status__msg.is-active { opacity: 1; }
.np-status__right { display: none; align-items: center; gap: 10px; flex-shrink: 0; font-size: 11px; letter-spacing: .02em; }
.np-status__dot { opacity: .5; }
@media (min-width: 1024px) {
  .np-status { height: 34px; padding: 0 16px; justify-content: space-between; gap: 18px; }
  .np-status__tag { display: inline-block; }
  .np-status__mobile { display: none; }
  .np-status__center { display: block; }
  .np-status__right { display: flex; }
}

/* 2. Barra principale: [menu] logo [Catalogo] | Scanner | [lente] Missioni XP · audio · profilo · carrello */
.np-header__bar { max-width: 1280px; margin-inline: auto; height: 56px; padding: 0 10px 0 4px; display: flex; align-items: center; gap: 6px; }
@media (min-width: 1024px) { .np-header__bar { height: 68px; padding: 0 16px; gap: 14px; } }
.np-header__left { display: flex; align-items: center; gap: 4px; min-width: 0; flex-shrink: 0; }
@media (min-width: 1024px) { .np-header__left { gap: 14px; } }
.np-header__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
@media (min-width: 1024px) { .np-header__right { gap: 10px; margin-left: 0; } }
.np-hbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; transition: transform .1s, color .15s; }
.np-hbtn:hover { color: var(--np-cyan); }
.np-hbtn:active { transform: scale(.92); }
.np-hbtn.is-active { color: var(--np-yellow); }

/* Logo: mark + NERDPICK su mobile, lockup completo (tag VAULT + tagline) da 1024px */
.np-logo { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.np-logo__mark { width: 40px; height: 40px; filter: drop-shadow(0 0 8px rgba(230,0,126,.5)); flex-shrink: 0; }
.np-logo--sm .np-logo__mark { width: 32px; height: 32px; }
.np-logo--lg .np-logo__mark { width: 56px; height: 56px; }
.np-logo__text { display: flex; flex-direction: column; }
.np-logo__row { display: flex; align-items: center; gap: 6px; line-height: 1; }
.np-logo__wordmark { font-family: var(--np-font-display); font-size: 24px; letter-spacing: .05em; color: #fff; }
@media (min-width: 1024px) { .np-logo__wordmark { font-size: 30px; } }
.np-logo__accent { color: var(--np-magenta); }
.np-logo__tag { background: var(--np-yellow); color: var(--np-black); font: 700 10px/1 var(--np-font-display); letter-spacing: .1em; padding: 3px 6px; border: 1px solid #000; }
.np-logo__tagline { font: 700 10px/1.4 var(--np-font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--np-cyan); }
.np-footer .np-logo__wordmark, .np-footer .np-logo__tagline { color: inherit; }
.np-footer .np-logo__wordmark { color: #fff; }
.np-footer .np-logo__tagline { color: var(--np-cyan); }
.np-header__logo { display: inline-flex; text-decoration: none; flex-shrink: 0; min-width: 0; transition: transform .15s; }
.np-header__logo:hover { transform: scale(1.03); }
.np-header__logo:active { transform: scale(.97); }
.np-header__logo .np-logo { gap: 8px; }
.np-header__logo .np-logo__mark { width: 32px; height: 32px; }
.np-header__logo .np-logo__tag, .np-header__logo .np-logo__tagline { display: none; }
@media (min-width: 1024px) {
  .np-header__logo .np-logo { gap: 12px; }
  .np-header__logo .np-logo__mark { width: 40px; height: 40px; }
  .np-header__logo .np-logo__tag { display: inline; }
  .np-header__logo .np-logo__tagline { display: block; }
}

/* Trigger "Catalogo Reperti" + mega-menu (solo desktop) */
.np-nav { position: relative; display: none; }
@media (min-width: 1024px) { .np-nav { display: block; } }
.np-nav__trigger { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 14px; font-family: var(--np-font-display); font-size: 17px; letter-spacing: .05em; color: #fff; background: var(--np-gray-1); border: 2px solid #33363F; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; cursor: pointer; }
.np-nav__trigger:hover { background: var(--np-gray-2); color: var(--np-cyan); border-color: rgba(0,179,204,.6); }
.np-nav__trigger.is-current { color: var(--np-yellow); border-color: rgba(255,230,0,.5); }
.np-nav__trigger.is-open { background: var(--np-magenta); color: #fff; border-color: #000; box-shadow: 3px 3px 0 var(--np-cyan); }
.np-nav__chevron { color: #9ca3af; transition: transform .2s; }
.np-nav__trigger.is-open .np-nav__chevron { transform: rotate(180deg); color: #fff; }
.np-nav__menu { position: absolute; left: 0; top: 100%; margin-top: 8px; width: 680px; max-width: calc(100vw - 32px); background: var(--np-black); color: #fff; border: 4px solid #000; box-shadow: 8px 8px 0 var(--np-cyan); border-radius: 8px; z-index: 60; padding: 16px; animation: np-slide-down .15s ease; }
.np-nav__menu[hidden] { display: none; }
.np-nav__menu-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid rgba(255,255,255,.1); }
.np-nav__menu-title { display: inline-flex; align-items: center; gap: 6px; font-family: var(--np-font-display); font-size: 16px; color: var(--np-yellow); text-transform: uppercase; letter-spacing: .05em; }
.np-nav__menu-count { font: 700 10px/1.4 var(--np-font-mono); color: var(--np-cyan); background: #000; padding: 2px 8px; border: 1px solid rgba(0,179,204,.4); text-transform: uppercase; }
.np-nav__all { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; margin-bottom: 14px; font-family: var(--np-font-display); font-size: 18px; letter-spacing: .05em; color: #fff; background: var(--np-magenta); border: 2px solid #000; box-shadow: 3px 3px 0 #000; text-decoration: none; transition: filter .15s; }
.np-nav__all:hover { filter: brightness(1.1); }
.np-nav__all > span { display: inline-flex; align-items: center; gap: 8px; }
.np-nav__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.np-nav__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--np-gray-1); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; text-decoration: none; transition: background-color .15s, border-color .15s; }
.np-nav__item:hover { background: #000; border-color: var(--np-cyan); }
.np-nav__item-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.np-nav__item-icon { color: var(--np-cyan); transition: color .15s; width: 20px; height: 20px; }
.np-nav__item:hover .np-nav__item-icon { color: var(--np-yellow); }
.np-nav__item-text { min-width: 0; display: flex; flex-direction: column; }
.np-nav__item-name { font-family: var(--np-font-display); font-size: 15px; letter-spacing: .05em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.np-nav__item:hover .np-nav__item-name { color: var(--np-yellow); }
.np-nav__item-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 400 11px/1.4 var(--np-font-mono); color: #9ca3af; overflow: hidden; }
.np-nav__item-count { font: 700 12px/1.4 var(--np-font-mono); color: var(--np-yellow); background: rgba(0,0,0,.6); padding: 2px 6px; border: 1px solid rgba(255,230,0,.3); flex-shrink: 0; margin-left: 4px; }

/* Campo Scanner nell'header (desktop): apre il pannello #np-scanner */
.np-hsearch { display: none; flex: 1 1 auto; min-width: 150px; height: 42px; align-items: center; gap: 10px; padding: 0 10px 0 14px; background: #1A1B20; border: 2px solid #2A2D36; color: #8E93A1; font: 500 13px/1 var(--np-font-body); text-decoration: none; cursor: text; transition: border-color .15s, color .15s, box-shadow .15s; }
@media (min-width: 1024px) { .np-hsearch { display: flex; } }
.np-hsearch:hover, .np-hsearch:focus-visible { border-color: var(--np-cyan); color: #fff; box-shadow: 0 0 0 1px rgba(0,179,204,.35); outline: none; }
.np-hsearch__icon { color: var(--np-cyan); flex-shrink: 0; }
.np-hsearch__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-hsearch__key { flex-shrink: 0; font: 700 10px/1 var(--np-font-mono); color: #8E93A1; border: 1px solid #3B4152; border-radius: 3px; padding: 3px 6px; }
@media (hover: none) { .np-hsearch__key { display: none; } }

/* Destra: Missioni XP (ospiti), audio, profilo o Accedi, carrello */
.np-missions { display: none; align-items: center; gap: 6px; height: 42px; padding: 0 6px; font: 800 12px/1 var(--np-font-mono); letter-spacing: .08em; color: var(--np-yellow); text-decoration: none; white-space: nowrap; transition: color .15s; }
@media (min-width: 1024px) { .np-missions { display: inline-flex; } }
.np-missions:hover { color: #fff; }
.np-iconbtn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: var(--np-gray-2); border: 1px solid rgba(255,255,255,.2); color: #d1d5db; transition: border-color .15s, color .15s; cursor: pointer; flex-shrink: 0; }
.np-iconbtn:hover { border-color: var(--np-cyan); color: #fff; }
.np-iconbtn__on, .np-iconbtn__off { display: inline-flex; align-items: center; }
[data-np-sound] .np-iconbtn__off { display: none; }
body.np-sound-off [data-np-sound] .np-iconbtn__on { display: none; }
body.np-sound-off [data-np-sound] .np-iconbtn__off { display: inline-flex; }

.np-acct-wrap { position: relative; }
.np-acct { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; background: var(--np-gray-2); border: 1px solid rgba(255,255,255,.2); color: #fff; font-family: var(--np-font-display); font-size: 15px; letter-spacing: .05em; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s; cursor: pointer; }
.np-acct:hover, .np-acct.is-open { background: #2a2a2a; border-color: var(--np-cyan); }
.np-acct > .np-icon { color: var(--np-cyan); }
.np-acct--user { padding: 0 10px; }
.np-acct__text { display: flex; flex-direction: column; text-align: left; font: 400 11px/1.25 var(--np-font-mono); letter-spacing: 0; }
.np-acct__name { color: var(--np-yellow); font-weight: 700; }
.np-acct__stats { color: #9ca3af; font-size: 10px; }
.np-acct__chev { color: #9ca3af !important; transition: transform .2s; }
.np-acct.is-open .np-acct__chev { transform: rotate(180deg); }
.np-acct.has-bonus::after { content: ""; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--np-yellow); border: 2px solid var(--np-black); box-shadow: 0 0 6px var(--np-yellow); animation: np-pulse 1.6s ease-in-out infinite; }
.np-acct__menu { position: absolute; right: 0; top: 100%; margin-top: 8px; width: 300px; background: var(--np-black); color: #fff; border: 4px solid #000; box-shadow: 8px 8px 0 var(--np-cyan); border-radius: 8px; z-index: 60; padding: 14px; animation: np-slide-down .15s ease; }
.np-acct__menu[hidden] { display: none; }
.np-acct__head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.np-acct__head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.np-acct__grade { font-family: var(--np-font-display); font-size: 15px; letter-spacing: .06em; color: var(--np-cyan); }
.np-acct__grade [data-np-title] { color: var(--np-magenta); }
.np-acct__head .np-xpbar { display: block; }
.np-acct__head .np-xpbar__fill { display: block; }
.np-acct__xp { font: 700 10px/1.4 var(--np-font-mono); color: #9ca3af; letter-spacing: .06em; }
.np-acct__daily { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px; margin-bottom: 12px; font-family: var(--np-font-display); font-size: 15px; letter-spacing: .06em; color: var(--np-black); background: var(--np-yellow); border: 2px solid #000; box-shadow: 3px 3px 0 #000; cursor: pointer; transition: transform .1s; }
.np-acct__daily:hover { transform: translate(-1px,-1px); }
.np-acct__daily.is-claimed { background: var(--np-gray-2); color: #9ca3af; box-shadow: none; cursor: default; }
.np-acct__daily.is-claimed:hover { transform: none; }
.np-acct__links { display: grid; gap: 4px; }
.np-acct__links a, .np-acct__links button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; font-family: var(--np-font-display); font-size: 15px; letter-spacing: .05em; color: #fff; background: var(--np-gray-1); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; text-decoration: none; text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.np-acct__links a:hover, .np-acct__links button:hover { background: #000; border-color: var(--np-cyan); color: var(--np-yellow); }
.np-acct__links .np-icon { color: var(--np-cyan); }
.np-acct__logout { color: #9ca3af !important; }

.np-cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 44px; height: 44px; font-family: var(--np-font-display); font-size: 14px; letter-spacing: .05em; color: #fff; background: var(--np-magenta); border: 2px solid #000; box-shadow: 3px 3px 0 var(--np-cyan); text-decoration: none; transition: transform .1s; flex-shrink: 0; }
.np-cart-btn:active { transform: scale(.95); }
.np-cart-btn__text { display: none; }
@media (min-width: 1024px) { .np-cart-btn { width: auto; height: 42px; padding: 0 14px; } .np-cart-btn__text { display: inline; } }
.np-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 1px 6px; font: 700 12px/1.4 var(--np-font-mono); color: var(--np-yellow); background: var(--np-black); border: 1px solid #000; border-radius: 2px; }
.np-cart-btn .np-cart-count { position: absolute; top: -9px; right: -9px; min-width: 20px; padding: 0 5px; font-size: 11px; border-color: var(--np-yellow); }
@media (min-width: 1024px) { .np-cart-btn .np-cart-count { position: static; min-width: 22px; padding: 1px 6px; font-size: 12px; border-color: #000; } }
.np-cart-count.is-empty { display: none; }
.np-cart-count.is-bump { animation: np-bump .4s ease; }

/* 3. Menu mobile a tutto schermo (sotto l'header sticky: 28 + 56 + 4 px) */
.np-mdrawer { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.8); backdrop-filter: blur(2px); display: flex; flex-direction: column; justify-content: flex-start; padding-top: 88px; }
.np-mdrawer[hidden] { display: none; }
.np-mdrawer__panel { width: 100%; max-height: calc(100vh - 96px); overflow-y: auto; background: var(--np-black); color: #fff; border-bottom: 4px solid var(--np-cyan); padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.95); display: flex; flex-direction: column; gap: 14px; animation: np-slide-down .15s ease; }
.np-mdrawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.15); }
.np-mdrawer__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--np-font-display); font-size: 14px; letter-spacing: .05em; color: var(--np-yellow); }
.np-mdrawer__close { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--np-gray-2); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.np-mdrawer__profile { padding: 12px; background: #000; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.np-mdrawer__profile-main { display: flex; align-items: center; gap: 10px; }
.np-mdrawer__profile-name { font-family: var(--np-font-display); font-size: 14px; color: var(--np-yellow); display: inline-flex; align-items: center; gap: 4px; }
.np-mdrawer__profile-stats { font: 400 10px/1.4 var(--np-font-mono); color: #9ca3af; }
.np-mdrawer__daily { background: var(--np-yellow); color: #000; font-family: var(--np-font-display); font-size: 13px; letter-spacing: .05em; padding: 8px 12px; border: 1px solid #000; box-shadow: 2px 2px 0 #000; animation: np-pulse 2s infinite; flex-shrink: 0; white-space: nowrap; }
.np-mdrawer__daily.is-claimed { background: var(--np-gray-2); color: #9ca3af; box-shadow: none; animation: none; }
.np-mdrawer__login { display: flex; align-items: center; gap: 12px; padding: 12px; background: #000; border: 1px solid rgba(255,255,255,.2); text-decoration: none; color: #fff; }
.np-mdrawer__login .np-icon { color: var(--np-cyan); flex-shrink: 0; }
.np-mdrawer__login-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.np-mdrawer__login-title { font-family: var(--np-font-display); font-size: 16px; letter-spacing: .05em; color: var(--np-yellow); }
.np-mdrawer__login-sub { font: 400 10px/1.4 var(--np-font-mono); color: #9ca3af; }
.np-mdrawer__all { display: flex; align-items: center; justify-content: space-between; padding: 12px; font-family: var(--np-font-display); font-size: 16px; letter-spacing: .05em; color: #fff; background: var(--np-magenta); border: 2px solid #000; box-shadow: 3px 3px 0 #000; text-decoration: none; }
.np-mdrawer__all > span { display: inline-flex; align-items: center; gap: 8px; }
.np-mdrawer__list-head { display: flex; justify-content: space-between; font: 700 12px/1.4 var(--np-font-mono); text-transform: uppercase; color: #9ca3af; padding: 0 4px; }
.np-mdrawer__list { display: grid; gap: 6px; }
.np-mdrawer__item { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: var(--np-gray-1); border: 1px solid rgba(255,255,255,.1); text-decoration: none; transition: background-color .15s, border-color .15s; }
.np-mdrawer__item:hover { background: #000; border-color: var(--np-cyan); }
.np-mdrawer__item-main { display: flex; align-items: center; gap: 10px; }
.np-mdrawer__item-main > span { display: flex; flex-direction: column; text-align: left; }
.np-mdrawer__item-name { font-family: var(--np-font-display); font-size: 14px; letter-spacing: .05em; color: #fff; }
.np-mdrawer__item-sub { font: 400 10px/1.4 var(--np-font-mono); color: #9ca3af; }
.np-mdrawer__item-count { font: 700 12px/1.4 var(--np-font-mono); color: var(--np-yellow); background: #000; padding: 2px 8px; border: 1px solid rgba(255,255,255,.1); }
.np-mdrawer__tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.np-mdrawer__tool { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 10px; background: var(--np-gray-1); border: 1px solid rgba(255,255,255,.1); font-family: var(--np-font-display); font-size: 14px; letter-spacing: .05em; color: #fff; text-decoration: none; text-align: left; }
.np-mdrawer__tool .np-icon { color: var(--np-cyan); }
.np-mdrawer__tool--yellow { color: var(--np-yellow); }
.np-mdrawer__tool--muted { color: #9ca3af; }
.np-mdrawer__closebtn { width: 100%; padding: 10px; background: var(--np-gray-2); border: 1px solid rgba(255,255,255,.2); font-family: var(--np-font-display); font-size: 14px; letter-spacing: .05em; color: #d1d5db; }
.np-mdrawer__closebtn:hover { background: #333; color: #fff; }

/* ==========================================================================
   SCANNER DEL VAULT (pannello di ricerca): a tutto schermo su mobile, finestra
   centrata sotto il bordo alto su desktop. Stato "is-scanning" = fascio ciano.
   ========================================================================== */
.np-scan { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; background: rgba(0,0,0,.8); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .15s ease; user-select: text; }
.np-scan.is-open { opacity: 1; }
.np-scan[hidden] { display: none; }
.np-scan__box { width: 100%; height: 100%; background: var(--np-black); color: #fff; display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 1024px) {
  .np-scan { padding: 28px 16px; }
  .np-scan__box { width: 780px; max-width: 100%; height: auto; max-height: calc(100vh - 56px); border: 4px solid #000; box-shadow: 10px 10px 0 var(--np-cyan); border-radius: 8px; animation: np-slide-down .15s ease; }
}
.np-scan__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; background: #000; border-bottom: 1px solid rgba(255,255,255,.1); font: 700 10px/1 var(--np-font-mono); letter-spacing: .12em; color: #9ca3af; }
.np-scan__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--np-font-display); font-size: 16px; letter-spacing: .06em; color: var(--np-yellow); }
.np-scan__title .np-icon { color: var(--np-cyan); }
.np-scan__count { margin-left: auto; white-space: nowrap; color: var(--np-cyan); }
.np-scan__close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--np-gray-2); border: 1px solid rgba(255,255,255,.2); color: #fff; flex-shrink: 0; }
.np-scan__close:hover { border-color: var(--np-magenta); color: var(--np-magenta); }
.np-scan__field { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 14px 0 16px; margin: 0; background: #0B0C10; border-bottom: 2px solid #000; }
.np-scan__field-icon { color: var(--np-cyan); flex-shrink: 0; }
.np-scan__input { flex: 1; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0; outline: none; color: #fff; font: 500 17px/1 var(--np-font-body); caret-color: var(--np-cyan); -webkit-appearance: none; border-radius: 0; }
@media (min-width: 640px) { .np-scan__input { font-size: 19px; } }
.np-scan__input::placeholder { color: #6B7280; }
.np-scan__input::-webkit-search-cancel-button, .np-scan__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.np-scan__clear { display: none; width: 28px; height: 28px; align-items: center; justify-content: center; background: var(--np-gray-2); border: 1px solid rgba(255,255,255,.2); color: #d1d5db; border-radius: 50%; flex-shrink: 0; }
.np-scan.has-value .np-scan__clear { display: inline-flex; }
.np-scan__status { display: flex; align-items: center; gap: 8px; padding: 7px 16px; font: 700 10px/1.4 var(--np-font-mono); letter-spacing: .1em; text-transform: uppercase; color: #9ca3af; background: #000; border-bottom: 1px solid rgba(255,255,255,.08); }
.np-scan__status b { color: var(--np-cyan); font-weight: 700; }
.np-scan__blink { width: 7px; height: 12px; background: var(--np-cyan); opacity: 0; }
.np-scan.is-scanning .np-scan__blink { animation: np-scan-blink .5s steps(2) infinite; }
@keyframes np-scan-blink { from { opacity: 1; } to { opacity: 0; } }
.np-scan__body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; scrollbar-width: thin; scrollbar-color: #333 #111; }
@media (min-width: 1024px) { .np-scan__body { min-height: 220px; } }
.np-scan__beam { position: absolute; left: 0; right: 0; top: -70px; height: 70px; background: linear-gradient(180deg, rgba(0,179,204,0), rgba(0,179,204,.16) 60%, rgba(0,179,204,.35)); border-bottom: 1px solid rgba(0,179,204,.8); box-shadow: 0 2px 12px rgba(0,179,204,.5); pointer-events: none; opacity: 0; z-index: 2; }
.np-scan.is-scanning .np-scan__beam { opacity: 1; animation: np-scan-beam 1s linear infinite; }
@keyframes np-scan-beam { from { top: -70px; } to { top: 100%; } }
.np-scan__section + .np-scan__section { margin-top: 6px; }
.np-scan__label { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 6px; font: 700 10px/1 var(--np-font-mono); letter-spacing: .12em; color: #9ca3af; }
.np-scan__forget { font: 700 10px/1 var(--np-font-mono); letter-spacing: .1em; color: var(--np-magenta); }
.np-scan__forget:hover { color: #fff; }
.np-scan__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px; }
.np-scan__chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--np-gray-1); border: 1px solid rgba(255,255,255,.15); font: 700 11px/1 var(--np-font-mono); letter-spacing: .04em; color: #fff; text-decoration: none; text-transform: uppercase; transition: border-color .15s, color .15s; cursor: pointer; }
.np-scan__chip:hover { border-color: var(--np-cyan); color: var(--np-cyan); }
.np-scan__chip small { font-size: 10px; color: var(--np-yellow); }
.np-scan__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 8px 8px; }
@media (min-width: 640px) { .np-scan__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.np-scan__card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; background: var(--np-gray-1); border: 1px solid rgba(255,255,255,.12); text-decoration: none; color: #fff; transition: border-color .15s; }
.np-scan__card:hover { border-color: var(--np-cyan); }
.np-scan__card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; border: 1px solid rgba(255,255,255,.1); margin-bottom: 4px; }
.np-scan__card-name { font-family: var(--np-font-display); font-size: 14px; letter-spacing: .04em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-scan__card-price { font: 700 11px/1 var(--np-font-mono); color: var(--np-yellow); }
.np-scan__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border: 1px solid transparent; border-radius: 4px; text-decoration: none; color: #fff; transition: background-color .1s, border-color .1s; }
.np-scan__row:hover, .np-scan__row.is-active { background: #000; border-color: var(--np-cyan); }
.np-scan__row.is-sold { opacity: .6; }
.np-scan__thumb { width: 56px; height: 56px; object-fit: cover; background: #fff; border: 1px solid rgba(255,255,255,.15); }
.np-scan__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-scan__name { font-family: var(--np-font-display); font-size: 17px; letter-spacing: .04em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-scan__sub { font: 500 11px/1.3 var(--np-font-body); color: #d1d5db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-scan__meta { font: 700 10px/1.4 var(--np-font-mono); letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-scan mark { background: transparent; color: var(--np-yellow); }
.np-scan__side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.np-scan__price { font-family: var(--np-font-display); font-size: 18px; letter-spacing: .03em; color: var(--np-yellow); white-space: nowrap; }
.np-scan__cond { font: 700 9px/1 var(--np-font-mono); letter-spacing: .08em; color: var(--np-cyan); white-space: nowrap; }
.np-scan__cond--sold { color: var(--np-magenta); }
.np-scan__all { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px; padding: 12px 14px; background: var(--np-magenta); color: #fff; font-family: var(--np-font-display); font-size: 16px; letter-spacing: .05em; border: 2px solid #000; box-shadow: 3px 3px 0 #000; text-decoration: none; transition: filter .15s; }
.np-scan__all:hover, .np-scan__all.is-active { filter: brightness(1.12); outline: 2px solid var(--np-cyan); outline-offset: 1px; }
.np-scan__empty { padding: 28px 16px; text-align: center; font: 500 12px/1.7 var(--np-font-mono); color: #9ca3af; }
.np-scan__empty strong { display: block; margin-bottom: 4px; font-family: var(--np-font-display); font-size: 18px; letter-spacing: .05em; color: var(--np-yellow); }
.np-scan__foot { display: none; gap: 16px; padding: 8px 16px; font: 700 10px/1 var(--np-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #6B7280; border-top: 1px solid rgba(255,255,255,.1); background: #000; }
@media (min-width: 1024px) { .np-scan__foot { display: flex; } }
.np-scan__foot span { display: inline-flex; align-items: center; gap: 4px; }
.np-scan__foot kbd { font: inherit; color: #9ca3af; border: 1px solid #3B4152; border-radius: 3px; padding: 3px 5px; margin-right: 2px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.np-footer { background: var(--np-black); color: #fff; border-top: 4px solid #000; padding: 40px 0 32px; }
.np-footer__assurance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px; background: #000; border: 2px solid rgba(255,255,255,.2); margin-bottom: 32px; font-family: var(--np-font-mono); font-size: 12px; }
@media (min-width: 1024px) { .np-footer__assurance { grid-template-columns: repeat(4, 1fr); } }
.np-footer__assurance-item { display: flex; align-items: flex-start; gap: 12px; }
.np-footer__assurance-icon { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--np-black); border: 1px solid; }
.np-footer__assurance-icon--cyan { color: var(--np-cyan); border-color: var(--np-cyan); }
.np-footer__assurance-icon--magenta { color: var(--np-magenta); border-color: var(--np-magenta); }
.np-footer__assurance-icon--yellow { color: var(--np-yellow); border-color: var(--np-yellow); }
.np-footer__assurance-title { font-family: var(--np-font-display); font-size: 16px; letter-spacing: .05em; color: #fff; }
.np-footer__assurance-text { font-size: 11px; line-height: 1.25; font-weight: 500; color: rgba(255,255,255,.9); }

.np-footer__bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.np-footer__bar { background: var(--np-gray-1); border: 2px solid #000; padding: 12px; border-radius: 6px; box-shadow: 4px 4px 0 var(--np-cyan); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 640px) { .np-footer__bar { padding: 16px; } }
@media (min-width: 768px) { .np-footer__bar { flex-direction: row; } }
.np-footer__bar--alt { background: #141414; border-color: rgba(0,0,0,.8); box-shadow: 4px 4px 0 var(--np-black); }
.np-footer__bar-label { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-family: var(--np-font-display); font-size: 14px; letter-spacing: .05em; color: #fff; }
.np-footer__bar-links { display: grid; gap: 8px; width: 100%; flex: 1; }
.np-footer__bar-links--4 { grid-template-columns: repeat(2, 1fr); }
.np-footer__bar-links--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .np-footer__bar-links--4 { grid-template-columns: repeat(4, 1fr); } .np-footer__bar-links--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .np-footer__bar-links { width: auto; flex: 1; justify-content: flex-end; } }
.np-footer__link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; font-family: var(--np-font-display); font-size: 12px; letter-spacing: .05em; color: #fff; background: #000; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; transition: color .15s, border-color .15s, background-color .15s; }
.np-footer__link:hover { background: var(--np-black); }
.np-footer__link--cyan:hover { color: var(--np-cyan); border-color: var(--np-cyan); }
.np-footer__link--yellow:hover { color: var(--np-yellow); border-color: var(--np-yellow); }
.np-footer__link--magenta:hover { color: var(--np-magenta); border-color: var(--np-magenta); }
.np-footer__link--solid { background: var(--np-magenta); border-color: #000; box-shadow: 2px 2px 0 #000; padding: 8px 16px; }
.np-footer__link--solid:hover { background: var(--np-magenta); filter: brightness(1.1); }

.np-footer__main { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (min-width: 1024px) { .np-footer__main { grid-template-columns: 5fr 7fr; } }
.np-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.np-footer__brand-logo { text-decoration: none; align-self: flex-start; }
.np-footer__brand-text { max-width: 24rem; font: 500 12px/1.6 var(--np-font-mono); color: rgba(255,255,255,.9); }
.np-footer__social-wrap { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.np-footer__social-label { font-family: var(--np-font-display); font-size: 12px; letter-spacing: .05em; color: rgba(255,255,255,.9); }
.np-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.np-footer__social-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: #000; border: 2px solid rgba(255,255,255,.3); border-radius: 4px; font: 700 12px/1.4 var(--np-font-body); color: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s, color .15s; }
.np-footer__social-icon { width: 20px; height: 20px; border-radius: 4px; background: var(--np-black); border: 1px solid rgba(255,255,255,.2); display: inline-flex; align-items: center; justify-content: center; color: var(--np-cyan); transition: color .15s; }
.np-footer__social-link--magenta .np-footer__social-icon { color: var(--np-magenta); }
.np-footer__social-link:hover { transform: translate3d(-2px,-2px,0); }
.np-footer__social-link--cyan:hover { border-color: var(--np-cyan); box-shadow: 3px 3px 0 var(--np-cyan); color: var(--np-cyan); }
.np-footer__social-link--magenta:hover { border-color: var(--np-magenta); box-shadow: 3px 3px 0 var(--np-magenta); color: var(--np-magenta); }
.np-footer__social-link:hover .np-footer__social-icon { color: var(--np-yellow); }
.np-footer__protocol { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 var(--np-font-mono); color: var(--np-cyan); padding-top: 4px; }
.np-footer__protocol a { color: inherit; text-decoration: underline; }

.np-bulletin { padding: 16px; background: rgba(0,0,0,.7); border: 2px solid rgba(255,255,255,.2); border-radius: 8px; display: flex; flex-direction: column; gap: 12px; font-family: var(--np-font-mono); font-size: 12px; }
@media (min-width: 640px) { .np-bulletin { padding: 20px; } }
.np-bulletin__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.np-bulletin__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--np-font-display); font-size: 16px; letter-spacing: .05em; color: var(--np-yellow); }
@media (min-width: 640px) { .np-bulletin__title { font-size: 18px; } }
.np-bulletin__bar { width: 6px; height: 16px; background: var(--np-cyan); border-radius: 2px; display: inline-block; }
.np-bulletin__xp { display: inline-flex; align-items: center; gap: 4px; background: var(--np-yellow); color: var(--np-black); font-family: var(--np-font-display); font-size: 12px; padding: 2px 8px; border-radius: 2px; box-shadow: 2px 2px 0 var(--np-magenta); }
.np-bulletin__text { font-size: 12px; line-height: 1.6; font-weight: 500; color: rgba(255,255,255,.9); }
.np-bulletin__form { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 4px; }
@media (min-width: 640px) { .np-bulletin__form { flex-direction: row; } }
.np-bulletin__input { flex: 1; background: var(--np-gray-1); border: 2px solid rgba(255,255,255,.3); border-radius: 4px; padding: 10px 12px; color: #fff; font: 400 12px/1.4 var(--np-font-mono); outline: none; }
.np-bulletin__input::placeholder { color: rgba(255,255,255,.5); }
.np-bulletin__input:focus { border-color: var(--np-cyan); box-shadow: 0 0 0 1px var(--np-cyan); }
.np-bulletin__input.is-error { border-color: var(--np-magenta); }
.np-bulletin__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--np-magenta); color: #fff; font-family: var(--np-font-display); font-size: 14px; letter-spacing: .05em; padding: 10px 20px; border-radius: 4px; border: 2px solid #000; box-shadow: 3px 3px 0 #000; transition: transform .1s, box-shadow .1s, background-color .15s; flex-shrink: 0; }
@media (min-width: 640px) { .np-bulletin__btn { font-size: 16px; } }
.np-bulletin__btn:hover { background: #ff1493; }
.np-bulletin__btn:active { transform: translate(2px,2px); box-shadow: none; }
.np-bulletin__btn-xp { font: 700 12px/1 var(--np-font-mono); color: var(--np-yellow); }
.np-bulletin__success { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(0,179,204,.1); border: 1px solid var(--np-cyan); border-radius: 4px; }
.np-bulletin__success[hidden] { display: none; }
.np-bulletin__success-title { font-family: var(--np-font-display); font-size: 14px; color: var(--np-cyan); }
.np-bulletin__success-text { font-size: 11px; }
.np-bulletin__note { font-size: 10px; color: rgba(255,255,255,.7); }

.np-footer__legal { padding-top: 24px; margin-top: 16px; border-top: 1px solid rgba(255,255,255,.05); display: grid; grid-template-columns: 1fr; justify-items: center; gap: 12px; font: 400 12px/1.4 var(--np-font-mono); color: rgba(255,255,255,.8); }
@media (min-width: 640px) { .np-footer__legal { grid-template-columns: auto 1fr; align-items: center; } }
.np-footer__legal-center { display: flex; align-items: center; justify-content: center; }
@media (min-width: 640px) { .np-footer__legal-center { justify-self: start; } }
.np-footer__copy { margin-top: 16px; text-align: center; font: 400 12px/1.4 var(--np-font-mono); color: rgba(255,255,255,.6); }
.np-footer__wa { display: inline-flex; align-items: center; gap: 6px; color: var(--np-cyan); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(0,179,204,.4); transition: color .15s; }
.np-footer__wa:hover { color: var(--np-yellow); text-decoration-color: var(--np-yellow); }

.np-wa-float { display: none; position: fixed; bottom: 24px; left: 24px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--np-black); color: #fff; border: 2px solid var(--np-magenta); box-shadow: 3px 3px 0 #000; align-items: center; justify-content: center; transition: all .2s; }
@media (min-width: 768px) { .np-wa-float { display: flex; } }
.np-wa-float:hover { border-color: var(--np-cyan); color: var(--np-cyan); box-shadow: 0 0 18px var(--np-cyan); }
.np-wa-float:active { transform: scale(.95); }

/* ---------------------------------------------------------------------------
 * Footer: link legali + banner cookie
 * ------------------------------------------------------------------------ */
.np-footer__legal-right { display: flex; flex-direction: column; align-items: center; gap: 8px; }
@media (min-width: 640px) { .np-footer__legal-right { align-items: flex-end; justify-self: end; } }
.np-footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 0; }
.np-footer__legal-links a { color: rgba(255,255,255,.75); text-decoration: none; font: 700 11px/1.4 var(--np-font-mono); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.np-footer__legal-links a:hover { color: var(--np-cyan); border-color: var(--np-cyan); }
.np-footer__legal-links a:not(:last-child)::after { content: '·'; display: inline-block; color: rgba(255,255,255,.3); margin: 0 10px; font-weight: 400; }
.np-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95; display: flex; justify-content: center; pointer-events: none; }
.np-cookie[hidden] { display: none; }
.np-cookie__box { pointer-events: auto; display: flex; align-items: center; gap: 14px; max-width: 760px; width: 100%; padding: 14px 18px; background: #111111; color: #fff; border: 3px solid var(--np-yellow); box-shadow: 6px 6px 0 #000; }
.np-cookie__icon { display: inline-flex; flex-shrink: 0; }
.np-cookie__text { flex: 1; font: 500 12px/1.5 var(--np-font-mono); }
.np-cookie__text strong { color: var(--np-yellow); }
.np-cookie__text a { color: var(--np-cyan); font-weight: 700; }
.np-cookie__btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 639px) { .np-cookie { left: 8px; right: 8px; bottom: 8px; } .np-cookie__box { flex-wrap: wrap; padding: 12px 14px; } .np-cookie__icon { display: none; } .np-cookie__btn { width: 100%; } }

/* ---- Gamification (plugin NerdPick Gamification): toast, titolo grado, ospite ---- */
.np-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 9999; padding: 10px 18px; background: var(--np-black); color: var(--np-yellow); border: 2px solid var(--np-yellow); box-shadow: 4px 4px 0 var(--np-magenta); font-size: 16px; letter-spacing: .08em; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }
.np-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.np-ach__title { font-size: .8em; letter-spacing: .12em; }
.np-ach__hint { margin-top: 10px; font: 500 11px/1.5 var(--np-font-mono); color: #9ca3af; }
.np-ach__hint a { color: var(--np-cyan); }
.np-ach__hint strong { color: var(--np-yellow); font-weight: 700; }

/* ---------------------------------------------------------------------------
 * Accessibilita': chi ha attivato "riduci animazioni" nel sistema operativo non
 * riceve i loop decorativi (bagliori dell'icona carrello, pulsazioni, ping,
 * lampo attract mode del pulsante). Le transizioni diventano istantanee invece
 * di sparire, cosi' gli stati hover/active restano leggibili.
 * !important perche' deve vincere sui fogli caricati dopo questo.
 * ------------------------------------------------------------------------ */
/* Eccezione voluta: gli effetti del pulsante carrello (lampo, stacco, bagliore icona)
   restano sempre attivi, anche con la riduzione animazioni. */
@media (prefers-reduced-motion: reduce) {
  :not(.single_add_to_cart_button, .single_add_to_cart_button *, .np-sticky-bar__btn, .np-sticky-bar__btn *, .np-btn__iconbox, .np-btn__iconbox *, .np-vh *, .np-sc *, .np-scan *, .np-acct::after),
  :not(.single_add_to_cart_button, .single_add_to_cart_button *, .np-sticky-bar__btn, .np-sticky-bar__btn *, .np-btn__iconbox, .np-btn__iconbox *, .np-vh *, .np-sc *, .np-scan *, .np-acct::after)::before,
  :not(.single_add_to_cart_button, .single_add_to_cart_button *, .np-sticky-bar__btn, .np-sticky-bar__btn *, .np-btn__iconbox, .np-btn__iconbox *, .np-vh *, .np-sc *, .np-scan *, .np-acct::after)::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}