/* ==========================================================================
   Nixon-style product grid thumbnails — loads sitewide (shop, category,
   homepage sections, related products, cross-sell, recently viewed, search
   results, marketplace store grid). Wherever the "product-item" partial is
   rendered, the wrapper is always .ps-product > .ps-product__thumbnail, so a
   single global rule set here covers every grid on the site.

   What this changes vs. the previous behaviour:
   - Product photos were being hard-cropped to a 300x300 square by the media
     library ('small' size). They are now served uncropped at up to 900px
     wide (see functions.php: RvMedia::addSize('product_grid', 900, 'auto')),
     and this stylesheet displays them in full inside a fixed-ratio box sized
     for the new 900x1282 portrait product photography, exactly like the
     nixon.com reference grid.
   - Adds the on-hover thumbnail swap (default photo -> second product image)
     the reference grid uses, driven by the two <img> tags product-item.blade
     already renders (.ps-product__image--default / --hover).
   ========================================================================== */

.ps-product__thumbnail {
  position: relative;
  overflow: hidden;
  /* 900x1282 photo ratio = 1282/900 = 142.444% */
  aspect-ratio: 900 / 1282;
  background-color: #f5f5f5;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
  .ps-product__thumbnail {
    height: 0;
    padding-top: 142.444%;
  }
}

.ps-product__thumbnail-link {
  display: block;
  width: 100%;
  height: 100%;
}

.ps-product__thumbnail .ps-product__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* object-fit: contain -> the complete product photo is always visible,
     never cropped, even if a particular image isn't exactly 900x1282. */
  object-fit: contain;
  object-position: center;
  transition: opacity 0.35s ease;
}

.ps-product__thumbnail .ps-product__image--default {
  position: relative;
  opacity: 1;
}

.ps-product__thumbnail .ps-product__image--hover {
  opacity: 0;
}

.ps-product:hover .ps-product__thumbnail .ps-product__image--default {
  opacity: 0;
}

.ps-product:hover .ps-product__thumbnail .ps-product__image--hover {
  opacity: 1;
}

/* When there's no second image, the default one has no absolute sibling to
   crossfade with — keep it as a normal flow image inside the box. */
.ps-product__thumbnail .ps-product__image--default:only-child {
  position: absolute;
}

@media (prefers-reduced-motion: reduce) {
  .ps-product__thumbnail .ps-product__image {
    transition: none;
  }
}