/* Preserve the existing homepage spacing for packshots with their own white canvas. */
[data-storefront-theme="poolbros"] .pb-product-grid {
  --pb-card-photo-pad: 1rem;
}

[data-storefront-theme="poolbros"] [data-product-card-media] {
  display: grid;
  grid-template: "photo" auto "stock" auto / minmax(0, 1fr);
  aspect-ratio: auto;
  background: #fff;
}

[data-storefront-theme="poolbros"] [data-product-card-media]::before {
  content: "";
  grid-area: photo;
  inline-size: 100%;
  aspect-ratio: 1;
}

[data-storefront-theme="poolbros"] [data-product-card] [data-product-card-media] > img {
  position: absolute;
  grid-area: photo;
  inset: 0;
  object-fit: contain;
  padding: var(--pb-card-photo-pad, 0px);
  scale: none;
  transform: none;
}

[data-storefront-theme="poolbros"] [data-product-card-stock] {
  position: static;
  grid-area: stock;
  margin: 0 .75rem .25rem;
  border-radius: 999px;
}

/* These three photos fill their source frame. Keep the adjustment local to PoolBros. */
[data-storefront-theme="poolbros"] :is([data-product-slug="micon-pmpd"], [data-product-slug="tab-90-25kg"], [data-product-slug="gran-90-25kg"]) {
  --pb-card-photo-pad: clamp(1rem, 2.2vw, 1.875rem);
  --pb-gallery-photo-pad: clamp(1.25rem, 3vw, 2.5rem);
}

[data-storefront-theme="poolbros"] [data-product-slug="micon-pmpd"] {
  /* This landscape packshot also reaches into the top-right wishlist area. */
  --pb-card-photo-pad: 3.625rem clamp(.75rem, 1.8vw, 1.75rem) clamp(.625rem, 1.3vw, 1.125rem);
}

[data-storefront-theme="poolbros"] [data-product-gallery] [data-product-gallery-image] {
  object-fit: contain;
  padding: var(--pb-gallery-photo-pad, 0px);
}

@media (max-width: 767px) {
  [data-storefront-theme="poolbros"] .pb-product-grid {
    --pb-card-photo-pad: .625rem;
  }
}