/*
 * NexoPlay · Mobile product-card performance V4
 * Scope: mobile catalog only. Desktop presentation and the hero/banner carousel are untouched.
 * Focus: avoid fixed-background repaints while scrolling, reduce mobile image decode bursts,
 * and simplify static card paint layers without changing the card structure or LED border.
 */
@media screen and (max-width: 780px) {
  /* A fixed canvas wallpaper can force repeated repaints while the document scrolls on phones.
     Keep the same graphic, but let it move with the document and repeat vertically. */
  body:not(.nexo-light) {
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: auto 100vh !important;
    background-repeat: repeat-y !important;
  }

  /* Images are now requested by one shared IntersectionObserver shortly before they enter view.
     Preserve the image frame while the request is still pending. */
  .storefront-home-products .store-product-art,
  .product-grid.page-grid .store-product-art {
    background: #09111a !important;
  }

  /* Keep the useful lower darkening for text/labels, but use one gradient instead of stacked
     gradients on every card image. */
  .storefront-home-products .store-product-art-gradient,
  .product-grid.page-grid .store-product-art-gradient {
    background: linear-gradient(
      180deg,
      rgba(2, 7, 12, .02) 0%,
      rgba(4, 9, 15, .08) 30%,
      rgba(4, 8, 13, .78) 78%,
      rgba(4, 8, 13, .94) 100%
    ) !important;
  }

  /* Flatten subtle card/body/stats fills; the static RGB border and main card colors remain. */
  .storefront-home-products .store-product-body,
  .product-grid.page-grid .store-product-body {
    background: #081019 !important;
  }

  .storefront-home-products .store-product-stats > span,
  .product-grid.page-grid .store-product-stats > span {
    background: #091522 !important;
    box-shadow: none !important;
  }

  .storefront-home-products .store-product-card,
  .storefront-home-products .store-product-card:hover,
  .product-grid.page-grid .store-product-card,
  .product-grid.page-grid .store-product-card:hover {
    box-shadow: 0 2px 7px rgba(0, 0, 0, .16) !important;
  }

  .storefront-home-products .store-provider-avatar,
  .product-grid.page-grid .store-provider-avatar,
  .storefront-home-products .store-heart,
  .product-grid.page-grid .store-heart {
    box-shadow: none !important;
  }
}