/*
 * NexoPlay · Product cards mobile smoothness V3
 * Scope: phones only (max-width: 780px).
 * Keeps the static RGB/LED border and card layout. Reduces repeated paint/compositing
 * work from decorative pseudo-layers and avoids a scaled hover gradient being kept
 * on touch devices. Desktop styles are deliberately untouched.
 */
@media screen and (max-width: 780px) {
  /* Defer off-screen card rendering while preserving a stable estimated grid height. */
  .storefront-home-products .product-grid > .store-product-card,
  .product-grid.page-grid > .store-product-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 390px;
  }

  /* Keep the same static neon border; never run the desktop hover treatment on mobile. */
  .store-product-card,
  .store-product-card:hover {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    border: 1px solid transparent !important;
    background:
      linear-gradient(180deg, #0b1420, #081019) padding-box,
      linear-gradient(135deg,
        rgba(255, 62, 145, .72) 0%,
        rgba(116, 73, 255, .72) 28%,
        rgba(0, 183, 255, .72) 52%,
        rgba(0, 242, 160, .58) 74%,
        rgba(255, 76, 124, .68) 100%) border-box !important;
    background-size: 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16) !important;
  }

  /* These two decorative layers used several radial gradients and screen blending
     on every card. The main artwork gradient and the LED border remain visible. */
  .store-product-card::after,
  .store-product-art::after {
    display: none !important;
    content: none !important;
    mix-blend-mode: normal !important;
  }

  .store-product-card .store-product-art > img,
  .store-product-card:hover .store-product-art > img {
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .store-product-card .store-heart {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .2) !important;
  }

  /* Keep buttons visually unchanged but remove touch-hover transitions/background travel. */
  .store-product-card .store-primary-btn,
  .store-product-card .store-terms-btn,
  .store-product-card:hover .store-primary-btn,
  .store-product-card:hover .store-terms-btn {
    transition: none !important;
    transform: none !important;
  }

  .store-product-card .store-primary-btn,
  .store-product-card:hover .store-primary-btn {
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
  }
}