/* Mac-only visuals. The copy retains the existing shared styling. */
.computer-spotlight .mac-visual-panel {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: visible;
}
/* Optical subject sizing, not equal source canvas; first angle reduced 6%.
   Source proportions/pixels stay untouched; offsets center the real silhouette. */
#computer-product-list [data-catalog-slug="clear-matte-case"] {
  --mac-card-width: 92.6147%;
  --mac-card-offset: 1.7751%;
}
#computer-product-list [data-catalog-slug="crystal-case"],
#computer-product-list [data-catalog-slug="shimmer-case"] {
  --mac-card-width: 106.1224%;
  --mac-card-offset: 0.2653%;
}
#computer-product-list [data-catalog-slug="shimmer-case"] {
  --mac-card-offset: 0.0884%;
}
#computer-product-list :is([data-catalog-slug="clear-matte-case"], [data-catalog-slug="crystal-case"], [data-catalog-slug="shimmer-case"]) .product-image-stage {
  position: relative;
}
#computer-product-list :is([data-catalog-slug="clear-matte-case"], [data-catalog-slug="crystal-case"], [data-catalog-slug="shimmer-case"]) .product-image-stage img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--mac-card-width);
  height: auto;
  max-width: none;
  margin-top: var(--mac-card-offset);
  object-fit: contain;
  transform: translate(-50%, -50%);
  transition: none;
}
.computer-spotlight .mac-visual-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(112deg, transparent 52%, #ffffff50 52.2%, #ffffff0a 73%, transparent 73.2%),
    linear-gradient(180deg, #f5f4f0 0%, #e9e8e3 73%, #deded8 73.2%, #f1f0eb 100%);
  background-size: cover;
}
.computer-spotlight .mac-visual-background::after {
  content: "";
  position: absolute;
  inset: 78% 15% 5%;
  background: radial-gradient(ellipse, #7575702b, transparent 67%);
}
.computer-spotlight .mac-product-image {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  object-position: center;
  overflow: visible;
  filter: drop-shadow(0 0.35rem 0.3rem #55554f12) drop-shadow(0 0.9rem 0.8rem #55554f14);
}
@media (max-width: 720px) {
  /* Release the legacy fixed section height when its columns stack. */
  .computer-spotlight:has(.mac-visual-panel) {
    height: auto;
  }
  .computer-spotlight .mac-visual-panel {
    min-height: 0;
    aspect-ratio: 1.4;
  }
}