/* ==========================================================================
SHOP COLLECTIONS
   ========================================================================== */
 
    :root {
      --mpx-bg0: #06080c;
      --mpx-bg1: #090d14;
      --mpx-bg2: #0b1220;
      --mpx-card: #0b1018;
      --mpx-border: rgba(255,255,255,.08);
      --mpx-border2: rgba(255,255,255,.12);
      --mpx-gold: #FFC92D;
      --mpx-gold2: #FFDD66;
      --mpx-blue: #1D6CFF;
      --mpx-blue2: #2CA8FF;
      --mpx-text: #EAF0FF;
      --mpx-muted: rgba(234,240,255,.72);
      --mpx-radius: 18px;
      --mpx-radius2: 22px;
      --mpx-shadow: 0 22px 70px rgba(0,0,0,.55);
      --mpx-shadow2: 0 10px 30px rgba(0,0,0,.55);
      --mpx-glowBlue: 0 0 0 1px rgba(29,108,255,.25), 0 0 26px rgba(29,108,255,.22), 0 0 62px rgba(44,168,255,.14);
      --mpx-glowGold: 0 0 0 1px rgba(255,201,45,.25), 0 0 18px rgba(255,201,45,.18), 0 0 40px rgba(255,201,45,.10);
      --mpx-font: "Poppins", system-ui, -apple-system, sans-serif;
      --mpx-ease: cubic-bezier(.2,.9,.2,1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--mpx-font);
      background: linear-gradient(180deg, var(--mpx-bg0), var(--mpx-bg1) 40%, var(--mpx-bg0));
      color: var(--mpx-text);  
    }
 

    .mpx-title {
      font-size: clamp(48px, 6vw, 72px);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: var(--mpx-gold);
      text-align: left;
      margin-bottom: 15px;
      line-height: 1;
    }

    .mpx-underline {
      width: 80px;
      height: 3px;
      background: linear-gradient(90deg, var(--mpx-gold), rgba(29,108,255,.55));
      border-radius: 999px;
      margin: 20px auto 50px;
      box-shadow: var(--mpx-glowGold);
    }

    /* Shop Grid */
    .mpx-shop-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 30px;
      margin-top: 40px;
    }

    /* Shop Card Base */
    .mpx-card {
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border: 1px solid var(--mpx-border);
      border-radius: var(--mpx-radius2);
      box-shadow: var(--mpx-shadow2);
    }

    .mpx-shop-card {
      overflow: hidden;
      position: relative;
      transition: all 0.4s var(--mpx-ease);
      cursor: pointer;
    }

    .mpx-hover:hover {
      transform: translateY(-8px);
      border-color: rgba(255,255,255,.14);
      box-shadow: var(--mpx-shadow), var(--mpx-glowBlue);
    }

    /* NEW: Shop Card Image */
    .mpx-shop-image {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(29,108,255,.08), rgba(255,201,45,.06));
      border-bottom: 1px solid var(--mpx-border);
    }

    .mpx-shop-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s var(--mpx-ease), filter 0.4s ease;
      filter: saturate(0.95) contrast(1.05);
    }

    .mpx-shop-card:hover .mpx-shop-image img {
      transform: scale(1.12) rotate(2deg);
      filter: saturate(1.1) contrast(1.08) brightness(1.05);
    }

    /* Image Overlay Effect */
    .mpx-shop-image::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, 
        rgba(29,108,255,.15) 0%, 
        transparent 50%,
        rgba(255,201,45,.12) 100%);
      opacity: 0;
      transition: opacity 0.4s var(--mpx-ease);
      z-index: 1;
    }

    .mpx-shop-card:hover .mpx-shop-image::before {
      opacity: 1;
    }

    /* Gradient Shine Effect */
    .mpx-shop-image::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255,255,255,.1) 50%,
        transparent 70%
      );
      transform: translateX(-100%) translateY(-100%);
      transition: transform 0.6s var(--mpx-ease);
      z-index: 2;
      pointer-events: none;
    }

    .mpx-shop-card:hover .mpx-shop-image::after {
      transform: translateX(100%) translateY(100%);
    }

    /* Badge on Image */
    .mpx-shop-badge {
      position: absolute;
      top: 16px;
      right: 16px;
      background: rgba(10,16,26,.9);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,201,45,.35);
      border-radius: 10px;
      padding: 6px 12px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--mpx-gold);
      box-shadow: var(--mpx-glowGold);
      z-index: 3;
      transition: all 0.3s var(--mpx-ease);
    }

    .mpx-shop-card:hover .mpx-shop-badge {
      transform: translateY(-4px) scale(1.05);
      box-shadow: var(--mpx-glowGold), 0 8px 20px rgba(255,201,45,.3);
    }

    /* Shop Top */
    .mpx-shop-top {
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--mpx-border);
      background: rgba(255,255,255,.02);
    }

    .mpx-price-tab {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 900;
      color: #0b1220;
      padding: 8px 14px;
      border-radius: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-size: 11px;
      transition: transform 0.3s var(--mpx-ease);
    }

    .mpx-shop-card:hover .mpx-price-tab {
      transform: scale(1.05);
    }

    .tab-blue {
      background: linear-gradient(135deg, #31A2FF, #1D6CFF);
      box-shadow: var(--mpx-glowBlue);
    }

    .tab-gold {
      background: linear-gradient(135deg, var(--mpx-gold), var(--mpx-gold2));
      box-shadow: var(--mpx-glowGold);
    }

    .tab-teal {
      background: linear-gradient(135deg, #20E3B2, #1DB4FF);
      box-shadow: 0 0 0 1px rgba(32,227,178,.25), 0 0 18px rgba(32,227,178,.18);
    }

    /* Shop Body */
    .mpx-shop-body {
      padding: 20px;
    }

    .mpx-shop-body h4 {
      margin: 0 0 8px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 14px;
      color: rgba(255,255,255,.92);
      transition: color 0.3s ease;
    }

    .mpx-shop-card:hover .mpx-shop-body h4 {
      color: var(--mpx-gold);
    }

    .mpx-shop-body .desc {
      margin: 0 0 16px;
      font-size: 12px;
      color: rgba(255,255,255,.62);
      line-height: 1.6;
    }

    .mpx-shop-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .mpx-shop-list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--mpx-border);
      background: rgba(255,255,255,.02);
      color: rgba(255,255,255,.78);
      font-size: 12px;
      transition: all 0.3s var(--mpx-ease);
    }

    .mpx-shop-list li:hover {
      border-color: rgba(29,108,255,.25);
      background: rgba(29,108,255,.05);
      transform: translateX(4px);
    }

    .mpx-shop-list b {
      color: var(--mpx-gold);
      font-weight: 900;
      font-size: 13px;
    }

    /* Reveal Animation */
    .mpx-reveal {
      opacity: 0;
      transform: translateY(30px);
      animation: revealUp 0.8s var(--mpx-ease) forwards;
    }

    .mpx-reveal:nth-child(1) { animation-delay: 0.1s; }
    .mpx-reveal:nth-child(2) { animation-delay: 0.2s; }
    .mpx-reveal:nth-child(3) { animation-delay: 0.3s; }
    .mpx-reveal:nth-child(4) { animation-delay: 0.4s; }

    @keyframes revealUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Responsive */
    @media (max-width: 768px) {
      .mpx-shop-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }