/* ============================================================================
   MM2 SHOP VE — Premium Dark Mode Stylesheet
   Design tokens pulled from starpets.gg + custom premium dark treatment
   ============================================================================ */

/* ── Google Fonts Import ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Syne:wght@700;800;900&display=swap');

/* ── CSS Custom Properties (Design Tokens) ────────────────────────────────── */
:root {
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Syne', sans-serif;

  /* Core palette */
  --bg-primary: #030305;
  --bg-secondary: #08080a;
  --bg-card: #0a0a0d;
  --bg-card-hover: #101015;
  --bg-input: #0f0f14;
  --bg-header: rgba(3, 3, 5, 0.85);

  /* Borders */
  --border-subtle: rgba(176, 38, 255, 0.1);
  --border-input: rgba(176, 38, 255, 0.15);
  --border-input-focus: rgba(176, 38, 255, 0.5);

  /* Text */
  --text-primary: #f8f8fa;
  --text-secondary: #9090aa;
  --text-muted: #60607a;
  --text-price: #f8f8fa;

  /* Rarity Colors (kept as is for semantics, but can be updated) */
  --rarity-ancient: #9c27b0;
  --rarity-ancient-bg: rgba(156, 39, 176, 0.12);
  --rarity-ancient-glow: rgba(156, 39, 176, 0.4);

  --rarity-godly: #d500f9;
  --rarity-godly-bg: rgba(213, 0, 249, 0.12);
  --rarity-godly-glow: rgba(213, 0, 249, 0.4);

  --rarity-unique: #7c4dff;
  --rarity-unique-bg: rgba(124, 77, 255, 0.12);
  --rarity-unique-glow: rgba(124, 77, 255, 0.4);

  /* Accent */
  --accent: #b026ff;
  --accent-hover: #d273ff;
  --accent-glow: rgba(176, 38, 255, 0.3);

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(176, 38, 255, 0.05);
  --shadow-card-hover: 0 8px 40px rgba(176, 38, 255, 0.15);
  --shadow-header: 0 2px 20px rgba(0, 0, 0, 0.6);

  /* Radius (More rounded for minimal look) */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 50px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --max-width: 1400px;
  --header-height: 72px;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

#webgl-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, .logo-text-syne, .section-title, .cart-payment-title, .sell-modal-title, .hero-title, .modal-title {
  font-family: var(--font-display);
}

/* ============================================================================
   COSMIC SPACE PARALLAX BACKGROUND SYSTEM
   GPU-Accelerated, Multi-layered, Continuous Scrolling & Ultra Smooth 60 FPS
   ============================================================================ */

.space-parallax-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, #06060c 0%, #030305 100%);
  contain: strict;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 550vh;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.05s linear;
}

/* ── 1. Nebula Layer ──────────────────────────────────────────────────────── */
.layer-nebula {
  filter: blur(55px);
  opacity: 0.85;
}

.nebula-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: nebulaPulse 12s ease-in-out infinite alternate;
}

.nebula-purple-1 {
  top: 5vh;
  left: -5%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(126, 16, 212, 0.35) 0%, rgba(176, 38, 255, 0.15) 50%, transparent 70%);
  animation-duration: 14s;
}

.nebula-cyan-1 {
  top: 35vh;
  right: -8%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.25) 0%, rgba(0, 150, 255, 0.12) 50%, transparent 70%);
  animation-duration: 18s;
  animation-delay: -4s;
}

.nebula-purple-2 {
  top: 95vh;
  left: 15%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(176, 38, 255, 0.28) 0%, rgba(126, 16, 212, 0.12) 50%, transparent 70%);
  animation-duration: 16s;
  animation-delay: -8s;
}

.nebula-cyan-2 {
  top: 160vh;
  right: 10%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.2) 0%, rgba(79, 172, 254, 0.08) 50%, transparent 70%);
  animation-duration: 20s;
  animation-delay: -2s;
}

.nebula-purple-3 {
  top: 240vh;
  left: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(126, 16, 212, 0.3) 0%, rgba(214, 15, 134, 0.15) 50%, transparent 70%);
  animation-duration: 17s;
  animation-delay: -5s;
}

.nebula-gold-1 {
  top: 320vh;
  right: 5%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(254, 153, 32, 0.22) 0%, rgba(255, 215, 0, 0.08) 50%, transparent 70%);
  animation-duration: 19s;
  animation-delay: -3s;
}

.nebula-cyan-3 {
  top: 400vh;
  left: 8%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.22) 0%, rgba(126, 16, 212, 0.12) 50%, transparent 70%);
  animation-duration: 21s;
  animation-delay: -6s;
}

.nebula-purple-4 {
  top: 480vh;
  right: -5%;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(176, 38, 255, 0.25) 0%, rgba(126, 16, 212, 0.1) 50%, transparent 70%);
  animation-duration: 15s;
  animation-delay: -1s;
}

@keyframes nebulaPulse {
  0% { transform: scale(1) translate(0, 0); opacity: 0.7; }
  50% { transform: scale(1.15) translate(20px, -15px); opacity: 0.95; }
  100% { transform: scale(1) translate(0, 0); opacity: 0.7; }
}

/* ── 2. Stars Layers (Multi-Tiered Depth) ─────────────────────────────────── */
.layer-stars-1 {
  background-image: 
    radial-gradient(1px 1px at 25px 40px, #ffffff, transparent),
    radial-gradient(1px 1px at 80px 180px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 150px 70px, rgba(0, 242, 254, 0.8), transparent),
    radial-gradient(1px 1px at 240px 310px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 320px 120px, rgba(176, 38, 255, 0.8), transparent),
    radial-gradient(1px 1px at 410px 260px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 500px 80px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 590px 220px, rgba(0, 242, 254, 0.7), transparent);
  background-size: 650px 450px;
  animation: starTwinkle1 3s ease-in-out infinite alternate;
}

.layer-stars-2 {
  background-image: 
    radial-gradient(2px 2px at 45px 90px, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(2.5px 2.5px at 180px 250px, #00f2fe, transparent),
    radial-gradient(2px 2px at 290px 60px, #b026ff, transparent),
    radial-gradient(2.5px 2.5px at 390px 340px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 520px 170px, #ffd700, transparent);
  background-size: 550px 420px;
  animation: starTwinkle2 4.5s ease-in-out 1.2s infinite alternate;
}

.layer-stars-3 {
  background-image: 
    radial-gradient(3px 3px at 110px 140px, #ffffff, transparent),
    radial-gradient(3.5px 3.5px at 330px 280px, #00f2fe, transparent),
    radial-gradient(3px 3px at 480px 90px, #d500f9, transparent);
  background-size: 600px 500px;
  animation: starTwinkle3 2.5s ease-in-out 0.6s infinite alternate;
}

@keyframes starTwinkle1 {
  0% { opacity: 0.35; }
  50% { opacity: 0.85; }
  100% { opacity: 0.45; }
}

@keyframes starTwinkle2 {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

@keyframes starTwinkle3 {
  0% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.4; transform: scale(0.95); }
}

/* ── 3. Cosmic Floating Planets (Continuous Downward Journey) ─────────────── */
.floating-planet {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* Planet 1: Purple Gas Giant (Top Left) */
.planet-purple {
  top: 8vh;
  left: 3%;
  width: 125px;
  height: 125px;
  animation: planetFloat1 18s ease-in-out infinite alternate;
}

.planet-purple .planet-atmosphere-glow {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 38, 255, 0.45) 0%, rgba(126, 16, 212, 0.15) 60%, transparent 80%);
  filter: blur(10px);
}

.planet-purple .planet-sphere {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e066ff 0%, #a824e8 30%, #580c8f 65%, #19022e 90%, #080010 100%);
  box-shadow: 
    inset -18px -18px 30px rgba(0, 0, 0, 0.92),
    inset 4px 4px 10px rgba(255, 255, 255, 0.3),
    0 0 25px rgba(176, 38, 255, 0.45);
}

/* Planet 2: Luminous Cyan Moon (Top Right) */
.planet-cyan {
  top: 18vh;
  right: 5%;
  width: 72px;
  height: 72px;
  animation: planetFloat2 14s ease-in-out 1.5s infinite alternate;
}

.planet-cyan .planet-atmosphere-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.5) 0%, rgba(0, 180, 255, 0.15) 60%, transparent 80%);
  filter: blur(8px);
}

.planet-cyan .planet-sphere {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #ffffff 0%, #5bf3ff 30%, #00a2d4 65%, #00364d 90%, #00121a 100%);
  box-shadow: 
    inset -12px -12px 20px rgba(0, 0, 0, 0.88),
    inset 3px 3px 8px rgba(255, 255, 255, 0.7),
    0 0 22px rgba(0, 242, 254, 0.6);
}

/* Planet 3: Golden Celestial Planet with Orbital Rings (Upper Section Right) */
.planet-gold {
  top: 65vh;
  right: 4.5%;
  width: 100px;
  height: 100px;
  animation: planetFloat3 22s ease-in-out 3s infinite alternate;
  filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.4));
}

.planet-gold .planet-atmosphere-glow {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, rgba(255, 140, 0, 0.15) 60%, transparent 80%);
  filter: blur(8px);
}

.planet-gold .planet-sphere {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe0 0%, #ffd700 35%, #d47a00 65%, #472400 90%, #170b00 100%);
  box-shadow: 
    inset -15px -15px 25px rgba(0, 0, 0, 0.9),
    inset 3px 3px 8px rgba(255, 255, 255, 0.5);
}

/* Clean Golden Ring (No square clipping artifact) */
.planet-gold .planet-ring-back,
.planet-gold .planet-ring-front {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 54px;
  margin-top: -27px;
  margin-left: -95px;
  border-radius: 50%;
  border: 7px solid rgba(255, 215, 0, 0.9);
  border-bottom: 5px solid rgba(255, 140, 0, 0.65);
  transform: rotate(-24deg);
  pointer-events: none;
  box-sizing: border-box;
}

.planet-gold .planet-ring-back {
  z-index: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}

.planet-gold .planet-ring-front {
  z-index: 3;
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

/* Planet 4: Crimson Magma Inferno (Mid Section Left) */
.planet-crimson {
  top: 125vh;
  left: 3%;
  width: 110px;
  height: 110px;
  animation: planetFloat1 20s ease-in-out 1s infinite alternate;
}

.planet-crimson .planet-atmosphere-glow {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 60, 60, 0.45) 0%, rgba(220, 20, 60, 0.15) 60%, transparent 80%);
  filter: blur(10px);
}

.planet-crimson .planet-sphere {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a65 0%, #e64a19 32%, #8b0000 65%, #330000 90%, #100000 100%);
  box-shadow: 
    inset -16px -16px 28px rgba(0, 0, 0, 0.92),
    inset 3px 3px 8px rgba(255, 200, 150, 0.4),
    0 0 25px rgba(255, 69, 0, 0.45);
}

/* Planet 5: Emerald Alien Exoplanet (Mid Section Right) */
.planet-emerald {
  top: 190vh;
  right: 5%;
  width: 88px;
  height: 88px;
  animation: planetFloat2 16s ease-in-out 2s infinite alternate;
}

.planet-emerald .planet-atmosphere-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 170, 0.45) 0%, rgba(0, 180, 100, 0.15) 60%, transparent 80%);
  filter: blur(8px);
}

.planet-emerald .planet-sphere {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #a7ffeb 0%, #00e676 30%, #00796b 65%, #002e26 90%, #00120f 100%);
  box-shadow: 
    inset -14px -14px 22px rgba(0, 0, 0, 0.9),
    inset 3px 3px 8px rgba(255, 255, 255, 0.5),
    0 0 22px rgba(0, 230, 118, 0.5);
}

/* Planet 6: Sapphire Ice Giant with Rings (Lower Section Left) */
.planet-ice-ring {
  top: 260vh;
  left: 4%;
  width: 105px;
  height: 105px;
  animation: planetFloat3 24s ease-in-out 0.5s infinite alternate;
  filter: drop-shadow(0 0 16px rgba(0, 195, 255, 0.4));
}

.planet-ice-ring .planet-atmosphere-glow {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, 0.45) 0%, rgba(0, 100, 220, 0.15) 60%, transparent 80%);
  filter: blur(9px);
}

.planet-ice-ring .planet-sphere {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0f7fa 0%, #29b6f6 30%, #0d47a1 65%, #021a40 90%, #010a18 100%);
  box-shadow: 
    inset -16px -16px 26px rgba(0, 0, 0, 0.92),
    inset 4px 4px 9px rgba(255, 255, 255, 0.6);
}

.planet-ice-ring .planet-ring-back,
.planet-ice-ring .planet-ring-front {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 56px;
  margin-top: -28px;
  margin-left: -100px;
  border-radius: 50%;
  border: 6px solid rgba(0, 242, 254, 0.85);
  border-bottom: 4px solid rgba(41, 182, 246, 0.6);
  transform: rotate(20deg);
  pointer-events: none;
  box-sizing: border-box;
}

.planet-ice-ring .planet-ring-back {
  z-index: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}

.planet-ice-ring .planet-ring-front {
  z-index: 3;
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

/* Planet 7: Amethyst Pulsar (Deep Lower Right) */
.planet-amethyst {
  top: 330vh;
  right: 3.5%;
  width: 95px;
  height: 95px;
  animation: planetFloat1 19s ease-in-out 3s infinite alternate;
}

.planet-amethyst .planet-atmosphere-glow {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 15, 134, 0.45) 0%, rgba(126, 16, 212, 0.15) 60%, transparent 80%);
  filter: blur(10px);
}

.planet-amethyst .planet-sphere {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff80df 0%, #d60f86 35%, #5e0840 68%, #200215 90%, #090006 100%);
  box-shadow: 
    inset -15px -15px 26px rgba(0, 0, 0, 0.92),
    inset 3px 3px 8px rgba(255, 255, 255, 0.4),
    0 0 24px rgba(214, 15, 134, 0.5);
}

/* Planet 8: Chronos Amber Star (Bottom Left) */
.planet-amber {
  top: 400vh;
  left: 4%;
  width: 115px;
  height: 115px;
  animation: planetFloat2 21s ease-in-out 1.5s infinite alternate;
}

.planet-amber .planet-atmosphere-glow {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 153, 32, 0.45) 0%, rgba(255, 100, 0, 0.15) 60%, transparent 80%);
  filter: blur(11px);
}

.planet-amber .planet-sphere {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3e0 0%, #fe9920 30%, #e65100 65%, #4a1500 90%, #190500 100%);
  box-shadow: 
    inset -18px -18px 30px rgba(0, 0, 0, 0.92),
    inset 4px 4px 10px rgba(255, 255, 255, 0.5),
    0 0 28px rgba(254, 153, 32, 0.45);
}

/* Planet 9: Neon Eclipse Cosmic Orb (Deep Bottom Right) */
.planet-eclipse {
  top: 475vh;
  right: 5.5%;
  width: 82px;
  height: 82px;
  animation: planetFloat3 17s ease-in-out 4s infinite alternate;
}

.planet-eclipse .planet-atmosphere-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.4) 0%, rgba(126, 16, 212, 0.2) 60%, transparent 80%);
  filter: blur(8px);
}

.planet-eclipse .planet-sphere {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 25%, #ffffff 0%, #00f2fe 18%, #20003b 50%, #04000a 85%, #000000 100%);
  box-shadow: 
    inset -14px -14px 22px rgba(0, 0, 0, 0.95),
    inset 3px 3px 9px rgba(0, 242, 254, 0.8),
    0 0 22px rgba(0, 242, 254, 0.4);
}

@keyframes planetFloat1 {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(16px, -24px) rotate(8deg); }
}

@keyframes planetFloat2 {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-14px, 18px) rotate(-7deg); }
}

@keyframes planetFloat3 {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(12px, -20px) rotate(6deg); }
}

/* ── 4. Shooting Star Animation ──────────────────────────────────────────── */
.shooting-star-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
}

.shooting-star {
  position: absolute;
  top: 10%;
  right: 15%;
  width: 130px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 242, 254, 0.8) 50%, transparent 100%);
  border-radius: 999px;
  filter: drop-shadow(0 0 8px #00f2fe);
  transform: rotate(-35deg) translateX(0);
  opacity: 0;
  animation: shootStar1 9s ease-in-out infinite;
}

.shooting-star.star-2 {
  top: 35%;
  right: 40%;
  width: 90px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(176, 38, 255, 0.8) 50%, transparent 100%);
  filter: drop-shadow(0 0 8px #b026ff);
  animation: shootStar2 14s ease-in-out 5s infinite;
}

.shooting-star.star-3 {
  top: 65%;
  left: 30%;
  width: 110px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(254, 153, 32, 0.8) 50%, transparent 100%);
  filter: drop-shadow(0 0 8px #fe9920);
  animation: shootStar1 12s ease-in-out 8s infinite;
}

.shooting-star.star-4 {
  top: 80%;
  right: 25%;
  width: 100px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 242, 254, 0.8) 50%, transparent 100%);
  filter: drop-shadow(0 0 8px #00f2fe);
  animation: shootStar2 16s ease-in-out 11s infinite;
}

@keyframes shootStar1 {
  0% { opacity: 0; transform: rotate(-35deg) translateX(0); }
  2% { opacity: 1; }
  6% { opacity: 0; transform: rotate(-35deg) translateX(-600px); }
  100% { opacity: 0; transform: rotate(-35deg) translateX(-600px); }
}

@keyframes shootStar2 {
  0% { opacity: 0; transform: rotate(-38deg) translateX(0); }
  2% { opacity: 1; }
  5% { opacity: 0; transform: rotate(-38deg) translateX(-500px); }
  100% { opacity: 0; transform: rotate(-38deg) translateX(-500px); }
}

/* ── 5. Best Sellers Carousel System (Soft Fade Gradient & Snap) ─────────── */
.best-sellers-section {
  position: relative;
  margin-bottom: 2.5rem;
  width: 100%;
}

.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.carousel-mask-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  padding: 12px 0;
}

.carousel-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 0.75rem 1.25rem;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 20px;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track .product-card {
  scroll-snap-align: start;
  flex: 0 0 240px;
  width: 240px;
  margin-bottom: 0;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(14, 10, 26, 0.92);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* Edge Fade Overlays disabled so they never cast dark shadows on bright 3D planets */
.carousel-fade-edge {
  display: none !important;
}

/* Carousel Sleek Glassmorphic Navigation Buttons */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 12, 30, 0.88);
  border: 1px solid rgba(176, 38, 255, 0.45);
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(126, 16, 212, 0.35);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.carousel-nav-btn:hover {
  background: rgba(126, 16, 212, 0.9);
  border-color: #00f2fe;
  color: #fff;
  box-shadow: 0 6px 25px rgba(0, 242, 254, 0.4), 0 0 20px rgba(176, 38, 255, 0.6);
  transform: translateY(-50%) scale(1.1);
}

.carousel-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-nav-btn.prev-btn {
  left: -20px;
}

.carousel-nav-btn.next-btn {
  right: -20px;
}

/* ── 6. Responsive Optimization (Mobile / Tablet) ────────────────────────── */
@media (max-width: 768px) {
  .planet-purple {
    width: 80px;
    height: 80px;
    left: -10px;
    opacity: 0.75;
  }
  .planet-cyan {
    width: 50px;
    height: 50px;
    right: 2%;
    opacity: 0.75;
  }
  .planet-gold {
    width: 65px;
    height: 65px;
    right: -10px;
    opacity: 0.75;
  }
  .planet-gold .planet-ring-back,
  .planet-gold .planet-ring-front {
    width: 120px;
    height: 34px;
    margin-top: -17px;
    margin-left: -60px;
    border-width: 4px;
  }
  .planet-crimson {
    width: 70px;
    height: 70px;
    left: -10px;
    opacity: 0.75;
  }
  .planet-emerald {
    width: 55px;
    height: 55px;
    right: -5px;
    opacity: 0.75;
  }
  .planet-ice-ring {
    width: 65px;
    height: 65px;
    left: -10px;
    opacity: 0.75;
  }
  .planet-ice-ring .planet-ring-back,
  .planet-ice-ring .planet-ring-front {
    width: 125px;
    height: 36px;
    margin-top: -18px;
    margin-left: -62px;
    border-width: 4px;
  }
  .planet-amethyst {
    width: 60px;
    height: 60px;
    right: -5px;
    opacity: 0.75;
  }
  .planet-amber {
    width: 70px;
    height: 70px;
    left: -10px;
    opacity: 0.75;
  }
  .planet-eclipse {
    width: 55px;
    height: 55px;
    right: -5px;
    opacity: 0.75;
  }

  .carousel-nav-btn.prev-btn { left: -10px; width: 38px; height: 38px; font-size: 0.95rem; }
  .carousel-nav-btn.next-btn { right: -10px; width: 38px; height: 38px; font-size: 0.95rem; }
  .carousel-mask-container {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
  }
  .carousel-track .product-card {
    flex: 0 0 210px;
    width: 210px;
  }
}

/* ── Scrollbar Styling ────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 14px;
  z-index: 1000;
  max-width: var(--max-width);
  margin: 0 auto 18px auto;
  padding: 0 20px;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

.header-inner {
  width: 100%;
  margin: 0 auto;
  padding: 10px 22px;
  height: auto;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(14, 10, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 20px rgba(126, 16, 212, 0.2);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent), #d60f86);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 15px rgba(254, 153, 32, 0.3);
}

.logo-text {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  background: linear-gradient(135deg, #d8b4fe 0%, #c084fc 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-flex;
  align-items: baseline;
  text-transform: uppercase;
}

.logo-text .logo-num {
  font-family: 'Syne', sans-serif;
  font-weight: 900;
  font-size: 1.16em;
  line-height: 0.9;
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(-0.5px);
  margin-right: 4px;
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stats in header */
.header-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.stat-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.stat-badge .count {
  color: var(--text-primary);
  font-weight: 700;
}

/* ── Main Container ───────────────────────────────────────────────────────── */
.main-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px;
  position: relative;
  z-index: 1;
}

/* ── Controls Bar: Filtros Inteligentes y Búsqueda ───────────────────────── */
.controls-bar {
  background: rgba(15, 12, 30, 0.72);
  border: 1px solid rgba(176, 38, 255, 0.28);
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

/* Fila 1: Buscador y Ordenar */
.filter-top-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.search-wrapper {
  position: relative;
  flex: 1;
  min-width: 260px;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #00f2fe;
  font-size: 16px;
  pointer-events: none;
  transition: color var(--transition-fast);
}

.search-input {
  width: 100%;
  padding: 13px 40px 13px 46px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  outline: none;
  transition: all 0.2s ease;
}

.search-input::placeholder {
  color: #7b8196;
}

.search-input:focus {
  border-color: #00f2fe;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.2);
}

.search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.search-clear:hover {
  background: rgba(255, 75, 75, 0.4);
  color: #fff;
}

.search-clear.visible {
  display: flex;
}

.sort-select-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 6px 14px;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.sort-select-wrapper:hover {
  border-color: rgba(176, 38, 255, 0.45);
}

.sort-select-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #00f2fe;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  padding-right: 16px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f2fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px;
}

.sort-select option {
  background: #141026;
  color: #fff;
}

/* Fila 2: Categorías / Tabs */
.filter-section-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-section-title {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #00f2fe;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.filter-category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px;
  width: 100%;
}

.filter-category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tab-btn {
  flex: 1;
  min-width: max-content;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: #a0a5b8;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.22s ease;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.category-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(176, 38, 255, 0.4);
}

.category-tab-btn.active {
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.45) 0%, rgba(0, 242, 254, 0.3) 100%);
  border-color: #00f2fe;
  color: #fff;
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.3);
}

/* Fila 3: Rarezas y Precio */
.filter-secondary-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.filter-sub-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rarity-pill-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #c0c5d8;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateY(-1px);
}

.filter-btn.active {
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
}

.filter-btn[data-rarity="all"].active {
  background: #5865f2;
  box-shadow: 0 0 12px rgba(88, 101, 242, 0.45);
}

.filter-btn[data-rarity="Ancient"].active {
  background: #ff4b4b;
  box-shadow: 0 0 12px rgba(255, 75, 75, 0.55);
}

.filter-btn[data-rarity="Chroma"].active {
  background: linear-gradient(90deg, #ff0055, #00f2fe, #ffe600);
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.6);
  color: #000;
  font-weight: 800;
}

.filter-btn[data-rarity="Godly"].active {
  background: #d500f9;
  box-shadow: 0 0 12px rgba(213, 0, 249, 0.55);
}

.filter-btn[data-rarity="Vintage"].active {
  background: #ffd700;
  color: #000;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.55);
}

.filter-btn[data-rarity="Unique"].active {
  background: #ffaa00;
  color: #000;
  box-shadow: 0 0 12px rgba(255, 170, 0, 0.55);
}

/* Sub-card Precio */
.price-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.price-inputs-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-input-wrapper {
  position: relative;
  width: 80px;
}

.price-input-wrapper .dollar-sign {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #00f2fe;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}

.price-input {
  width: 100%;
  padding: 7px 8px 7px 22px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  outline: none;
  transition: all 0.2s ease;
  -moz-appearance: textfield;
}

.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.price-input:focus {
  border-color: #00f2fe;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}

.price-dash {
  color: #7b8196;
  font-weight: 700;
}

.btn-reset-filters {
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #a0a5b8;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-reset-filters:hover {
  background: rgba(255, 75, 75, 0.15);
  border-color: rgba(255, 75, 75, 0.4);
  color: #ff4b4b;
  transform: scale(1.04);
}

.sort-select:focus {
  border-color: var(--border-input-focus);
}

.sort-select-wrapper::after {
  content: '▾';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 12px;
}

/* ── Results Info ─────────────────────────────────────────────────────────── */
.results-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 8px;
}

.results-count {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.results-count strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ── Items Grid ───────────────────────────────────────────────────────────── */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  animation: fadeInGrid 0.5s ease-out;
}

@keyframes fadeInGrid {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Item Card ────────────────────────────────────────────────────────────── */
.item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--transition-spring),
    box-shadow var(--transition-smooth),
    border-color var(--transition-smooth),
    background var(--transition-fast);
  position: relative;
  animation: cardAppear 0.4s ease-out both;
}

@keyframes cardAppear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.item-card:hover {
  transform: translateY(-6px) scale(1.02);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-card-hover);
}

/* Rarity-specific hover glow */
.item-card[data-rarity="Ancient"]:hover {
  border-color: rgba(126, 16, 212, 0.4);
  box-shadow: var(--shadow-card-hover), 0 0 30px var(--rarity-ancient-glow);
}

.item-card[data-rarity="Godly"]:hover {
  border-color: rgba(214, 15, 134, 0.4);
  box-shadow: var(--shadow-card-hover), 0 0 30px var(--rarity-godly-glow);
}

.item-card[data-rarity="Unique"]:hover {
  border-color: rgba(254, 153, 32, 0.4);
  box-shadow: var(--shadow-card-hover), 0 0 30px var(--rarity-unique-glow);
}

/* Rarity indicator stripe at top of card */
.item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: height var(--transition-smooth), opacity var(--transition-smooth);
}

.item-card[data-rarity="Ancient"]::before {
  background: linear-gradient(90deg, var(--rarity-ancient), #9b40dd);
}

.item-card[data-rarity="Godly"]::before {
  background: linear-gradient(90deg, var(--rarity-godly), #e94a9e);
}

.item-card[data-rarity="Unique"]::before {
  background: linear-gradient(90deg, var(--rarity-unique), #ffb84d);
}

.item-card:hover::before {
  height: 4px;
}

/* Card image area: 1:1 Aspect Ratio + Dark Cosmic Radial Background */
.card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at center, rgba(126, 16, 212, 0.22) 0%, rgba(6, 4, 14, 0.72) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.card-image img,
.product-image {
  position: relative;
  z-index: 2;
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(0, 242, 254, 0.2));
}

.item-card:hover .card-image img,
.product-card:hover .card-image img,
.product-card:hover .product-image {
  transform: scale(1.12) rotate(2deg);
}

/* Placeholder for missing images */
.card-image .placeholder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  opacity: 0.15;
}

/* Type badge on image */
.type-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Card body */
.card-body {
  padding: 14px 16px 16px;
}

.card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Rarity tag */
.rarity-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.rarity-tag .rarity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.rarity-tag.ancient {
  background: var(--rarity-ancient-bg);
  color: #b270e5;
}

.rarity-tag.ancient .rarity-dot {
  background: var(--rarity-ancient);
  box-shadow: 0 0 6px var(--rarity-ancient);
}

.rarity-tag.godly {
  background: var(--rarity-godly-bg);
  color: #e66fb6;
}

.rarity-tag.godly .rarity-dot {
  background: var(--rarity-godly);
  box-shadow: 0 0 6px var(--rarity-godly);
}

.rarity-tag.unique {
  background: var(--rarity-unique-bg);
  color: #ffa538;
}

.rarity-tag.unique .rarity-dot {
  background: var(--rarity-unique);
  box-shadow: 0 0 6px var(--rarity-unique);
}

/* Price */
.card-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-price);
  font-variant-numeric: tabular-nums;
}

.card-price .dollar {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-right: 1px;
}

/* ── Empty State ──────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 80px 24px;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.empty-state-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.empty-state-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.empty-state-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 320px;
  margin: 0 auto;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer {
  max-width: var(--max-width);
  margin: 60px auto 0;
  padding: 24px;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
  position: relative;
  z-index: 1;
}

.footer-text {
  font-size: 13px;
  color: var(--text-muted);
}

.footer-text a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.footer-text a:hover {
  text-decoration: underline;
}

/* ── Loading Skeleton ─────────────────────────────────────────────────────── */
.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.skeleton-image {
  width: 100%;
  padding-top: 75%;
  background: linear-gradient(110deg, var(--bg-secondary) 8%, var(--bg-card-hover) 18%, var(--bg-secondary) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

.skeleton-body {
  padding: 14px 16px 16px;
}

.skeleton-line {
  height: 14px;
  background: linear-gradient(110deg, var(--bg-secondary) 8%, var(--bg-card-hover) 18%, var(--bg-secondary) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: 6px;
  margin-bottom: 10px;
}

.skeleton-line:last-child {
  width: 60%;
  margin-bottom: 0;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  .main-container {
    padding: 14px;
  }

  .controls-bar {
    padding: 14px;
    gap: 12px;
  }

  .filter-top-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .search-wrapper {
    min-width: 100%;
    width: 100%;
  }

  .sort-select-wrapper {
    width: 100%;
    justify-content: space-between;
  }

  .filter-category-tabs {
    gap: 8px;
    padding: 2px 2px 6px 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scrollbar-width: none;
  }

  .category-tab-btn {
    flex: 0 0 auto;
    min-width: auto;
    padding: 8px 14px;
    font-size: 0.82rem;
    gap: 6px;
    border-radius: 10px;
    white-space: nowrap;
  }

  .filter-secondary-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rarity-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .filter-btn {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 72px;
    padding: 7px 8px;
    font-size: 0.78rem;
    text-align: center;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* 2-Column Responsive Grid on Mobile & Tablet */
  .items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .product-card {
    border-radius: 14px;
  }

  .card-image {
    padding: 8px;
    height: 110px;
  }

  .card-image img,
  .product-image {
    max-width: 80px;
    max-height: 80px;
  }

  .product-info {
    padding: 8px 10px 10px;
  }

  .product-title {
    font-size: 0.88rem;
    line-height: 1.25;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-price {
    font-size: 0.82rem;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  .product-actions {
    margin-top: 4px;
  }

  .btn-cart {
    width: 100%;
    padding: 6px 6px;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 7px;
  }

  .btn-wishlist {
    width: 28px;
    height: 28px;
    top: 6px;
    right: 6px;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .main-container {
    padding: 8px;
  }

  .card-image {
    padding: 6px;
  }

  .product-info {
    padding: 6px 8px 8px;
  }

  .product-title {
    font-size: 0.82rem;
  }

  .product-price {
    font-size: 0.78rem;
  }

  .btn-cart {
    padding: 6px 4px;
    font-size: 0.72rem;
  }

  .logo-text {
    font-size: 18px;
  }

  .price-input {
    width: 75px;
  }
}

/* ── Item Card Stagger Animation ──────────────────────────────────────────── */
.item-card:nth-child(1) { animation-delay: 0.02s; }
.item-card:nth-child(2) { animation-delay: 0.04s; }
.item-card:nth-child(3) { animation-delay: 0.06s; }
.item-card:nth-child(4) { animation-delay: 0.08s; }
.item-card:nth-child(5) { animation-delay: 0.10s; }
.item-card:nth-child(6) { animation-delay: 0.12s; }
.item-card:nth-child(7) { animation-delay: 0.14s; }
.item-card:nth-child(8) { animation-delay: 0.16s; }
.item-card:nth-child(9) { animation-delay: 0.18s; }
.item-card:nth-child(10) { animation-delay: 0.20s; }
.item-card:nth-child(n+11) { animation-delay: 0.22s; }

/* ── Cart UI ──────────────────────────────────────────────────────────────── */
.cart-float-btn {
  display: none !important;
}

.cart-float-count {
  position: absolute;
  top: 0;
  right: 0;
  background: #ff4b4b;
  color: white;
  font-size: 12px;
  font-weight: bold;
  height: 22px;
  min-width: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0a0a0f;
  padding: 0 6px;
}

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 2, 8, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.cart-sidebar {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 95%;
  max-width: 860px;
  max-height: 88vh;
  background: rgba(14, 10, 26, 0.84);
  border: 1px solid rgba(176, 38, 255, 0.35);
  border-radius: 22px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 45px rgba(176, 38, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 9501;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.3s ease;
  overflow: hidden;
}

.cart-sidebar.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* ═══ 2-Step Smooth Lateral Slider Track ═══ */
.cart-slider-track {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.cart-step-panel {
  width: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  box-sizing: border-box;
  overflow: hidden;
}

.cart-sidebar.show-payment .cart-slider-track {
  transform: translateX(-50%);
}

.cart-header-payment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
}

.cart-header-payment .cart-header-payment-center {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-header-payment .cart-payment-title {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.cart-back-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #00f2fe;
  padding: 6px 14px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.cart-back-btn:hover {
  background: rgba(0, 242, 254, 0.15);
  border-color: rgba(0, 242, 254, 0.4);
  transform: translateX(-3px);
}

.cart-payment-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-payment-body::-webkit-scrollbar {
  width: 6px;
}
.cart-payment-body::-webkit-scrollbar-thumb {
  background: rgba(176, 38, 255, 0.4);
  border-radius: 4px;
}

.payment-channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(88, 101, 242, 0.15);
  border: 1px solid rgba(88, 101, 242, 0.35);
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
  width: fit-content;
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.payment-method-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.payment-method-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(176, 38, 255, 0.4);
  transform: translateY(-2px);
}

.payment-method-card.active {
  background: rgba(176, 38, 255, 0.12);
  border-color: #00f2fe;
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.25);
}

.payment-method-icon {
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.payment-logo-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.payment-pagomovil-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.payment-method-info {
  display: flex;
  flex-direction: column;
}

.payment-method-title {
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}

.payment-method-sub {
  color: #8a8fa3;
  font-size: 0.72rem;
  font-weight: 500;
}

.payment-detail-box {
  background: rgba(0, 0, 0, 0.4);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(176, 38, 255, 0.3);
  margin-top: 4px;
  animation: fadeInDown 0.25s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.payment-titular-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: white;
  font-size: 0.88rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.payment-titular-input:focus {
  border-color: #00f2fe;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
}

.btn-submit-payment {
  background: linear-gradient(135deg, #7e10d4 0%, #00f2fe 100%) !important;
  box-shadow: 0 4px 20px rgba(126, 16, 212, 0.45);
}
.btn-submit-payment:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 25px rgba(0, 242, 254, 0.6);
}

.cart-header {
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
}

.cart-header h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.3px;
}

.cart-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #aaa;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.cart-close-btn:hover {
  background: rgba(255, 75, 75, 0.2);
  color: #ff4b4b;
  border-color: rgba(255, 75, 75, 0.4);
  transform: rotate(90deg);
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 32vh;
}

.cart-items::-webkit-scrollbar {
  width: 6px;
}

.cart-items::-webkit-scrollbar-thumb {
  background: rgba(176, 38, 255, 0.4);
  border-radius: 4px;
}

.cart-empty {
  text-align: center;
  color: #8a8fa3;
  padding: 2.5rem 1rem;
  font-size: 0.95rem;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.035);
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.2s ease;
}

.cart-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 242, 254, 0.3);
}

.cart-item-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(176, 38, 255, 0.3);
  border-radius: 10px;
  padding: 4px;
  flex-shrink: 0;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-price {
  color: #00f2fe;
  font-weight: 800;
  font-size: 0.9rem;
}

.cart-item-remove {
  background: rgba(255, 75, 75, 0.12);
  color: #ff5252;
  border: 1px solid rgba(255, 75, 75, 0.25);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.cart-item-remove:hover {
  background: rgba(255, 75, 75, 0.25);
  color: #fff;
  border-color: #ff5252;
  transform: scale(1.08);
}

.cart-footer {
  padding: 18px 24px 22px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 6, 16, 0.9);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.cart-total-price {
  color: #00f2fe;
  font-size: 1.6rem;
  font-weight: 900;
  text-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}

.btn-checkout {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  color: white;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-checkout:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.btn-add-cart {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(79, 172, 254, 0.3);
  background: rgba(79, 172, 254, 0.1);
  color: #4facfe;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-add-cart:hover {
  background: rgba(79, 172, 254, 0.2);
  transform: translateY(-1px);
}

/* ── New Product Cards & Rarity Neon / Holographic Treatment ─────────────── */

.product-card {
  position: relative;
  background: rgba(14, 10, 26, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  contain: content;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  z-index: 1;
}

.product-card:hover {
  transform: translateY(-6px) scale(1.02);
  z-index: 5;
}

.card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px 12px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  box-sizing: border-box;
  pointer-events: none;
}

.card-top-bar > * {
  pointer-events: auto;
}

.card-top-bar .btn-wishlist {
  position: static;
  width: 32px;
  height: 32px;
}

.rarity-pill {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(14, 10, 26, 0.85);
}

.rarity-ancient { background: rgba(0, 242, 254, 0.15); color: #00f2fe; border: 1px solid rgba(0, 242, 254, 0.4); }
.rarity-godly { background: rgba(176, 38, 255, 0.18); color: #b026ff; border: 1px solid rgba(176, 38, 255, 0.45); }
.rarity-chroma { background: linear-gradient(90deg, #ff007f, #00f2fe, #ffaa00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; border: 1px solid rgba(0, 242, 254, 0.4); padding: 2px 7px; }
.rarity-unique, .rarity-vintage { background: rgba(255, 170, 0, 0.15); color: #ffaa00; border: 1px solid rgba(255, 170, 0, 0.4); }
.rarity-legendary { background: rgba(255, 120, 40, 0.15); color: #ff7828; border: 1px solid rgba(255, 120, 40, 0.4); }

.product-info {
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.price-usd {
  color: #00f2fe;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.3px;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.35);
}

.price-bs {
  color: #8a90a6;
  font-size: 0.78rem;
  font-weight: 500;
}

.btn-cart {
  width: 100%;
  margin-top: auto;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.btn-cart:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.6), rgba(0, 242, 254, 0.6));
  border-color: rgba(0, 242, 254, 0.45);
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 242, 254, 0.3);
  transform: translateY(-1px);
}

.btn-cart:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-cart:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: #777 !important;
}


/* ── Neon Glow by Rarity ── */
/* 1. Ancient: Morado eléctrico */
.product-card[data-rarity="Ancient"]:hover,
.product-card[data-rarity="ancient"]:hover {
  border-color: #b94bff;
  box-shadow: 0 0 25px rgba(185, 75, 255, 0.7), 0 8px 30px rgba(185, 75, 255, 0.35);
}

/* 2. Godly: Rosa neón de alta intensidad */
.product-card[data-rarity="Godly"]:hover,
.product-card[data-rarity="godly"]:hover {
  border-color: #ff50a0;
  box-shadow: 0 0 25px rgba(255, 80, 160, 0.75), 0 8px 30px rgba(255, 80, 160, 0.4);
}

/* 3. Unique: Dorado celestial */
.product-card[data-rarity="Unique"]:hover,
.product-card[data-rarity="unique"]:hover {
  border-color: #ffd700;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.75), 0 8px 30px rgba(255, 170, 0, 0.4);
}

/* 4. Chroma: Borde RGB Animado y Resplandor Exterior Sutil */
.product-card[data-rarity="Chroma"],
.product-card[data-rarity="chroma"] {
  border: 1.5px solid transparent;
  background: 
    linear-gradient(#0b0f19, #0b0f19) padding-box, 
    linear-gradient(135deg, #ff007f, #7928ca, #00dfd8, #00ff7f, #ffbf00, #ff007f) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: chromaShift 4s ease infinite;
}

.product-card[data-rarity="Chroma"]:hover,
.product-card[data-rarity="chroma"]:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: transparent;
  box-shadow: 0 0 20px rgba(121, 40, 202, 0.4), 0 0 35px rgba(0, 223, 216, 0.25), 0 8px 32px rgba(0, 0, 0, 0.8);
}

@keyframes chromaShift {
  0% { background-position: 0% 0%, 0% 50%; }
  50% { background-position: 0% 0%, 100% 50%; }
  100% { background-position: 0% 0%, 0% 50%; }
}

/* 5. Vintage / Legendary: Amarillo eléctrico / Fuego */
.product-card[data-rarity="Vintage"]:hover,
.product-card[data-rarity="vintage"]:hover,
.product-card[data-rarity="Legendary"]:hover,
.product-card[data-rarity="legendary"]:hover {
  border-color: #ff7828;
  box-shadow: 0 0 25px rgba(255, 120, 40, 0.7), 0 8px 30px rgba(255, 255, 0, 0.35);
}

/* ── Wishlist Heart Button on Cards ── */
.btn-wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10, 10, 15, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(6px);
}

.card-top-bar .btn-wishlist {
  position: static;
}

.btn-wishlist:hover {
  transform: scale(1.15);
  color: #ff50a0;
  border-color: rgba(255, 80, 160, 0.5);
  box-shadow: 0 0 12px rgba(255, 80, 160, 0.4);
}

.btn-wishlist.active {
  color: #ff50a0;
  border-color: rgba(255, 80, 160, 0.6);
  background: rgba(255, 80, 160, 0.2);
  box-shadow: 0 0 15px rgba(255, 80, 160, 0.5);
  animation: heartPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes heartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ═══ 2-Column Lateral Layout in Cart ═══ */
.cart-body-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.cart-body-layout.no-cross-sell {
  grid-template-columns: 1fr;
}

.cart-main-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-main-col::-webkit-scrollbar {
  width: 5px;
}
.cart-main-col::-webkit-scrollbar-thumb {
  background: rgba(176, 38, 255, 0.35);
  border-radius: 4px;
}

.cart-side-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(0, 0, 0, 0.28);
  border-left: 1px solid rgba(176, 38, 255, 0.2);
  overflow: hidden;
}

.cross-sell-sidebar-header {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
}

.cross-sell-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.2px;
}

.cross-sell-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #00f2fe;
  background: rgba(0, 242, 254, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 242, 254, 0.3);
}

.cross-sell-items-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cross-sell-items-scroll::-webkit-scrollbar {
  width: 5px;
}
.cross-sell-items-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 242, 254, 0.3);
  border-radius: 4px;
}

.cross-sell-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  transition: all 0.22s ease;
  position: relative;
}

.cross-sell-card:hover {
  border-color: rgba(0, 242, 254, 0.4);
  background: rgba(176, 38, 255, 0.08);
  transform: translateX(2px);
}

.cross-sell-thumb-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.cross-sell-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cross-sell-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cross-sell-tag-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cross-sell-rarity-pill {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.cross-sell-rarity-pill[data-rarity="Ancient"] {
  background: rgba(255, 75, 75, 0.2);
  color: #ff4b4b;
  border: 1px solid rgba(255, 75, 75, 0.4);
}
.cross-sell-rarity-pill[data-rarity="Chroma"] {
  background: linear-gradient(90deg, rgba(255,0,0,0.2), rgba(0,255,0,0.2), rgba(0,0,255,0.2));
  color: #00ffff;
  border: 1px solid rgba(0, 255, 255, 0.4);
}
.cross-sell-rarity-pill[data-rarity="Godly"] {
  background: rgba(176, 38, 255, 0.2);
  color: #d500f9;
  border: 1px solid rgba(176, 38, 255, 0.4);
}
.cross-sell-rarity-pill[data-rarity="Set"] {
  background: rgba(255, 170, 0, 0.2);
  color: #ffaa00;
  border: 1px solid rgba(255, 170, 0, 0.4);
}
.cross-sell-rarity-pill[data-rarity="Vintage"] {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.cross-sell-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cross-sell-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cross-sell-price {
  font-size: 0.82rem;
  color: #00f2fe;
  font-weight: 800;
}

.cross-sell-price-bs {
  font-size: 0.72rem;
  color: #888;
}

.cross-sell-btn-add {
  padding: 6px 12px;
  background: linear-gradient(135deg, #00f2fe, #4facfe);
  color: #030305;
  font-size: 0.76rem;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

.cross-sell-btn-add:hover {
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.6);
}

@media (max-width: 768px) {
  .cart-body-layout {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .cart-main-col {
    border-right: none;
    overflow-y: visible;
  }
  .cart-side-col {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    max-height: 240px;
    flex-shrink: 0;
  }
}

/* ── Wishlist Modal Item Row ── */
.wishlist-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.wishlist-item-row:hover {
  border-color: rgba(255, 80, 160, 0.4);
  background: rgba(255, 80, 160, 0.06);
}

.wishlist-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(0,0,0,0.5);
  padding: 3px;
  flex-shrink: 0;
}

.wishlist-item-details {
  flex: 1;
  min-width: 0;
}

.wishlist-item-title {
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wishlist-item-price {
  color: #00f2fe;
  font-weight: 700;
  font-size: 0.82rem;
}

.wishlist-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-wishlist-cart {
  padding: 6px 12px;
  background: linear-gradient(135deg, #7c4dff, #d500f9);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
}

.btn-wishlist-cart:hover {
  transform: scale(1.05);
}

.btn-wishlist-remove {
  background: none;
  border: none;
  color: #ff4b4b;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 6px;
  transition: transform 0.15s, color 0.15s;
}

.btn-wishlist-remove:hover {
  transform: scale(1.2);
  color: #ff1744;
}

/* ── Header Action Buttons ── */
.header-action-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

#btn-change-user {
  font-family: var(--font-body), 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.3px !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(126, 16, 212, 0.25);
  border: 1px solid rgba(176, 38, 255, 0.5);
  color: #ffffff;
  padding: 0 16px;
  height: 38px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(126, 16, 212, 0.25);
  transition: all 0.2s ease;
}

#btn-change-user:hover {
  background: rgba(176, 38, 255, 0.35);
  border-color: rgba(0, 242, 254, 0.6);
  box-shadow: 0 4px 18px rgba(126, 16, 212, 0.4);
  transform: translateY(-1px) scale(1.03);
}

#header-username {
  font-family: var(--font-body), 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  color: #ffffff !important;
}

.product-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  position: relative;
  z-index: 2;
}

.product-title {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
}

.product-desc {
  color: #B0B0B0;
  font-size: 13px;
  margin: 0;
}

.product-price {
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
}

.product-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-details {
  flex: 1;
  background: linear-gradient(135deg, #7c4dff, #d500f9);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-details:hover {
  opacity: 0.9;
}


/* Update Filters */
.filter-btn, .type-btn {
  border: 1px solid #b026ff !important;
  color: #b026ff !important;
  background: transparent !important;
}

.filter-btn.active, .type-btn.active {
  background: #b026ff !important;
  color: #ffffff !important;
}

/* ============================================================================
   MM2 SHOP VE — Toast Notification System & Cart Animations
   ============================================================================ */

.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  width: 400px;
}

.toast-notification {
  pointer-events: auto;
  background: rgba(12, 12, 18, 0.94);
  border: 1px solid rgba(176, 38, 255, 0.35);
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 25px rgba(176, 38, 255, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  position: relative;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.3s ease, max-height 0.3s ease;
  user-select: none;
}

.toast-notification.toast-show {
  transform: translateX(0);
  opacity: 1;
}

.toast-notification.toast-hide {
  transform: translateX(120%);
  opacity: 0;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  position: relative;
}

.toast-icon-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-icon {
  color: #00e676;
  font-size: 1.45rem;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(0, 230, 118, 0.6));
  animation: toastPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast-thumb-wrap {
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.toast-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.toast-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toast-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #00e676;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.toast-tag-dot {
  width: 6px;
  height: 6px;
  background: #00e676;
  border-radius: 50%;
  box-shadow: 0 0 6px #00e676;
  display: inline-block;
}

.toast-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.toast-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}

.toast-price {
  color: #00f2fe;
  font-weight: 800;
}

.toast-price-bs {
  color: #888;
  font-size: 0.75rem;
}

.toast-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.toast-btn-cart {
  background: linear-gradient(135deg, #7c4dff 0%, #00f2fe 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(124, 77, 255, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.toast-btn-cart:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 242, 254, 0.5);
}

.toast-btn-close {
  background: none;
  border: none;
  color: #777;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.toast-btn-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.toast-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.toast-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #b026ff, #00f2fe, #00e676);
  width: 100%;
  animation: toastCountdown 3.5s linear forwards;
}

.toast-notification:hover .toast-progress-fill {
  animation-play-state: paused;
}

@keyframes toastCountdown {
  from { width: 100%; }
  to { width: 0%; }
}

@keyframes toastPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Animación de Pulso / Rebote en el botón flotante del carrito */
.cart-bounce-anim {
  animation: cartBouncyPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes cartBouncyPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.35) rotate(-6deg); box-shadow: 0 0 25px rgba(0, 242, 254, 0.8); }
  65% { transform: scale(0.92) rotate(4deg); }
  85% { transform: scale(1.08) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@media (max-width: 480px) {
  .toast-container {
    top: auto;
    bottom: 85px;
    right: 12px;
    left: 12px;
    width: auto;
  }
  .toast-notification {
    transform: translateY(120%);
  }
  .toast-notification.toast-show {
    transform: translateY(0);
  }
  .toast-notification.toast-hide {
    transform: translateY(120%);
  }
  .toast-content {
    padding: 10px 12px;
    gap: 8px;
  }
  .toast-thumb-wrap {
    width: 38px;
    height: 38px;
  }
  .toast-btn-cart {
    padding: 6px 10px;
    font-size: 0.74rem;
  }
}

/* ============================================================================
   DELIVERY STEPS SYSTEM (COLLAPSIBLE COMPACT BANNER)
   ============================================================================ */
.delivery-collapse-section {
  background: rgba(15, 12, 30, 0.75);
  border: 1px solid rgba(176, 38, 255, 0.3);
  border-radius: 18px;
  margin-bottom: 1.75rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.delivery-collapse-section:hover {
  border-color: rgba(0, 242, 254, 0.45);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 242, 254, 0.15);
}

.delivery-collapse-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.delivery-collapse-bar:hover {
  background: rgba(255, 255, 255, 0.03);
}

.delivery-trigger-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.delivery-trigger-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.4), rgba(0, 242, 254, 0.3));
  border: 1px solid rgba(0, 242, 254, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #00f2fe;
  flex-shrink: 0;
}

.delivery-trigger-text strong {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.delivery-trigger-sub {
  color: #a0a5b8;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.delivery-trigger-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.delivery-toggle-btn {
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.4) 0%, rgba(0, 242, 254, 0.3) 100%);
  border: 1px solid rgba(0, 242, 254, 0.4);
  color: #00f2fe;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.22s ease;
}

.delivery-toggle-btn:hover {
  background: linear-gradient(135deg, #7e10d4 0%, #00f2fe 100%);
  color: #fff;
  transform: scale(1.04);
}

.delivery-collapse-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, padding 0.35s ease;
  padding: 0 20px;
}

.delivery-collapse-section.expanded .delivery-collapse-content {
  max-height: 2000px;
  opacity: 1;
  padding: 12px 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.delivery-collapse-section.expanded #delivery-toggle-chevron {
  transform: rotate(180deg);
}

.live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0, 255, 170, 0.12);
  border: 1px solid rgba(0, 255, 170, 0.35);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #00ffa2;
  box-shadow: 0 0 12px rgba(0, 255, 170, 0.2);
}

.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ffa2;
  box-shadow: 0 0 8px #00ffa2;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.delivery-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.15rem;
}

.step-card {
  position: relative;
  background: rgba(25, 20, 45, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.4rem 1.15rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 242, 254, 0.45);
  background: rgba(25, 20, 45, 0.85);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 18px rgba(0, 242, 254, 0.2);
}

.step-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #b026ff;
  background: rgba(176, 38, 255, 0.15);
  border: 1px solid rgba(176, 38, 255, 0.3);
  padding: 2px 8px;
  border-radius: 8px;
}

.step-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.3), rgba(0, 242, 254, 0.2));
  border: 1px solid rgba(0, 242, 254, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #00f2fe;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.15);
}

.step-title {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.step-desc {
  color: #9da3ba;
  font-size: 0.85rem;
  line-height: 1.45;
}

/* ── Mobile Compact Trigger Bar ── */
.delivery-mobile-trigger {
  display: none;
  background: rgba(18, 14, 35, 0.85);
  border: 1px solid rgba(176, 38, 255, 0.4);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 1.25rem;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.delivery-mobile-trigger * {
  pointer-events: none;
}

.delivery-mobile-trigger:active {
  transform: scale(0.98);
  border-color: #00f2fe;
}

.delivery-trigger-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.delivery-trigger-icon {
  font-size: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.4), rgba(0, 242, 254, 0.25));
  border: 1px solid rgba(176, 38, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.delivery-trigger-text {
  display: flex;
  flex-direction: column;
}

.delivery-trigger-text strong {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
}

.delivery-trigger-sub {
  color: #00ffa2;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.delivery-trigger-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 242, 254, 0.15);
  border: 1px solid rgba(0, 242, 254, 0.45);
  color: #00f2fe;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

/* ── Delivery Steps Modal Card ── */
.delivery-modal-card {
  background: rgba(15, 14, 24, 0.97);
  border: 1px solid rgba(176, 38, 255, 0.4);
  border-radius: 20px;
  padding: 1.6rem;
  max-width: 440px;
  width: 92%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(126, 16, 212, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.delivery-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delivery-modal-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.delivery-modal-step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  transition: border-color 0.2s;
}

.delivery-modal-step-item:hover {
  border-color: rgba(0, 242, 254, 0.4);
}

.modal-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7e10d4, #00f2fe);
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

.modal-step-content h4 {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0 0 2px 0;
}

.modal-step-content p {
  color: #a0a5b8;
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 768px) {
  .delivery-collapse-bar {
    padding: 12px 14px;
  }
  .delivery-trigger-text strong {
    font-size: 0.95rem;
  }
  .delivery-toggle-btn {
    padding: 6px 12px;
    font-size: 0.82rem;
  }
  .desktop-only {
    display: none !important;
  }
  .delivery-steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .delivery-steps-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ============================================================================
   TRUST METRICS & TESTIMONIALS SECTION
   ============================================================================ */
.trust-metrics-section {
  margin-top: 3.5rem;
  margin-bottom: 2.5rem;
}

.trust-metrics-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  background: rgba(15, 12, 30, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0.5rem;
}

.metric-icon {
  font-size: 1.8rem;
  color: #fe9920;
  filter: drop-shadow(0 0 8px rgba(254, 153, 32, 0.4));
  flex-shrink: 0;
}

.metric-text {
  display: flex;
  flex-direction: column;
}

.metric-number {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.metric-label {
  color: #9499ad;
  font-size: 0.78rem;
  margin-top: 3px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .trust-metrics-bar {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

/* Testimonials Header & Grid */
.testimonials-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 1.5rem;
}

.btn-discord-vouches {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: #5865f2;
  color: #fff;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(88, 101, 242, 0.4);
  transition: all 0.25s ease;
}

.btn-discord-vouches:hover {
  background: #4752c4;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.6);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.testimonial-card {
  background: rgba(20, 16, 35, 0.6);
  border: 1px solid rgba(176, 38, 255, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s ease;
}

.testimonial-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 80, 160, 0.4);
  background: rgba(25, 20, 45, 0.85);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 80, 160, 0.2);
}

.testimonial-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.user-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.user-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
}

.user-item {
  color: #fe9920;
  font-size: 0.76rem;
  font-weight: 600;
  margin-top: 1px;
}

.stars-rating {
  color: #ffd700;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.testimonial-comment {
  color: #d1d5e5;
  font-size: 0.88rem;
  line-height: 1.45;
  margin-bottom: 14px;
}

.testimonial-time {
  color: #72778e;
  font-size: 0.74rem;
  font-weight: 500;
}

@media (max-width: 868px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ============================================================================
   FAQ ACCORDION SECTION
   ============================================================================ */
.faq-section {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

.faq-header {
  margin-bottom: 1.5rem;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: rgba(18, 14, 32, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.faq-item.active {
  border-color: rgba(0, 242, 254, 0.4);
  background: rgba(24, 18, 42, 0.85);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 242, 254, 0.15);
}

.faq-question {
  width: 100%;
  padding: 1.1rem 1.4rem;
  background: none;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  gap: 12px;
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: #00f2fe;
}

.faq-chevron {
  font-size: 0.85rem;
  color: #9da3ba;
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: #00f2fe;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
  padding: 0 1.4rem;
}

.faq-item.active .faq-answer {
  max-height: 250px;
  padding: 0 1.4rem 1.25rem 1.4rem;
}

.faq-answer p {
  color: #b0b6cf;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
}

.faq-answer b {
  color: #fff;
}

/* ============================================================================
   CART COUPON / DISCOUNT CODE SYSTEM
   ============================================================================ */
.cart-coupon-section {
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.coupon-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #c4c8d8;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.coupon-toggle-btn:hover {
  color: #00f2fe;
}

.coupon-input-wrap {
  margin-top: 10px;
}

.coupon-input-group {
  display: flex;
  gap: 8px;
}

.coupon-input-group input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  outline: none;
  transition: border-color 0.2s;
}

.coupon-input-group input:focus {
  border-color: #00f2fe;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
}

.btn-apply-coupon {
  background: linear-gradient(135deg, #00f2fe, #4facfe);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  color: #030305;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-apply-coupon:hover {
  transform: scale(1.04);
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
}

.active-coupon-badge {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 255, 170, 0.15);
  border: 1px solid rgba(0, 255, 170, 0.4);
  color: #00ffa2;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

.btn-remove-coupon {
  background: none;
  border: none;
  color: #ff50a0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 0 2px;
  line-height: 1;
}

.cart-subtotal-row,
.cart-discount-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: #a0a5b8;
  margin-bottom: 6px;
}

/* ============================================================================
   ✨ GLOBAL ANIMATION SUITE & MICRO-INTERACTIONS
   ============================================================================ */

/* 1. Modal Dialog Pop-In Entrance */
.cart-overlay > div {
  animation: modalPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

@keyframes modalPopIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 2. Product Card Holographic Sweep & Lift */
.product-card {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 2;
}

.product-card:hover::before {
  left: 140%;
}

/* 3. Button Micro-interactions (Click Ripple / Astral Press) */
.btn-checkout,
.btn-add-cart,
.btn-filter,
.btn-apply-coupon,
.cart-float-btn {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-checkout:active,
.btn-add-cart:active,
.btn-apply-coupon:active {
  transform: scale(0.96) !important;
}

/* 4. Floating Cart Breathing Glow Animation */
.cart-float-btn {
  animation: floatBtnBreathe 3s ease-in-out infinite alternate;
}

@keyframes floatBtnBreathe {
  0% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(176, 38, 255, 0.3);
  }
  100% {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7), 0 0 24px rgba(0, 242, 254, 0.5);
  }
}

/* 5. Mobile Adjustments for 2-Step Cart */
@media (max-width: 640px) {
  .cart-sidebar {
    width: 96%;
    max-height: 90vh;
    border-radius: 20px;
  }
  
  .payment-methods-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .payment-method-card {
    padding: 10px 12px;
    gap: 8px;
  }

  .cart-items {
    max-height: 42vh;
    padding: 10px 14px;
    gap: 8px;
  }

  .cart-item {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
  }

  .cart-item-name {
    font-size: 0.88rem;
    margin-bottom: 2px;
  }

  .cart-item-price {
    font-size: 0.82rem;
  }

  .cart-item-remove {
    width: 28px;
    height: 28px;
  }

  .cart-payment-body {
    padding: 12px 14px;
    gap: 10px;
  }

  .cart-header {
    padding: 14px 16px;
  }

  .cart-footer {
    padding: 12px 16px 16px 16px;
  }

  .cart-total-price {
    font-size: 1.35rem;
  }

  .btn-checkout {
    padding: 11px 14px;
    font-size: 0.9rem;
  }
}

@media (max-width: 400px) {
  .payment-methods-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   🌌 CUSTOM COSMIC ALERT MODAL (Replaces ugly browser alerts)
   ============================================================================ */
.astral-alert-box {
  background: linear-gradient(180deg, rgba(22, 17, 38, 0.98) 0%, rgba(10, 8, 20, 0.98) 100%);
  border: 1px solid rgba(255, 170, 0, 0.5);
  border-radius: 20px;
  padding: 26px 28px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 170, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: scale(0.9) translateY(12px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#astral-alert-overlay.active .astral-alert-box {
  transform: scale(1) translateY(0);
}

.astral-alert-icon-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.astral-alert-icon {
  font-size: 2.2rem;
  z-index: 2;
  filter: drop-shadow(0 0 12px rgba(255, 170, 0, 0.6));
  animation: alertIconFloat 2s ease-in-out infinite alternate;
}

@keyframes alertIconFloat {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-4px) scale(1.08); }
}

.astral-alert-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 0, 0.25) 0%, transparent 70%);
  animation: ringPulse 2s infinite;
}

@keyframes ringPulse {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

.astral-alert-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px 0;
  letter-spacing: -0.2px;
}

.astral-alert-body {
  color: #c4c8db;
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 20px;
}

.astral-alert-body strong,
.astral-alert-body b {
  color: #00f2fe;
}

.astral-alert-btn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 87, 34, 0.4);
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}

.astral-alert-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 6px 24px rgba(255, 87, 34, 0.6);
}

/* ============================================================================
   SELL ITEMS MODAL REDESIGN ("VÉNDENOS TUS OBJETOS")
   ============================================================================ */
.sell-modal-card {
  background: linear-gradient(180deg, #16112a 0%, #0c0919 100%);
  border: 1px solid rgba(176, 38, 255, 0.4);
  border-radius: 22px;
  padding: 24px;
  max-width: 440px;
  width: 92%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(176, 38, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  animation: alertPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sell-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.sell-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sell-modal-icon {
  font-size: 1.6rem;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.35), rgba(0, 242, 254, 0.2));
  border: 1px solid rgba(0, 242, 254, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sell-modal-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.3px;
}

.sell-modal-subtitle {
  font-size: 0.78rem;
  color: #a0a5b8;
  display: block;
  margin-top: 2px;
}

.sell-warning-box {
  background: rgba(0, 242, 254, 0.05);
  border: 1px solid rgba(0, 242, 254, 0.25);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sell-warning-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #00f2fe;
  letter-spacing: 0.5px;
}

.sell-warning-text {
  font-size: 0.86rem;
  line-height: 1.45;
  color: #c4c8dc;
  margin: 0;
}

.sell-warning-text strong {
  color: #00f2fe;
}

.sell-channel-instruction {
  font-size: 0.84rem;
  color: #8f94a8;
  margin: 0;
  text-align: center;
}

.sell-channel-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-sell-channel {
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-sell-channel:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.btn-sell-discord {
  background: #5865f2;
  box-shadow: 0 4px 15px rgba(88, 101, 242, 0.4);
}
.btn-sell-discord:hover {
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.6);
}

.btn-sell-ig {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 4px 15px rgba(220, 39, 67, 0.4);
}
.btn-sell-ig:hover {
  box-shadow: 0 6px 20px rgba(220, 39, 67, 0.6);
}

.btn-sell-tg {
  background: #0088cc;
  box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
}
.btn-sell-tg:hover {
  box-shadow: 0 6px 20px rgba(0, 136, 204, 0.6);
}

.btn-sell-cancel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a0a5b8;
  padding: 10px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sell-cancel:hover {
  background: rgba(255, 75, 75, 0.15);
  border-color: rgba(255, 75, 75, 0.4);
  color: #ff4b4b;
}

/* ── Liquid Water Ripple Splash Animation for Cart Buttons ── */
.water-splash-hit {
  animation: waterSplashBounce 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes waterSplashBounce {
  0% {
    transform: scale(1.3, 0.85);
    box-shadow: 0 0 45px #00f2fe, 0 0 25px #b026ff;
  }
  40% {
    transform: scale(0.92, 1.15);
    box-shadow: 0 0 30px #b026ff;
  }
  70% {
    transform: scale(1.06, 0.96);
  }
  100% {
    transform: scale(1, 1);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
  }
}



/* ── Astral Dynamic Island Capsule Notification ── */
.toast-container {
  position: fixed;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  width: auto;
  max-width: 92vw;
}

.astral-capsule-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 10, 26, 0.94);
  border: 1.5px solid rgba(0, 242, 254, 0.55);
  border-radius: 999px;
  padding: 6px 8px 6px 10px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 242, 254, 0.35);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  transform: translateY(-20px) scale(0.92);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  cursor: pointer;
}

.astral-capsule-toast.capsule-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.astral-capsule-toast.capsule-hide {
  opacity: 0;
  transform: translateY(-16px) scale(0.9);
}

.capsule-left {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 2px;
}

.capsule-img-box {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.25) 0%, rgba(14, 10, 26, 0.8) 100%);
  border: 1.5px solid rgba(0, 242, 254, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.capsule-img-box img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.capsule-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.capsule-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #00f2fe;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.capsule-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.capsule-price {
  color: #00f2fe;
  font-weight: 800;
  margin-left: 4px;
}

.capsule-btn-view {
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #7e10d4 0%, #00f2fe 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.18s ease, filter 0.18s ease;
  margin-left: 6px;
}

.capsule-btn-view:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🛒 ULTRA-PREMIUM CART MODAL & 2-STEP FULL-PANEL LATERAL SLIDER
   ═══════════════════════════════════════════════════════════════════════════════ */

.cart-sidebar {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 920px;
  max-width: 95vw;
  height: 86vh;
  max-height: 720px;
  background: rgba(12, 10, 22, 0.96);
  border: 1.5px solid rgba(176, 38, 255, 0.35);
  border-radius: 24px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(126, 16, 212, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: 9501;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.3s ease;
  overflow: hidden;
}

.cart-sidebar.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* ═══ 2-Step Smooth Lateral Slider Track (TODO EL PANEL SE DESLIZA) ═══ */
.cart-slider-track {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.cart-step-panel {
  width: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.cart-sidebar.show-payment .cart-slider-track {
  transform: translateX(-50%);
}

/* ═══ STEP 1: Body Layout & Pinned Bottom Checkout ═══ */
.cart-header {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.cart-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a0a5b8;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.cart-close-btn:hover {
  background: rgba(255, 75, 75, 0.2);
  border-color: rgba(255, 75, 75, 0.4);
  color: #ff4b4b;
  transform: scale(1.08);
}

.cart-body-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.cart-body-layout.no-cross-sell {
  grid-template-columns: 1fr;
}

.cart-main-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-items-scroll-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cart-items-scroll-wrap::-webkit-scrollbar {
  width: 5px;
}
.cart-items-scroll-wrap::-webkit-scrollbar-thumb {
  background: rgba(176, 38, 255, 0.35);
  border-radius: 4px;
}

/* Footer Pinned al Fondo */
.cart-footer {
  flex-shrink: 0;
  background: rgba(10, 8, 20, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.4);
}

.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.cart-total-price {
  font-family: 'Syne', sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
  color: #00f2fe;
  text-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
  line-height: 1;
}

.checkout-channels-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-checkout {
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: none;
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.btn-checkout:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
}

.btn-channel-discord {
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
  box-shadow: 0 4px 18px rgba(88, 101, 242, 0.4);
}
.btn-channel-ig {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 4px 18px rgba(220, 39, 67, 0.35);
}
.btn-channel-tg {
  background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
  box-shadow: 0 4px 18px rgba(0, 136, 204, 0.35);
}

.checkout-footer-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #8a8fa3;
  font-size: 0.74rem;
  font-weight: 600;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   💳 STEP 2: REDISEÑO COMPLETO DE MÉTODOS DE PAGO
   ═══════════════════════════════════════════════════════════════════════════════ */

.cart-header-payment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-back-btn {
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.35);
  color: #00f2fe;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 800;
  transition: all 0.2s ease;
}

.cart-back-btn:hover {
  background: rgba(0, 242, 254, 0.22);
  border-color: #00f2fe;
  transform: translateX(-3px);
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.35);
}

.cart-header-payment-center {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-payment-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.payment-channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(126, 16, 212, 0.2);
  border: 1px solid rgba(176, 38, 255, 0.4);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #d8b4fe;
}

.cart-payment-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-payment-body::-webkit-scrollbar {
  width: 5px;
}
.cart-payment-body::-webkit-scrollbar-thumb {
  background: rgba(176, 38, 255, 0.35);
  border-radius: 4px;
}

.payment-intro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-intro-text {
  color: #a5b0cb;
  font-size: 0.88rem;
  font-weight: 500;
}

.payment-security-pill {
  font-size: 0.75rem;
  font-weight: 800;
  color: #00e676;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.3);
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Grid de Métodos */
.payment-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.payment-method-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(20, 16, 36, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.payment-method-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method-card:hover {
  background: rgba(30, 24, 52, 0.75);
  border-color: rgba(0, 242, 254, 0.4);
  transform: translateY(-2px);
}

.payment-method-card.active {
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.25) 0%, rgba(0, 242, 254, 0.15) 100%);
  border-color: #00f2fe;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 242, 254, 0.25);
  transform: translateY(-2px);
}

.payment-method-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-right: 12px;
}

.payment-method-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.zelle-glow { box-shadow: 0 0 12px rgba(116, 44, 255, 0.4); }
.pm-glow { background: rgba(0, 242, 254, 0.15); color: #00f2fe; border: 1px solid rgba(0, 242, 254, 0.35); box-shadow: 0 0 12px rgba(0, 242, 254, 0.35); }
.binance-glow { box-shadow: 0 0 12px rgba(243, 186, 47, 0.4); }
.zinli-glow { box-shadow: 0 0 12px rgba(108, 92, 231, 0.4); }

.payment-method-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.payment-method-title {
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  font-family: 'Syne', sans-serif;
}

.payment-method-sub {
  color: #8a8fa3;
  font-size: 0.76rem;
  font-weight: 500;
}

.payment-card-check {
  color: #333;
  font-size: 1.2rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.payment-method-card.active .payment-card-check {
  color: #00f2fe;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.6);
  transform: scale(1.1);
}

/* Detalles del Método Activo */
.payment-details-wrapper {
  margin-top: 4px;
}

.payment-detail-box {
  background: rgba(14, 10, 26, 0.85);
  border: 1px solid rgba(176, 38, 255, 0.35);
  border-radius: 18px;
  padding: 16px 20px;
  animation: fadeInDownDetail 0.28s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@keyframes fadeInDownDetail {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.detail-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.88rem;
  margin-bottom: 12px;
}

.copy-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  gap: 10px;
  flex-wrap: wrap;
}

.data-block {
  display: flex;
  flex-direction: column;
}

.data-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #8a8fa3;
  letter-spacing: 0.5px;
}

.data-value {
  font-size: 0.94rem;
  font-weight: 800;
  color: #00f2fe;
  font-family: monospace;
}

.btn-copy-action {
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.35);
  color: #00f2fe;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  margin-left: auto;
}

.btn-copy-action:hover {
  background: #00f2fe;
  color: #05040a;
  transform: scale(1.05);
}

.btn-copy-action.copied {
  background: #00e676 !important;
  color: #05040a !important;
  border-color: #00e676 !important;
}

.pm-calc-banner {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.15) 0%, rgba(126, 16, 212, 0.15) 100%);
  border: 1px solid rgba(0, 242, 254, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.95rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.titular-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.titular-field-wrap label {
  color: #a5b0cb;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-titular-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.payment-titular-input:focus {
  border-color: #00f2fe;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
}

/* Footer del Paso 2 */
.cart-footer-payment {
  background: rgba(10, 8, 20, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-submit-payment {
  background: linear-gradient(135deg, #7e10d4 0%, #00f2fe 100%) !important;
  font-size: 1.05rem !important;
  padding: 14px 20px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 25px rgba(0, 242, 254, 0.4) !important;
}

@media (max-width: 768px) {
  .cart-sidebar {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    top: 0;
    left: 0;
    transform: translateY(100%);
  }
  .cart-sidebar.active {
    transform: translateY(0);
  }
  .cart-body-layout {
    grid-template-columns: 1fr;
  }
  .cart-side-col {
    display: none !important;
  }
  .payment-methods-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Clean Payment Info Card ── */
.payment-clean-info-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(14, 10, 26, 0.85);
  border: 1px solid rgba(0, 242, 254, 0.35);
  border-radius: 16px;
  padding: 16px 18px;
  margin-top: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.info-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00f2fe;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.info-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-card-title {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  margin: 0;
  font-family: 'Syne', sans-serif;
}

.info-card-desc {
  color: #a5b0cb;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🌌 ULTRA-SLEEK FLOATING HEADER (DESKTOP & MOBILE RESPONSIVE)
   ═══════════════════════════════════════════════════════════════════════════════ */

.header {
  position: sticky;
  top: 12px;
  z-index: 1000;
  max-width: var(--max-width);
  margin: 0 auto 18px auto;
  padding: 0 20px;
  background: transparent;
}

.header-inner {
  width: 100%;
  margin: 0 auto;
  padding: 8px 18px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(14, 10, 26, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), 0 0 25px rgba(126, 16, 212, 0.25);
}

.header-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #00f2fe;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.45);
}

.logo-text {
  font-family: 'Syne', sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, #fff 0%, #d8b4fe 60%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-flex;
  align-items: baseline;
  text-transform: uppercase;
}

.logo-text .logo-num {
  font-weight: 900;
  font-size: 1.15em;
  color: #00f2fe;
  -webkit-text-fill-color: #00f2fe;
  margin-right: 3px;
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Header Buttons */
.header-action-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
  border: none;
  user-select: none;
  white-space: nowrap;
}

.btn-header-sell {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
  border: 1px solid rgba(213, 0, 249, 0.55);
  color: white;
  box-shadow: 0 4px 15px rgba(126, 16, 212, 0.3);
}
.btn-header-sell i { color: #00f2fe; }

.btn-header-discord {
  background: #5865f2;
  color: white;
  box-shadow: 0 4px 15px rgba(88, 101, 242, 0.35);
}

.btn-header-wishlist {
  background: rgba(255, 80, 160, 0.15);
  border: 1px solid rgba(255, 80, 160, 0.45);
  color: #fff;
}
.btn-header-wishlist i { color: #ff50a0; }

.btn-header-cart {
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.45), rgba(0, 242, 254, 0.35));
  border: 1.5px solid rgba(0, 242, 254, 0.6);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.25);
}
.btn-header-cart i { color: #00f2fe; }

.btn-header-user {
  background: rgba(126, 16, 212, 0.25);
  border: 1px solid rgba(176, 38, 255, 0.5);
  color: #fff;
  box-shadow: 0 4px 15px rgba(126, 16, 212, 0.25);
}
.btn-header-user i { color: #00f2fe; }

.header-action-btn:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.15);
}

.wishlist-count-badge {
  background: #ff50a0;
  color: #fff;
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 800;
  min-width: 18px;
  text-align: center;
}

.cart-count-badge {
  background: #00f2fe;
  color: #05040a;
  font-size: 0.75rem;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 900;
  min-width: 18px;
  text-align: center;
}

/* ════ MOBILE RESPONSIVE (Single compact row, zero ugly wrapping) ════ */
@media (max-width: 768px) {
  .header {
    top: 6px;
    padding: 0 10px;
    margin-bottom: 12px;
  }

  .header-inner {
    height: 48px !important;
    min-height: 48px !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .header-brand .logo {
    gap: 7px;
  }

  .logo-img {
    width: 30px !important;
    height: 30px !important;
  }

  .logo-text {
    font-size: 0.95rem !important;
    letter-spacing: -0.2px;
  }

  .logo-ve {
    display: none;
  }

  .header-stats {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .header-action-btn {
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 0.8rem !important;
    gap: 5px !important;
  }

  /* Compact button icon style on mobile */
  .btn-header-sell {
    padding: 0 9px !important;
  }
  .btn-header-sell .btn-text {
    display: none;
  }

  .btn-header-discord {
    padding: 0 9px !important;
  }
  .btn-header-discord .btn-text {
    display: none;
  }

  .btn-header-wishlist {
    padding: 0 8px !important;
    gap: 4px !important;
  }
  .btn-header-wishlist .btn-text {
    display: none;
  }

  .btn-header-cart {
    padding: 0 10px !important;
    gap: 5px !important;
  }
  .btn-header-cart .btn-text {
    display: inline-block;
    font-size: 0.78rem;
  }

  .btn-header-user {
    padding: 0 9px !important;
    max-width: 100px;
  }
  .btn-header-user .user-text {
    max-width: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
  }
}

@media (max-width: 400px) {
  .logo-text {
    font-size: 0.85rem !important;
  }
  .btn-header-cart .btn-text {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🚀 ASTRAL DYNAMIC CAPSULE NOTIFICATION (BOTTOM FLOATING PILL)
   ═══════════════════════════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  bottom: 24px;
  top: auto !important;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  width: auto;
  max-width: 94vw;
}

.astral-capsule-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 10, 26, 0.95);
  border: 1.5px solid rgba(0, 242, 254, 0.6);
  border-radius: 999px;
  padding: 6px 10px 6px 10px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 242, 254, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  transform: translateY(24px) scale(0.92);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  cursor: pointer;
  user-select: none;
}

.astral-capsule-toast.capsule-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.astral-capsule-toast.capsule-hide {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
}

.capsule-left {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 2px;
}

.capsule-img-box {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.25) 0%, rgba(14, 10, 26, 0.8) 100%);
  border: 1.5px solid rgba(0, 242, 254, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.capsule-img-box img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.capsule-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.capsule-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #00f2fe;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.capsule-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.capsule-price {
  color: #00f2fe;
  font-weight: 800;
  margin-left: 4px;
}

.capsule-btn-view {
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #7e10d4 0%, #00f2fe 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.18s ease, filter 0.18s ease;
  margin-left: 4px;
}

.capsule-btn-view:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
}

@media (max-width: 480px) {
  .toast-container {
    bottom: 18px;
  }
  .astral-capsule-toast {
    padding: 5px 8px;
    gap: 8px;
  }
  .capsule-img-box {
    width: 30px;
    height: 30px;
  }
  .capsule-name {
    font-size: 0.8rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .capsule-btn-view {
    padding: 5px 10px;
    font-size: 0.74rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🌌 DEFINITIVE HEADER SYSTEM (DESKTOP & MOBILE RESPONSIVE 100% NO-OVERFLOW)
   ═══════════════════════════════════════════════════════════════════════════════ */

.header {
  position: sticky;
  top: 10px;
  z-index: 1000;
  width: 100%;
  max-width: var(--max-width, 1200px);
  margin: 0 auto 16px auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.header-inner {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 8px 18px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(14, 10, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), 0 0 25px rgba(126, 16, 212, 0.25);
}

.header-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.logo-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #00f2fe;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.45);
  flex-shrink: 0;
}

.logo-text {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  background: linear-gradient(135deg, #d8b4fe 0%, #c084fc 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-flex;
  align-items: baseline;
  text-transform: uppercase;
}

.logo-text .logo-num {
  font-family: 'Syne', sans-serif;
  font-weight: 900;
  font-size: 1.16em;
  line-height: 0.9;
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(-0.5px);
  margin-right: 4px;
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.header-action-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  border: none;
  user-select: none;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
}

.btn-header-sell {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
  border: 1px solid rgba(213, 0, 249, 0.55);
  color: white;
  box-shadow: 0 4px 15px rgba(126, 16, 212, 0.3);
}
.btn-header-sell i { color: #00f2fe; }

.btn-header-discord {
  background: #5865f2;
  color: white;
  box-shadow: 0 4px 15px rgba(88, 101, 242, 0.35);
}

.btn-header-wishlist {
  background: rgba(255, 80, 160, 0.15);
  border: 1px solid rgba(255, 80, 160, 0.45);
  color: #fff;
}
.btn-header-wishlist i { color: #ff50a0; }

.btn-header-cart {
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.45), rgba(0, 242, 254, 0.35));
  border: 1.5px solid rgba(0, 242, 254, 0.6);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.25);
}
.btn-header-cart i { color: #00f2fe; }

.btn-header-user {
  background: rgba(126, 16, 212, 0.25);
  border: 1px solid rgba(176, 38, 255, 0.5);
  color: #fff;
  box-shadow: 0 4px 15px rgba(126, 16, 212, 0.25);
}
.btn-header-user i { color: #00f2fe; }

.header-action-btn:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.15);
}

.wishlist-count-badge {
  background: #ff50a0;
  color: #fff;
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 800;
  min-width: 16px;
  text-align: center;
}

.cart-count-badge {
  background: #00f2fe;
  color: #05040a;
  font-size: 0.74rem;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 900;
  min-width: 16px;
  text-align: center;
}

/* ════ MOBILE SCREEN ADAPTATION (PERFECT FIT ON ALL PHONES) ════ */
@media (max-width: 768px) {
  .header {
    top: 6px;
    padding: 0 8px !important;
    margin-bottom: 10px;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-inner {
    height: 48px !important;
    min-height: 48px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }

  .logo {
    gap: 6px !important;
  }

  .logo-img {
    width: 28px !important;
    height: 28px !important;
  }

  .logo-text {
    font-size: 0.88rem !important;
  }

  .logo-ve {
    display: none !important;
  }

  .header-stats {
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  /* All buttons become compact circular/pill icon buttons */
  .header-action-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0.82rem !important;
    justify-content: center !important;
  }

  .header-action-btn .btn-text,
  .header-action-btn .user-text {
    display: none !important;
  }

  /* Floating micro notification badges */
  .wishlist-count-badge,
  .cart-count-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    font-size: 0.62rem !important;
    padding: 1px 4px !important;
    min-width: 14px !important;
    border-radius: 999px !important;
    line-height: 1.1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  }

  /* Carrito button highlighted on mobile */
  .btn-header-cart {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    background: linear-gradient(135deg, rgba(126, 16, 212, 0.65), rgba(0, 242, 254, 0.55)) !important;
    border: 1.5px solid #00f2fe !important;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.4) !important;
  }
}

@media (max-width: 360px) {
  .logo-text {
    font-size: 0.78rem !important;
  }
  .header-stats {
    gap: 3px !important;
  }
  .header-action-btn {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
  }
}

/* ═══ Perfeccionamiento de Filtros: Distribución Equitativa Sin Huecos Vacíos ═══ */
.filter-secondary-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: stretch;
}

.rarity-pill-group {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
}

.rarity-pill-group .filter-btn {
  flex: 1 1 auto !important;
  min-width: 85px !important;
  text-align: center !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.filter-btn[data-rarity="Legendary"].active {
  background: linear-gradient(135deg, #ff4500 0%, #ff8c00 100%);
  color: #fff;
  box-shadow: 0 0 14px rgba(255, 69, 0, 0.6);
}

@media (max-width: 992px) {
  .filter-secondary-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   📱 MODERN MOBILE FILTERS BAR & BOTTOM SHEET SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Desktop view default */
.desktop-filter-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.mobile-filter-view {
  display: none !important;
}

@media (max-width: 768px) {
  .desktop-filter-view {
    display: none !important;
  }

  .mobile-filter-view {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .controls-bar {
    padding: 10px 12px !important;
    margin-bottom: 16px !important;
    background: rgba(14, 10, 26, 0.75) !important;
    border-radius: 18px !important;
  }

  /* Search Box in Mobile */
  .mobile-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    height: 42px;
    padding: 0 14px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .mobile-search-box:focus-within {
    border-color: #00f2fe;
    box-shadow: 0 0 14px rgba(0, 242, 254, 0.25);
  }

  .mobile-search-box .search-icon {
    color: #8a8fa3;
    font-size: 0.88rem;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .mobile-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    min-width: 0;
  }

  .mobile-search-clear {
    background: none;
    border: none;
    color: #8a8fa3;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Horizontal Scrolling Filter Chips */
  .mobile-chips-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 4px 2px;
    width: 100%;
  }

  .mobile-chips-scroll::-webkit-scrollbar {
    display: none;
  }

  .mobile-chip-btn {
    height: 35px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.2px solid rgba(255, 255, 255, 0.12);
    color: #c0c5d8;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
  }

  .mobile-chip-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .mobile-chip-btn.active {
    background: linear-gradient(135deg, rgba(126, 16, 212, 0.55) 0%, rgba(0, 242, 254, 0.4) 100%);
    border-color: #00f2fe;
    color: #fff;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.35);
  }

  .chip-icon-btn {
    width: 35px;
    height: 35px;
    min-width: 35px;
    padding: 0 !important;
    justify-content: center;
    position: relative;
    border-radius: 12px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.08);
  }

  .chip-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #fe9920;
    color: #000;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  }

  .mobile-chip-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    margin: 0 2px;
  }

  /* Rarezas con colores específicos */
  .mobile-chip-btn[data-mobile-rarity="Godly"].active {
    background: rgba(213, 0, 249, 0.35);
    border-color: #d500f9;
    box-shadow: 0 0 12px rgba(213, 0, 249, 0.4);
  }
  .mobile-chip-btn[data-mobile-rarity="Ancient"].active {
    background: rgba(255, 75, 75, 0.35);
    border-color: #ff4b4b;
    box-shadow: 0 0 12px rgba(255, 75, 75, 0.4);
  }
  .mobile-chip-btn[data-mobile-rarity="Chroma"].active {
    background: linear-gradient(90deg, #ff0055, #00f2fe, #ffe600);
    color: #000;
    border-color: transparent;
    box-shadow: 0 0 14px rgba(0, 242, 254, 0.5);
  }
  .mobile-chip-btn[data-mobile-rarity="Vintage"].active {
    background: rgba(255, 215, 0, 0.35);
    border-color: #ffd700;
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
  }
  .mobile-chip-btn[data-mobile-rarity="Legendary"].active {
    background: rgba(255, 69, 0, 0.35);
    border-color: #ff4500;
    box-shadow: 0 0 12px rgba(255, 69, 0, 0.4);
  }
}

/* ════ BOTTOM SHEET DRAWER (FILTROS Y ORDENAMIENTO EN MÓVIL) ════ */
.mobile-drawer-overlay {
  z-index: 999999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-drawer-sheet {
  width: 100vw;
  max-width: 500px;
  background: rgba(14, 10, 26, 0.98);
  border-top: 1.5px solid rgba(0, 242, 254, 0.5);
  border-radius: 24px 24px 0 0;
  padding: 16px 20px 26px 20px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9), 0 0 35px rgba(126, 16, 212, 0.35);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  overflow: hidden;
}

.mobile-drawer-overlay.active {
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-drawer-overlay.active .mobile-drawer-sheet {
  transform: translateY(0);
}

.drawer-drag-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 auto 2px auto;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}

.drawer-body::-webkit-scrollbar {
  width: 4px;
}
.drawer-body::-webkit-scrollbar-thumb {
  background: rgba(176, 38, 255, 0.4);
  border-radius: 4px;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: #a5b0cb;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.drawer-pills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.drawer-pill-btn {
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #c0c5d8;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.drawer-pill-btn.active {
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.45), rgba(0, 242, 254, 0.35));
  border-color: #00f2fe;
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
}

.drawer-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawer-price-row input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.9rem;
  outline: none;
  font-family: 'Outfit', sans-serif;
}

.drawer-price-row input:focus {
  border-color: #00f2fe;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
}

.drawer-footer {
  display: flex;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-drawer-reset {
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}

.btn-drawer-submit {
  flex: 1;
  padding: 11px 16px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #7e10d4 0%, #00f2fe 100%);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.35);
}

/* Sort Sheet */
.sort-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0;
}

.sort-option-btn {
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #c0c5d8;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sort-option-btn.active {
  background: rgba(0, 242, 254, 0.12);
  border-color: #00f2fe;
  color: #00f2fe;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.2);
}

/* ════ BOTÓN ALARGADO 'VÉNDENOS TUS COSAS' PARA MÓVIL ════ */
.btn-mobile-sell-banner {
  display: none;
}

@media (max-width: 768px) {
  .btn-header-sell {
    display: none !important;
  }

  .btn-mobile-sell-banner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(126, 16, 212, 0.45) 0%, rgba(213, 0, 249, 0.35) 50%, rgba(0, 242, 254, 0.3) 100%);
    border: 1.5px solid rgba(213, 0, 249, 0.6);
    box-shadow: 0 4px 18px rgba(126, 16, 212, 0.3), 0 0 12px rgba(0, 242, 254, 0.2);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
  }

  .btn-mobile-sell-banner:hover {
    transform: translateY(-1px);
    border-color: #00f2fe;
    box-shadow: 0 6px 22px rgba(0, 242, 254, 0.4);
  }

  .sell-banner-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.2px;
  }

  .sell-banner-left .gem-sparkle {
    color: #00f2fe;
    font-size: 1rem;
    filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.8));
    animation: gemPulse 2s infinite ease-in-out;
  }

  @keyframes gemPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.8)); }
    50% { transform: scale(1.18); filter: drop-shadow(0 0 12px rgba(213, 0, 249, 0.9)); }
  }

  .sell-banner-tag {
    font-size: 0.74rem;
    font-weight: 800;
    color: #00f2fe;
    background: rgba(0, 0, 0, 0.35);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 242, 254, 0.35);
  }
}

/* ════ SELL MODAL PREMIUM REDESIGN ════ */
.sell-modal-overlay {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sell-modal-card {
  background: linear-gradient(180deg, #130e26 0%, #080611 100%) !important;
  border: 1.5px solid rgba(213, 0, 249, 0.5) !important;
  border-radius: 24px !important;
  padding: 24px 22px !important;
  max-width: 460px !important;
  width: 92% !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 40px rgba(126, 16, 212, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.sell-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

.sell-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sell-modal-icon {
  font-size: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.4), rgba(0, 242, 254, 0.25));
  border: 1.5px solid rgba(0, 242, 254, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.3);
}

.sell-modal-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.3px;
}

.sell-modal-subtitle {
  font-size: 0.8rem;
  color: #9ea5bd;
  display: block;
  margin-top: 2px;
}

.sell-warning-box {
  background: rgba(0, 242, 254, 0.06);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sell-warning-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 900;
  color: #00f2fe;
  letter-spacing: 0.5px;
}

.sell-warning-text {
  font-size: 0.84rem;
  line-height: 1.45;
  color: #c4c8dc;
  margin: 0;
}

.sell-steps-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sell-step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 14px;
  border-radius: 14px;
}

.sell-step-badge {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7e10d4, #00f2fe);
  color: #fff;
  font-weight: 900;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

.sell-step-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sell-step-heading {
  font-size: 0.86rem;
  font-weight: 800;
  color: #fff;
}

.sell-step-sub {
  font-size: 0.78rem;
  color: #8c93a8;
  line-height: 1.35;
}

.sell-channels-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-sell-channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-sell-channel:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

.btn-sell-discord {
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
  box-shadow: 0 4px 15px rgba(88, 101, 242, 0.4);
}

.btn-sell-ig {
  background: linear-gradient(135deg, #e1306c 0%, #c13584 50%, #833ab4 100%);
  box-shadow: 0 4px 15px rgba(225, 48, 108, 0.4);
}

.btn-sell-tg {
  background: linear-gradient(135deg, #0088cc 0%, #00a2ed 100%);
  box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
}

.btn-sell-close-action {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #a5adc4;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sell-close-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   👑 PERFECCIÓN DE HEADER MÓVIL Y BOTÓN 'VÉNDENOS TUS OBJETOS' (CERO OVERFLOW)
   ═══════════════════════════════════════════════════════════════════════════════ */

.btn-mobile-sell-banner {
  display: none !important;
}

@media (max-width: 768px) {
  /* Contenedor principal sticky */
  .header {
    top: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    margin: 0 auto 10px auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Cápsula superior: Logo a la izquierda + 4 botones a la derecha */
  .header-inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 4px 12px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  /* Logo compacto */
  .logo {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .logo-img {
    width: 28px !important;
    height: 28px !important;
  }
  .logo-text {
    font-size: 0.88rem !important;
  }

  /* El botón de venta NUNCA debe estar en la cápsula superior en móvil */
  .btn-header-sell,
  #btn-open-sell-modal {
    display: none !important;
  }

  /* Botones de acción secundarios (Discord, Favs, Cart, User) */
  .header-stats {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  .header-action-btn {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0.82rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .header-action-btn .btn-text,
  .header-action-btn .user-text {
    display: none !important;
  }

  /* Botón Carrito destacado */
  .btn-header-cart {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    background: linear-gradient(135deg, rgba(126, 16, 212, 0.7), rgba(0, 242, 254, 0.6)) !important;
    border: 1.5px solid #00f2fe !important;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.45) !important;
  }

  /* Botón alargado inferior: Mismo ancho y diámetro exacto que el panel */
  .btn-mobile-sell-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: linear-gradient(135deg, rgba(126, 16, 212, 0.8) 0%, rgba(213, 0, 249, 0.7) 50%, rgba(0, 242, 254, 0.5) 100%) !important;
    border: 1.5px solid rgba(0, 242, 254, 0.65) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 242, 254, 0.35) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    color: #fff !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
  }

  .btn-mobile-sell-banner:active {
    transform: scale(0.98) !important;
  }

  .sell-banner-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.88rem !important;
    color: #fff !important;
  }

  .sell-banner-left .gem-sparkle {
    color: #00f2fe !important;
    font-size: 1rem !important;
    filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.8)) !important;
  }

  .sell-banner-tag {
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: #00f2fe !important;
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0, 242, 254, 0.4) !important;
  }
}

/* ═══ Advertencia Estilizada de Venta en Bolívares ═══ */
.sell-warning-box {
  background: rgba(254, 153, 32, 0.08) !important;
  border: 1.5px solid rgba(254, 153, 32, 0.45) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  box-shadow: 0 0 20px rgba(254, 153, 32, 0.15) !important;
}

.sell-warning-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  color: #fe9920 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
}

.sell-warning-text {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: #e2e8f0 !important;
  margin: 0 !important;
}

.sell-warning-text strong {
  color: #00f2fe !important;
  font-weight: 800 !important;
}

.sell-channel-instruction {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  margin: 2px 0 0 0 !important;
  text-align: center !important;
}

/* ════ BOTÓN FLOTANTE 'VOLVER AL PRINCIPIO' (SCROLL TO TOP) ════ */
.btn-scroll-top {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(14, 10, 26, 0.88) !important;
  border: 1.5px solid rgba(0, 242, 254, 0.5) !important;
  color: #00f2fe !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 242, 254, 0.35) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(20px) scale(0.9) !important;
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s, background 0.2s, box-shadow 0.2s !important;
  user-select: none !important;
  border-style: solid !important;
}

.btn-scroll-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

.btn-scroll-top:hover {
  background: linear-gradient(135deg, #7e10d4 0%, #00f2fe 100%) !important;
  color: #fff !important;
  border-color: #00f2fe !important;
  box-shadow: 0 6px 25px rgba(0, 242, 254, 0.6), 0 0 20px rgba(126, 16, 212, 0.5) !important;
  transform: translateY(-3px) scale(1.08) !important;
}

.btn-scroll-top:active {
  transform: translateY(0) scale(0.95) !important;
}

@media (max-width: 768px) {
  .btn-scroll-top {
    bottom: 20px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🌟 CREADORES DE CONTENIDO: INFINITE HORIZONTAL MARQUEE + RECOMENDADO POR (ULTRA HD)
   ═══════════════════════════════════════════════════════════════════════════════ */

.creators-section-wrapper {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.creators-section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto 4px auto;
  opacity: 0.9;
}

.creators-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 6px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.creators-marquee-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: marqueeLoop 24s linear infinite;
  will-change: transform;
}

.creators-marquee-wrapper:hover .creators-marquee-track {
  animation-play-state: paused;
}

@keyframes marqueeLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.creator-pill-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 14, 32, 0.9);
  border: 1.5px solid rgba(0, 242, 254, 0.25);
  padding: 8px 18px 8px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(126, 16, 212, 0.15);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  user-select: none;
}

.creator-pill-card:hover {
  border-color: #00f2fe;
  background: linear-gradient(135deg, rgba(126, 16, 212, 0.4), rgba(0, 242, 254, 0.25));
  box-shadow: 0 6px 28px rgba(0, 242, 254, 0.45), 0 0 20px rgba(126, 16, 212, 0.4);
  transform: translateY(-2px) scale(1.05);
}

.creator-avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.creator-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #00f2fe;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
  image-rendering: -webkit-optimize-contrast;
  display: block;
}

.creator-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.creator-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.2px;
  line-height: 1.15;
  text-transform: none !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.creator-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.creator-followers {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #00f2fe;
  letter-spacing: -0.2px;
  text-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
}

.creator-badge {
  font-size: 0.8rem;
  color: #ff50a0;
  display: inline-flex;
  align-items: center;
  filter: drop-shadow(0 0 6px rgba(255, 80, 160, 0.5));
}

@media (max-width: 768px) {
  .creators-section-wrapper {
    margin-top: 16px;
  }
  .creators-section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto 4px auto;
  opacity: 0.9;
}
  .creator-pill-card {
    padding: 6px 14px 6px 8px;
    gap: 10px;
  }
  .creator-avatar-wrap {
    width: 30px;
    height: 30px;
  }
  .creator-name {
    font-size: 0.82rem;
  }
  .creator-followers {
    font-size: 0.72rem;
  }
  .creator-badge {
    font-size: 0.74rem;
  }
}

.rarity-set {
  background: linear-gradient(135deg, rgba(176, 38, 255, 0.25), rgba(0, 242, 254, 0.25)) !important;
  color: #00f2fe !important;
  border: 1px solid rgba(0, 242, 254, 0.45) !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ═══ 🪐 HERO BANNER CON TARJETA DE CONFIANZA & DISCORD (DESKTOP) ═══ */
.hero-banner {
  background: linear-gradient(135deg, rgba(20, 14, 38, 0.78) 0%, rgba(10, 8, 22, 0.88) 100%);
  border: 1px solid rgba(176, 38, 255, 0.35);
  border-radius: 24px;
  padding: 32px 36px 26px 36px;
  margin-bottom: 28px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(126, 16, 212, 0.18);
  position: relative;
  overflow: hidden;
}

.hero-banner-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.hero-content-left {
  flex: 1;
  max-width: 680px;
}

.hero-main-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 3.8vw, 2.55rem);
  font-weight: 900;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 12px 0;
  letter-spacing: -0.5px;
}

.hero-gradient-text {
  background: linear-gradient(135deg, #00f2fe 0%, #b026ff 50%, #ff50a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(0, 242, 254, 0.3);
}

.hero-main-desc {
  color: #a5b0cb;
  font-size: 0.96rem;
  line-height: 1.5;
  margin: 0 0 18px 0;
  font-weight: 400;
}

.hero-feature-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.hero-feat-pill.cyan {
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.35);
  color: #00f2fe;
}

.hero-feat-pill.purple {
  background: rgba(176, 38, 255, 0.12);
  border: 1px solid rgba(176, 38, 255, 0.35);
  color: #b026ff;
}

.hero-feat-pill.pink {
  background: rgba(255, 80, 160, 0.12);
  border: 1px solid rgba(255, 80, 160, 0.35);
  color: #ff50a0;
}

/* Tarjeta Cósmica Limpia y Armoniosa (Desktop) */
.hero-card-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 320px;
  background: rgba(14, 10, 24, 0.82);
  border: 1px solid rgba(176, 38, 255, 0.32);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-shrink: 0;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hero-card-right:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 242, 254, 0.45);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 242, 254, 0.15);
}

.hero-card-metric-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-card-bolt-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 165, 2, 0.15);
  border: 1px solid rgba(255, 165, 2, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffa502;
  font-size: 1.35rem;
  box-shadow: 0 0 14px rgba(255, 165, 2, 0.3);
  flex-shrink: 0;
}

.hero-card-metric-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.hero-card-metric-num {
  font-family: 'Outfit', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.hero-card-metric-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 2px;
}

.hero-card-discord-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
  color: #ffffff !important;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(88, 101, 242, 0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-card-discord-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(88, 101, 242, 0.6);
  filter: brightness(1.1);
}

.hero-card-discord-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-discord-icon-big {
  font-size: 1.45rem;
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

.hero-card-discord-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.hero-card-discord-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.94rem;
  color: #ffffff;
}

.hero-card-discord-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}

.hero-card-discord-arrow {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  transition: transform 0.2s ease;
}

.hero-card-discord-btn:hover .hero-card-discord-arrow {
  transform: translate(2px, -2px);
  color: #ffffff;
}

/* Ocultar el botón de Discord del header en PC (ya está en la tarjeta del Hero) */
@media (min-width: 769px) {
  .btn-header-discord {
    display: none !important;
  }
}

/* En móvil y tablet (< 992px), ocultar COMPLETAMENTE la tarjeta derecha del Hero */
@media (max-width: 992px) {
  .hero-card-right,
  .desktop-only {
    display: none !important;
  }
  .hero-banner-grid {
    display: block !important;
  }
  .hero-content-left {
    max-width: 100% !important;
  }
}
/* 📱 Armas Más Vendidas Móvil: Centrado perfecto y botón fácil de presionar */
@media (max-width: 768px) {
  .carousel-mask-container {
    padding: 6px 0 12px 0;
    overflow-x: visible;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .carousel-track {
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    padding: 8px 18px 14px 18px;
    gap: 14px;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    touch-action: pan-x pan-y;
  }

  .carousel-track .product-card {
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    flex: 0 0 240px !important;
    width: 240px !important;
    max-width: 78vw !important;
    margin: 0 !important;
  }

  .btn-cart {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
  }
}

/* ═══ RICH FOOTER ESTILOS ═══ */
.footer {
  margin-top: 50px;
  background: linear-gradient(180deg, rgba(14, 10, 26, 0.7) 0%, rgba(8, 6, 16, 0.96) 100%);
  border-top: 1px solid rgba(176, 38, 255, 0.25);
  padding: 45px 24px 25px 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
}

.footer-col-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.footer-logo-img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid rgba(0, 242, 254, 0.5);
}

.footer-logo-text {
  font-family: 'Syne', sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #ffffff 15%, #00f2fe 55%, #b026ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-flex;
  align-items: baseline;
}

.footer-logo-text .logo-num {
  background: linear-gradient(135deg, #00f2fe 0%, #00c6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 1px;
}

.footer-desc {
  color: #94a3b8;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

.footer-payment-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-pay-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #cbd5e1;
}

.footer-col-title {
  font-family: 'Syne', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.86rem;
  color: #cbd5e1;
}

.footer-hours-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.footer-link:hover {
  color: #00f2fe;
  transform: translateX(3px);
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 35px auto 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #64748b;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ✨ VISOR DE ESTUDIO 3D LUXURY GLASSMORPHISM (MM2 SHOP VE)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --accent: #00f2fe;
  --accent-glow: rgba(0, 242, 254, 0.35);
  --accent-bg: rgba(0, 242, 254, 0.12);
  --accent-border: rgba(0, 242, 254, 0.45);
}

.studio-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 3, 6, 0.94);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  z-index: 100005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.studio-stage-container {
  width: 100%;
  max-width: 1120px;
  height: min(640px, 94vh);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-ambient-aura {
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 68%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, opacity 0.9s ease 0.1s;
}

.studio-overlay.active .studio-ambient-aura {
  transform: scale(1);
  opacity: 0.9;
}

body.theme-chroma .studio-ambient-aura {
  background: radial-gradient(circle at center, 
    rgba(255, 0, 100, 0.32) 0%, 
    rgba(0, 242, 254, 0.28) 35%, 
    rgba(176, 38, 255, 0.25) 55%, 
    transparent 70%) !important;
  animation: chromaRotateAura 8s linear infinite;
}

@keyframes chromaRotateAura {
  0% { filter: blur(80px) hue-rotate(0deg); }
  100% { filter: blur(80px) hue-rotate(360deg); }
}

.studio-bento-layout {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
}

.bento-module {
  position: relative;
  border-radius: 26px;
  background: rgba(12, 11, 19, 0.90);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  perspective: 1200px;
  opacity: 0;
  transform: scale(0.96) translateY(14px);
  transition: all 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

.studio-overlay.active .bento-module {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.glass-specular-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, 
    transparent 35%, 
    rgba(255, 255, 255, 0.07) 50%, 
    transparent 65%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translateX(-100%);
}

.studio-overlay.active .glass-specular-sheen {
  animation: specularGleam 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

@keyframes specularGleam {
  0% { opacity: 0; transform: translateX(-100%); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

.luxury-border-glow {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  border: 1.5px solid var(--accent-border);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 20px var(--accent-glow);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, border-color 0.4s ease, box-shadow 0.4s ease;
}

.studio-overlay.active .luxury-border-glow {
  opacity: 1;
}

body.theme-chroma .luxury-border-glow {
  animation: chromaBorderPulse 4s linear infinite;
}
@keyframes chromaBorderPulse {
  0% { border-color: #ff0077; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 25px rgba(255,0,119,0.45); }
  33% { border-color: #00ffaa; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 25px rgba(0,255,170,0.45); }
  66% { border-color: #00f2fe; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 25px rgba(0,242,254,0.45); }
  100% { border-color: #ff0077; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 25px rgba(255,0,119,0.45); }
}

.stage-content-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}

.weapon-entrance-bloom {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin-left: -90px;
  margin-top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transform: scale(0.2);
}

.studio-overlay.active .weapon-entrance-bloom {
  animation: softBloomPulse 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

@keyframes softBloomPulse {
  0% { opacity: 0; transform: scale(0.2); }
  40% { opacity: 0.9; transform: scale(1.6); }
  100% { opacity: 0.3; transform: scale(1.2); }
}

.weapon-light-ripple {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: scale(0.1);
}

.studio-overlay.active .weapon-light-ripple {
  animation: lightRippleExpand 1.2s cubic-bezier(0.12, 0.8, 0.2, 1) 0.25s forwards;
}

@keyframes lightRippleExpand {
  0% { opacity: 0; transform: scale(0.1); border-color: #ffffff; }
  30% { opacity: 0.85; border-color: var(--accent); }
  100% { opacity: 0; transform: scale(3.4); border-color: transparent; }
}

.stage-floor-light {
  position: absolute;
  bottom: 38px;
  width: 290px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--accent) 0%, rgba(255,255,255,0.25) 25%, transparent 70%);
  opacity: 0;
  transform: scale(0.3);
  filter: blur(12px);
  pointer-events: none;
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, background 0.4s ease;
}

.studio-overlay.active .stage-floor-light {
  opacity: 0.38;
  transform: scale(1);
}

.stage-floor-ring {
  position: absolute;
  bottom: 40px;
  width: 270px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px dashed var(--accent-border);
  box-shadow: 0 0 20px var(--accent-glow);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.25) rotate(-60deg);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, opacity 0.85s ease 0.3s, border-color 0.4s ease, box-shadow 0.4s ease;
}

.studio-overlay.active .stage-floor-ring {
  opacity: 0.85;
  transform: scale(1) rotate(0deg);
}

body.theme-chroma .stage-floor-ring {
  animation: chromaRingColorCycle 4s linear infinite;
}
@keyframes chromaRingColorCycle {
  0% { border-color: #ff0055; box-shadow: 0 0 20px rgba(255,0,85,0.45); }
  33% { border-color: #00ffaa; box-shadow: 0 0 20px rgba(0,255,170,0.45); }
  66% { border-color: #00f2fe; box-shadow: 0 0 20px rgba(0,242,254,0.45); }
  100% { border-color: #ff0055; box-shadow: 0 0 20px rgba(255,0,85,0.45); }
}

.weapon-stage-viewport {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  user-select: none;
  cursor: grab;
  position: relative;
}

.weapon-stage-viewport:active {
  cursor: grabbing;
}

.weapon-3d-turntable {
  position: relative;
  width: 360px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.weapon-entrance-rig {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  animation: weaponLuxuryEntrance 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes weaponLuxuryEntrance {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.88);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

.weapon-float-loop {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gentleBobbing 4.5s ease-in-out infinite alternate;
}

@keyframes gentleBobbing {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

.weapon-image-360 {
  width: 340px;
  height: 340px;
  max-width: 340px;
  max-height: 340px;
  object-fit: contain;
  filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px var(--accent-glow));
  pointer-events: none;
  transition: filter 0.3s ease;
}

.stage-tools-dock {
  position: absolute;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(8, 8, 14, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 14px;
  border-radius: 999px;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  z-index: 30;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.studio-overlay.active .stage-tools-dock {
  opacity: 1;
  transform: translateY(0);
}

.dock-btn {
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.dock-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.dock-btn i {
  color: var(--accent);
}

.console-content-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.console-body-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
}

.console-body-scroll::-webkit-scrollbar {
  width: 4px;
}
.console-body-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}
.console-body-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 242, 254, 0.4);
  border-radius: 4px;
}
.console-body-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 242, 254, 0.7);
}

.studio-overlay.active .console-content-inner {
  opacity: 1;
  transform: translateY(0);
}

.product-meta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rarity-pill-luxury {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.rarity-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

body.theme-chroma .rarity-pill-luxury {
  background: linear-gradient(135deg, rgba(255,0,128,0.2), rgba(0,242,254,0.2));
  border: 1px solid #00f2fe;
  color: #fff;
  animation: chromaText 4s linear infinite;
}

@keyframes chromaText {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.stock-badge-clean {
  font-size: 0.74rem;
  font-weight: 700;
  color: #00ff88;
  display: flex;
  align-items: center;
  gap: 5px;
}

.product-title-large {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -0.4px;
  background: linear-gradient(180deg, #ffffff 40%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.product-pricing-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price-usd-display {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}

.price-bs-display {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  padding: 5px 10px;
  border-radius: 8px;
}

.bundle-contents-box {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 10px;
  max-height: 125px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bundle-contents-box::-webkit-scrollbar {
  width: 4px;
}
.bundle-contents-box::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.5);
  border-radius: 4px;
}

.bundle-header-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.bundle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.bundle-row:last-child {
  border-bottom: none;
}

.perks-list-clean {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 8px;
}

.perk-row-clean {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #cbd5e1;
}

.perk-row-clean i {
  color: var(--accent);
  font-size: 0.82rem;
  width: 14px;
  text-align: center;
}

.console-cta-group {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-buy-primary {
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--accent), #38bdf8);
  color: #030308;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 22px var(--accent-glow);
}

.btn-buy-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--accent-glow);
  filter: brightness(1.1);
}

body.theme-chroma .btn-buy-primary {
  background: linear-gradient(135deg, #00f2fe 0%, #7000ff 50%, #ff0077 100%);
  color: #ffffff;
  box-shadow: 0 8px 28px rgba(0, 242, 254, 0.4);
}

.btn-cart-secondary {
  width: 100%;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.2s ease;
}

.btn-cart-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-studio-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(14, 13, 22, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.btn-studio-close:hover {
  background: #ff1744;
  border-color: #ff1744;
  transform: scale(1.1) rotate(90deg);
}

@media (max-width: 900px) {
  .studio-overlay {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) 8px;
    align-items: center;
  }

  .studio-stage-container {
    height: min(92dvh, 740px);
    max-height: 92dvh;
    max-width: 480px;
  }

  .studio-bento-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    gap: 8px;
  }

  #hero-module {
    flex: 0 0 215px;
    height: 215px;
    min-height: 215px;
  }

  .stage-content-wrapper {
    min-height: 195px;
    height: 195px;
    padding: 8px 12px;
  }

  .weapon-3d-turntable {
    width: 190px;
    height: 190px;
  }

  .weapon-image-360 {
    width: 180px;
    height: 180px;
  }

  .stage-floor-light {
    width: 170px;
    bottom: 18px;
  }

  .stage-floor-ring {
    width: 150px;
    bottom: 20px;
  }

  .btn-studio-close {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  #console-module {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .console-content-inner {
    padding: 12px 14px;
    height: 100%;
    min-height: 0;
  }

  .product-title-large {
    font-size: 1.35rem;
    margin-bottom: 6px;
  }

  .product-pricing-card {
    padding: 6px 10px;
    margin-bottom: 6px;
  }

  .price-usd-display {
    font-size: 1.35rem;
  }

  .price-bs-display {
    font-size: 0.78rem;
    padding: 3px 8px;
  }

  .bundle-contents-box {
    max-height: 95px;
    padding: 6px 10px;
    margin-bottom: 6px;
  }

  .perks-list-clean {
    gap: 4px;
    margin-bottom: 6px;
  }

  .perk-row-clean {
    font-size: 0.70rem;
    gap: 6px;
  }

  .console-cta-group {
    padding-top: 8px;
    gap: 6px;
  }

  .btn-buy-primary {
    padding: 10px 14px;
    font-size: 0.88rem;
  }

  .btn-cart-secondary {
    padding: 8px 14px;
    font-size: 0.80rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🌌 SELECTOR DE CUENTAS DE ROBLOX (MÓVIL & INSTAGRAM WEBVIEW OPTIMIZADO)
   ═══════════════════════════════════════════════════════════════════════════ */
#roblox-modal.roblox-modal-overlay,
.roblox-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: rgba(4, 3, 10, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 200000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

#roblox-modal.roblox-modal-overlay.active,
.roblox-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.roblox-selector-card {
  position: relative;
  z-index: 200001 !important;
  background: rgba(15, 11, 28, 0.96);
  border: 1.5px solid rgba(0, 242, 254, 0.45);
  border-radius: 22px;
  padding: 24px 22px;
  max-width: 440px;
  width: 100%;
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 35px rgba(126, 16, 212, 0.35);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: #ffffff;
  box-sizing: border-box;
  margin: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.roblox-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.roblox-selector-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.roblox-selector-subtitle {
  font-size: 0.84rem;
  color: #94a3b8;
  margin: 0 0 16px 0;
  line-height: 1.45;
}

.roblox-search-input-wrap {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 12px;
  transition: all 0.25s ease;
}

.roblox-search-input-wrap:focus-within {
  border-color: #00f2fe;
  background: rgba(0, 242, 254, 0.06);
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.25);
}

.roblox-input-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.roblox-input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.roblox-input-box input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 16px !important; /* Previene zoom involuntario en iOS Safari & Instagram */
  font-weight: 700;
  -webkit-appearance: none;
}

.roblox-input-box input::placeholder {
  color: #64748b;
  font-weight: 500;
  font-size: 0.92rem;
}

.roblox-spinner {
  color: #00f2fe;
  font-size: 1rem;
}

.roblox-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 14px;
  padding-right: 2px;
}

.roblox-accounts-list::-webkit-scrollbar {
  width: 5px;
}
.roblox-accounts-list::-webkit-scrollbar-thumb {
  background: rgba(0, 242, 254, 0.3);
  border-radius: 10px;
}

.roblox-account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.roblox-account-card:hover, .roblox-account-card.selected {
  background: rgba(0, 242, 254, 0.12);
  border-color: #00f2fe;
  transform: translateX(3px);
  box-shadow: 0 4px 16px rgba(0, 242, 254, 0.2);
}

.roblox-account-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.roblox-account-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(14, 10, 26, 0.8);
  border: 1.5px solid rgba(0, 242, 254, 0.4);
  flex-shrink: 0;
}

.roblox-account-names {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.roblox-account-username {
  font-size: 0.96rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.roblox-account-tag {
  font-size: 0.72rem;
  color: #94a3b8;
}

.roblox-account-arrow {
  color: #94a3b8;
  font-size: 0.9rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.roblox-account-card:hover .roblox-account-arrow {
  color: #00f2fe;
  transform: translateX(3px);
}

.roblox-modal-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.roblox-remember-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 0.8rem;
}

.roblox-remember-wrap input {
  accent-color: #00f2fe;
  cursor: pointer;
  width: 15px;
  height: 15px;
}

.btn-roblox-continue {
  width: 100%;
  padding: 13px 18px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #7e10d4 0%, #00f2fe 100%);
  color: white;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.98rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 242, 254, 0.35);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-roblox-continue:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 242, 254, 0.5);
}

.btn-roblox-continue:active {
  transform: translateY(0);
}

.btn-roblox-guest {
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-roblox-guest:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-1px);
}

.btn-roblox-guest:active {
  transform: translateY(0);
}

.roblox-guest-hint {
  font-size: 0.73rem;
  color: #64748b;
  text-align: center;
  margin-top: -3px;
  line-height: 1.35;
}

@media (max-width: 480px) {
  .roblox-modal-overlay {
    padding: 10px;
    align-items: center;
  }
  .roblox-selector-card {
    padding: 18px 16px;
    border-radius: 18px;
    max-height: calc(100dvh - 20px);
  }
  .roblox-selector-title {
    font-size: 1.15rem;
  }
  .roblox-accounts-list {
    max-height: 140px;
  }
  .btn-roblox-continue {
    padding: 12px;
    font-size: 0.92rem;
  }
  .btn-roblox-guest {
    padding: 10px;
    font-size: 0.84rem;
  }
}