/* ───────────────────────────────────────────────────
   Variant Store — shared.css
   Global visual enhancements applied to all pages
   ─────────────────────────────────────────────────── */

/* ── CUSTOM SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2b4a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4a4b6a; }

/* ── HERO: GRID + SIDE VIGNETTE ── */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    linear-gradient(to right,  rgba(5,6,18,.85) 0%, transparent 22%, transparent 78%, rgba(5,6,18,.85) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.4) 0%, transparent 45%),
    repeating-linear-gradient(0deg,  transparent, transparent 39px, rgba(255,255,255,.018) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.018) 40px);
}
.hero-badge { position: relative !important; z-index: 1 !important; }
.hero h1    {
  position: relative !important; z-index: 1 !important;
  text-shadow: 0 0 50px rgba(255,255,255,.07), 0 2px 8px rgba(0,0,0,.95) !important;
}
.hero p { position: relative !important; z-index: 1 !important; }

/* ── RANK CARD COLORED GLOW (uses :has for specificity) ── */
.rank-card:has(.rh-frammento):hover {
  border-color: rgba(0,170,170,.6) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 60px rgba(0,170,170,.13) !important;
}
.rank-card:has(.rh-essenza):hover {
  border-color: rgba(68,221,221,.6) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 60px rgba(68,221,221,.13) !important;
}
.rank-card:has(.rh-anima):hover {
  border-color: rgba(255,85,255,.6) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 60px rgba(255,85,255,.13) !important;
}
.rank-card:has(.rh-assoluto):hover {
  border-color: rgba(204,68,204,.6) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 60px rgba(204,68,204,.16) !important;
}

/* ── GENERAL CARD HOVER DEPTH ── */
.rank-card:hover, .kit-card:hover, .svc-card:hover,
.upg-option-card:hover, .hiw-step:hover {
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) !important;
}
.key-card:hover {
  transform: translateY(-6px) !important;
}

/* ── NAV CARD SHIMMER ── */
.nav-card { overflow: hidden !important; position: relative !important; }
.nav-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.055) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .7s ease;
  pointer-events: none; z-index: 1;
}
.nav-card:hover::after { transform: translateX(140%); }
.nav-card > * { position: relative !important; z-index: 2 !important; }
.nav-card:hover { box-shadow: 0 18px 56px rgba(0,0,0,.6) !important; }

/* ── BACK BUTTON SHIMMER ── */
.back-btn { position: relative !important; overflow: hidden !important; }
.back-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform: translateX(-200%);
  transition: transform .5s ease;
  pointer-events: none;
}
.back-btn:hover::after { transform: translateX(200%); }

/* ── CART PANEL SHADOW ── */
.cart-panel.open { box-shadow: -16px 0 80px rgba(0,0,0,.7) !important; }

/* ── GATE CARD GLOW ── */
.gate-card {
  box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 120px rgba(179,102,255,.07) !important;
}

/* ── MODAL GLOW ── */
.modal {
  box-shadow: 0 28px 80px rgba(0,0,0,.75), 0 0 60px rgba(179,102,255,.05) !important;
}

/* ── FOOTER GRADIENT TOP LINE ── */
footer { position: relative; }
footer::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(179,102,255,.4) 30%,
    rgba(0,200,255,.35) 70%,
    transparent 100%);
  pointer-events: none;
}

/* ── SECTION HEADER LEFT ACCENT ── */
.section-header {
  padding-left: 1rem;
  border-left: 2px solid;
  border-image: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.03) 100%) 1;
}

/* ── VERTICAL NAV CARD REDESIGN ── */
.nav-grid { gap: 1.4rem !important; }
.nav-card {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: 250px;
  border-radius: 22px !important;
  border-width: 1px !important;
  border-style: solid !important;
  transition: transform .25s, box-shadow .25s, border-color .25s !important;
}
.nav-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 29px, rgba(255,255,255,.013) 30px),
    repeating-linear-gradient(90deg, transparent, transparent 29px, rgba(255,255,255,.013) 30px);
}
.nav-card-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0 !important; }
.nav-card-content {
  position: relative; z-index: 2 !important;
  padding: 2rem 2rem 1.8rem;
  display: flex; flex-direction: column; flex: 1; height: 100%;
}
.nav-card-icon { font-size: 2.4rem !important; line-height: 1 !important; margin-bottom: .8rem; flex-shrink: 0; }
.nav-card-label {
  font-size: .68rem !important; font-weight: 800 !important;
  letter-spacing: 3px !important; text-transform: uppercase !important; margin-bottom: .3rem;
}
.nav-card-title {
  font-size: 2.4rem !important; font-weight: 900 !important; color: #fff !important;
  font-family: 'Courier New', monospace !important; letter-spacing: 2px !important;
  line-height: 1 !important; margin-bottom: .6rem;
}
.nav-card-sub {
  font-size: .83rem !important; color: rgba(255,255,255,.5) !important;
  line-height: 1.55 !important; margin-bottom: auto !important; padding-bottom: 1.4rem;
}
.nav-card-cta {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 1rem;
  font-size: .88rem; font-weight: 800;
}
.nav-card-arrow { font-size: 1.1rem !important; margin-left: 0 !important; transition: transform .25s !important; }
.nav-card:hover .nav-card-arrow { transform: translateX(5px) !important; }
.nav-card:hover { transform: translateY(-7px) !important; }

/* Per-color hover glow */
.nav-card.nav-green:hover  { border-color:rgba(82,199,122,.55)!important;  box-shadow:0 24px 72px rgba(0,0,0,.65),0 0 80px rgba(82,199,122,.12)!important; }
.nav-card.nav-teal:hover   { border-color:rgba(0,200,200,.55)!important;   box-shadow:0 24px 72px rgba(0,0,0,.65),0 0 80px rgba(0,200,200,.12)!important; }
.nav-card.nav-gold:hover   { border-color:rgba(255,200,0,.55)!important;   box-shadow:0 24px 72px rgba(0,0,0,.65),0 0 80px rgba(255,200,0,.1)!important; }
.nav-card.nav-purple:hover { border-color:rgba(180,80,255,.55)!important;  box-shadow:0 24px 72px rgba(0,0,0,.65),0 0 80px rgba(180,80,255,.12)!important; }
.nav-card.nav-blue:hover   { border-color:rgba(60,140,255,.55)!important;  box-shadow:0 24px 72px rgba(0,0,0,.65),0 0 80px rgba(60,140,255,.12)!important; }
.nav-card.nav-red:hover    { border-color:rgba(204,51,51,.55)!important;   box-shadow:0 24px 72px rgba(0,0,0,.65),0 0 80px rgba(204,51,51,.12)!important; }

@media(max-width:640px) { .nav-card { min-height: 200px; } .nav-card-content { padding: 1.6rem 1.6rem 1.5rem; } .nav-card-title { font-size: 2rem !important; } }