/* Comparison cards only. Normalize the visible laptop, not the padded image
   canvas. The 14-inch bodies occupy 82% of the frame; 16-inch bodies 94%.
   Offsets align their bottom edges at 80% of the unchanged square frame.
   Both color variants use the same framing. Product pages stay unchanged. */
.shop-container .hero[data-section-id="macbook-pro-proled.14-inch"] {
    --comparison-image-scale: 1.279;
    --comparison-image-y: 1.5%;
}
.shop-container .hero[data-section-id="macbook-pro-proled.16-inch"] {
    --comparison-image-scale: 1.282;
    --comparison-image-y: 1.44%;
}
.shop-container .hero[data-section-id="macbook-pro.14-inch-m6"] {
    --comparison-image-scale: 1.0805;
    --comparison-image-y: 5.21%;
}
.shop-container .hero[data-section-id="macbook-pro.14-inch"],
.shop-container .hero[data-section-id="macbook-pro.14-inch-pro-max"] {
    --comparison-image-scale: 0.82;
    --comparison-image-y: 5.26%;
}
.shop-container .hero[data-section-id="macbook-pro.16-inch"] {
    --comparison-image-scale: 0.94;
    --comparison-image-y: 1.33%;
}
.shop-container .hero[data-section-id^="macbook-pro."] .product-image picture.product,
.shop-container .hero[data-section-id^="macbook-pro-proled."] .product-image picture.product {
    display: block;
    overflow: hidden;
}
.shop-container .hero[data-section-id^="macbook-pro."] .product-image picture.product img,
.shop-container .hero[data-section-id^="macbook-pro-proled."] .product-image picture.product img {
    display: block;
    transform: translateY(var(--comparison-image-y, 0%)) scale(var(--comparison-image-scale, 1));
    transform-origin: center;
}