/* Product photos are never cropped. Every box in a row is one shape, so cards line up;
   a photo of another shape sits whole on a soft copy of itself (product-image-fit-v1.js). */
html body main .product-card-image.product-card-image.product-card-image.product-card-image.product-card-image,
html body main .seven-product-image.seven-product-image.seven-product-image.seven-product-image,
html body main .photo-box img.object-contain.object-contain.object-contain.object-contain{object-fit:contain!important;object-position:center!important}
html body main .photo-box.photo-box.photo-box{position:relative!important;overflow:hidden!important;isolation:isolate}
html body main .photo-box.photo-box.photo-box::before{content:"";position:absolute;inset:-12%;z-index:-1;background:var(--photo-url,none) center/cover no-repeat;filter:blur(20px) saturate(1.1)}
html body main .photo-box .product-card-image.product-card-image.product-card-image.product-card-image.product-card-image,
html body main .photo-box .seven-product-image.seven-product-image.seven-product-image.seven-product-image,
html body main .photo-box img.object-contain.object-contain.object-contain.object-contain{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;padding:0!important;transform:none!important}

/* Cards with the photo above the text. */
html body main .photo-box.photo-box.photo-box.photo-box{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:4/5!important;flex:none!important}

/* No fade over product images. */
.renewable-products-view .product-card.product-card > div:first-child::after,
.renewable-products-view .renewable-featured-card.renewable-featured-card > div:first-child::after{content:none!important;display:none!important}

/* Catalogue: photo beside the text on wide screens, one size throughout. */
@media (min-width: 640px) {
  html body.products-page main .renewable-catalog-grid.renewable-catalog-grid{align-items:stretch!important}
  html body.products-page main .renewable-catalog-grid .product-card.product-card {
    grid-template-columns: 12rem minmax(0, 1fr) !important;
    align-items: stretch !important;
  }
  html body.products-page main .renewable-catalog-grid .product-card.product-card > .photo-box.photo-box.photo-box.photo-box.photo-box {
    height: auto !important;
    min-height: 15rem !important;
    width: 100% !important;
    aspect-ratio: auto !important;
  }
}
@media (min-width: 640px) and (max-width: 1279.98px) {
  html body.products-page main .renewable-catalog-grid.renewable-catalog-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Phones: one card per row, so each box can simply take its photo's shape. */
@media (max-width: 639.98px) {
  html body.products-page main .renewable-catalog-grid .product-card.product-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
  html body.products-page main .renewable-catalog-grid .product-card.product-card > .photo-box.photo-box.photo-box.photo-box.photo-box {
    aspect-ratio: var(--photo-ratio, 1) !important;
  }
  html body.products-page main .renewable-catalog-grid .product-card.product-card > div:first-child {
    border-radius: 1.2rem 1.2rem 0 0 !important;
  }
  html body.products-page main .renewable-catalog-grid .product-card.product-card > div:last-child {
    width: 100% !important;
    height: auto !important;
    padding-left: 1rem !important;
  }
}

/* Featured rail and homepage: cards in a row are the same height. */
html body main .renewable-featured-card.renewable-featured-card.renewable-featured-card{height:auto!important;min-height:0!important;max-height:none!important;grid-template-rows:auto 1fr!important}
html body main .renewable-featured-card.renewable-featured-card.renewable-featured-card > .photo-box.photo-box.photo-box.photo-box{width:auto!important}
html body main .renewable-featured-rail.renewable-featured-rail{height:auto!important;grid-auto-rows:auto!important;grid-template-rows:none!important;align-items:stretch!important}
html body main .grid:has(> * img.object-contain[class*="aspect-[4/3]"]){align-items:stretch!important}

/* Homepage: the photo sits in a plain link. */
html body main a.photo-box.photo-box.photo-box.photo-box.photo-box{display:block!important;aspect-ratio:1/1!important}