/**
 * snifffr — Magnific Popup chrome on mobile.
 *
 * The close button and arrows are styled in snifffr-desktop-redesign.css as
 * solid white 40px/52px circles. Those rules are not width-scoped and carry
 * !important, so they land on phones too, where a 52px white disc sits on top
 * of the product photo and the close button overlaps the image's corner.
 *
 * This is the phone treatment: chrome pinned to the viewport instead of the
 * image, dark glass instead of solid white so it reads as an overlay control
 * rather than part of the listing, and the counter moved to a centred pill.
 *
 * Specificity is deliberate. The desktop rules are
 * `body.snifffr-desktop-beta .mfp-gallery .mfp-close` — three classes and an
 * element — so each selector here is listed twice, once plain and once with
 * that body class, and prefixed with `html`, to win for beta and non-beta
 * viewers alike without depending on stylesheet order.
 */

@media (max-width: 991.98px) {

	/* Near-black, not the purple scrim.
	   A coloured backdrop casts over the photo and shifts how the garment's
	   colour reads — which on a marketplace is the thing being sold. Photo
	   viewers go neutral for exactly this reason. Not pure #000, so it still
	   separates from the phone's own black, but near enough to be colourless. */
	html body .mfp-bg,
	html body.snifffr-desktop-beta .mfp-bg {
		background: #0c0a0f !important;
		opacity: .97 !important;
	}

	/* Centring.
	   The photo is centred correctly INSIDE .mfp-content — the problem is that
	   .mfp-content itself can end up wider than the phone, so its centre is not
	   the screen's centre and the picture sits off to the right with a band of
	   backdrop down the left.
	   .mfp-content is an inline-block whose width is shrink-to-fit around the
	   image's intrinsic size, and magnific's own cap for that
	   (.mfp-image-holder .mfp-content {max-width:100%}) is a percentage of an
	   ancestor, so it only holds while every ancestor is itself the right width.
	   Viewport units do not care about the ancestor chain, which is what makes
	   this reliable. */
	/* The container's 8px side padding plus the 94vw cap below leaves the photo
	   a few px off centre. The cap already provides the gutter, so drop the
	   padding and let centring be exact. */
	html body .mfp-gallery .mfp-container,
	html body.snifffr-desktop-beta .mfp-gallery .mfp-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	html body .mfp-gallery .mfp-content,
	html body.snifffr-desktop-beta .mfp-gallery .mfp-content {
		width: auto !important;
		max-width: 100vw !important;
		margin-left: auto !important;
		margin-right: auto !important;
		/* custom.css:2684 puts `padding: 25px 30px 30px 30px` on every
		   .mfp-content, unscoped. With border-box the 100vw cap above then
		   describes the OUTER box, leaving only 100vw - 60px inside it, while
		   the photo's own cap (94vw below) is measured against the viewport and
		   so is wider than the space it has. An overflowing block cannot take
		   auto margins, so it pins to the left content edge — 30px in — and
		   spills off the right. That is the photo sitting too far right.
		   On a phone the picture should be full-bleed anyway. */
		padding: 0 !important;
	}

	html body .mfp-gallery .mfp-img,
	html body.snifffr-desktop-beta .mfp-gallery .mfp-img {
		border-radius: 14px !important;
		max-width: 94vw !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Close: pinned to the viewport, clear of the photo and the notch. */
	html body .mfp-gallery button.mfp-close,
	html body .mfp-gallery .mfp-close,
	html body.snifffr-desktop-beta .mfp-gallery button.mfp-close,
	html body.snifffr-desktop-beta .mfp-gallery .mfp-close {
		position: fixed !important;
		top: calc(10px + env(safe-area-inset-top)) !important;
		right: calc(10px + env(safe-area-inset-right)) !important;
		width: 38px !important;
		height: 38px !important;
		line-height: 38px !important;
		font-size: 20px !important;
		/* Colour is deliberately left to the existing rules: white disc, dark
		   glyph, matching every other control on the site. Only the position
		   and size were wrong on a phone. */
		box-shadow: 0 2px 10px rgba(0, 0, 0, .4) !important;
		z-index: 1046 !important;
	}

	/* Arrows: same glass treatment, tucked against the screen edges so they
	   sit on the backdrop rather than across the middle of the garment. */
	html body .mfp-gallery .mfp-arrow,
	html body.snifffr-desktop-beta .mfp-gallery .mfp-arrow {
		/* magnific-popup.css scales arrows by 0.75 under 900px, so a declared
		   size is not the rendered size. Drop the scale and say what we mean —
		   44px is the minimum comfortable touch target. */
		/* magnific-popup.css scales arrows by 0.75 under 900px, so a declared
		   size is not the rendered size. Drop the scale and say what we mean —
		   44px is the minimum comfortable touch target. */
		transform: none !important;
		transform-origin: center !important;
		/* 40px, down from the desktop 52. Now that swiping works the arrows are
		   the secondary affordance, so they should not sit on the product like
		   a pair of headlights — but they cannot shrink much further either:
		   magnific closes on a backdrop tap, so a near-miss costs you the
		   lightbox. 40px keeps a forgiving target while reading as chrome. */
		width: 40px !important;
		height: 40px !important;
		/* Centring is top:50% plus a negative half-height margin, so the margin
		   has to track the height — zeroing it drops the arrow below centre. */
		margin: -20px 0 0 !important;
		/* Background left alone ON PURPOSE. The chevron inside is drawn as a
		   2px #423e59 border by the existing rules, so a dark disc would hide
		   it completely. White disc, dark chevron, as everywhere else. */
		/* Slightly off full white so they settle into the backdrop rather than
		   glaring; still opaque enough for the dark chevron to read. */
		background: rgba(255, 255, 255, .92) !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .4) !important;
		opacity: 1 !important;
	}
	html body .mfp-gallery .mfp-arrow-left,
	html body.snifffr-desktop-beta .mfp-gallery .mfp-arrow-left {
		left: calc(2px + env(safe-area-inset-left)) !important;
	}
	html body .mfp-gallery .mfp-arrow-right,
	html body.snifffr-desktop-beta .mfp-gallery .mfp-arrow-right {
		right: calc(2px + env(safe-area-inset-right)) !important;
	}

	/* Counter: a centred pill reads as chrome; grey text in the corner read as
	   a stray label. Tabular figures so it does not jiggle while paging. */
	html body .mfp-gallery .mfp-counter,
	html body.snifffr-desktop-beta .mfp-gallery .mfp-counter {
		position: fixed !important;
		top: auto !important;
		right: auto !important;
		left: 50% !important;
		bottom: calc(14px + env(safe-area-inset-bottom)) !important;
		transform: translateX(-50%) !important;
		padding: 5px 12px !important;
		border-radius: 999px !important;
		background: rgba(20, 16, 28, .62) !important;
		border: 1px solid rgba(255, 255, 255, .18) !important;
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		color: #fff !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		line-height: 1.4 !important;
		letter-spacing: .02em !important;
		font-variant-numeric: tabular-nums;
		z-index: 1046 !important;
	}
}