/**
 * Image Above Signup (variable PDP).
 *
 * A full-width, edge-to-edge image at the bottom of the product page, above the
 * footer sign-up band. Loaded only on a variable PDP that is toggled on and has
 * at least one image (see inc/image-above-signup.php).
 *
 * @package Konte Child
 */

/* Flush section: no box spacing, and line-height:0 removes the inline-image
   whitespace gap so the image butts against the footer band above/below. */
.vataly-image-above-signup {
	margin: 0;
	padding: 0;
	line-height: 0;
}

/* Full-bleed breakout: span the whole viewport regardless of the container
   gutter, preserving aspect ratio with no distortion. Matches the theme's own
   100vw technique (functions.php); body/#page already clip overflow-x. */
.vataly-image-above-signup__img {
	display: block;
	width: 100vw;
	max-width: none;
	height: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* On the variable PDP the content container carries an asymmetric gutter
   (padding-left:0; padding-right:24px — the Mango-style widening in
   functions.php, scoped to body.konte-variable-pdp at min-width:992px). Its
   content box is therefore off-centre in the viewport by exactly half that
   gutter (12px to the left), in BOTH the full-width (<1800px) and the
   max-width:1800px-centred (>1800px) regimes. The symmetric calc() breakout
   above centres the image on the content box, so it inherits that 12px shift and
   leaves a gap on the right. Correcting the breakout by the half-gutter re-centres
   the image on the viewport at every desktop width. Below 992px the container
   padding is symmetric again and the calc() above is already correct.
   NB: the 12px is half of that container's 24px right padding — keep the two in
   sync if functions.php changes it. */
@media (min-width: 992px) {
	body.konte-variable-pdp .vataly-image-above-signup__img {
		margin-left: calc(50% - 50vw + 12px);
		margin-right: calc(50% - 50vw - 12px);
	}
}

/* Device swap: desktop image by default, mobile image on phones. The child
   theme's dominant convention (toggle display in a media query). Phones-only
   boundary 767.98px matches css/similar-products.css. */
.vataly-image-above-signup__img--mobile {
	display: none;
}

@media (max-width: 767.98px) {
	.vataly-image-above-signup__img--desktop {
		display: none;
	}

	.vataly-image-above-signup__img--mobile {
		display: block;
	}
}