/**
 * PDP gallery presentation.
 *
 * The product image is the gallery: pdp-gallery.js renders the image URLs that
 * already exist in the WooCommerce/ShopEngine gallery markup, and sizes the box
 * to the image itself, so there is no container drawn around the image. The
 * arrows, dots and discount badge are positioned against that box.
 *
 * Safety rule: the original gallery is only hidden when .ln-pdp-gallery-active
 * is present, which JS adds only after the replacement image is in the DOM.
 * If JS does not run, the original gallery stays visible.
 */

body.single-product {
	--ln-pdp-gallery-brown: var(--ln-pdp-brown, #7e4129);

	/* Touch/tablet default; the desktop block below raises it. */
	--ln-pdp-gallery-max-h: min(112vw, 58vh);
}

body.single-product .shopengine-product-page .shopengine-product-image {
	position: relative;
}

/*
 * The box is sized from the image's own aspect ratio (set by JS from the
 * image's natural dimensions), capped by --ln-pdp-gallery-max-h, so the image
 * fills it completely and no frame, padding or background is ever visible.
 */
body.single-product .shopengine-product-page .ln-pdp-gallery {
	position: relative;
	width: min(100%, calc(var(--ln-pdp-gallery-max-h) * var(--ln-pdp-gallery-ratio, 1)));
	max-width: 100%;
	aspect-ratio: var(--ln-pdp-gallery-ratio, 1);
	margin: 0;
	padding: 0;
	background: none;
	box-sizing: border-box;

	/* Vertical scrolling stays with the page; horizontal swipes are ours. */
	touch-action: pan-y;
}

body.single-product .shopengine-product-page .ln-pdp-gallery__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: center;
	opacity: 0;
	transition: opacity 0.45s ease;
	box-sizing: border-box;
}

body.single-product .shopengine-product-page .ln-pdp-gallery__img.is-active {
	opacity: 1;
}

/* ── Previous / next: arrow only, no button surface ── */
body.single-product .shopengine-product-page .ln-pdp-gallery__nav {
	position: absolute;
	top: calc(50% - 26px);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--ln-pdp-gallery-brown);
	opacity: 0.92;
	cursor: pointer;
	transition: opacity 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

body.single-product .shopengine-product-page .ln-pdp-gallery__nav--prev {
	left: 0;
}

body.single-product .shopengine-product-page .ln-pdp-gallery__nav--next {
	right: 0;
}

body.single-product .shopengine-product-page .ln-pdp-gallery__nav svg {
	width: 26px;
	height: 26px;

	/* Stronger edge so arrows stay readable on light and dark image areas. */
	filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 1px rgba(77, 44, 34, 0.35));
}

body.single-product .shopengine-product-page .ln-pdp-gallery__nav:hover,
body.single-product .shopengine-product-page .ln-pdp-gallery__nav:focus-visible {
	background: none;
	opacity: 1;
}

/* ── Position dots, bottom-centre of the image ── */
body.single-product .shopengine-product-page .ln-pdp-gallery__dots {
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	z-index: 4;
	display: flex;
	gap: 2px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background: none;
}

body.single-product .shopengine-product-page .ln-pdp-gallery__dot {
	position: relative;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Small visible dot inside a comfortable tap target. */
body.single-product .shopengine-product-page .ln-pdp-gallery__dot::after {
	content: "";
	position: absolute;
	top: calc(50% - 3.5px);
	left: calc(50% - 3.5px);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	transition: background-color 0.2s ease;
}

body.single-product .shopengine-product-page .ln-pdp-gallery__dot.is-active::after {
	background: var(--ln-pdp-gallery-brown);
}

/* ── Old presentation: hidden only once the replacement exists ── */
body.single-product .shopengine-product-page .shopengine-product-image.ln-pdp-gallery-active .woocommerce-product-gallery,
body.single-product .shopengine-product-page .shopengine-product-image.ln-pdp-gallery-active .shopengine-gallery-wrapper {
	display: none !important;
}

body.single-product .shopengine-product-page .shopengine-product-image-toggle,
body.single-product .shopengine-product-page .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* ── Rectangular discount badge, top-left of the image ── */
body.single-product .shopengine-product-page .shopengine-product-image > span.onsale {
	display: inline-flex !important;
	position: absolute !important;
	top: clamp(10px, 2vw, 22px) !important;
	left: clamp(10px, 2vw, 22px) !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 5 !important;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 7px 12px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	color: var(--ln-pdp-gallery-brown) !important;
	font-family: var(--ln-pdp-info-font, "ABCRepro-Regular", "ABC_Repro", Kanit, sans-serif) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

body.single-product .shopengine-product-page .shopengine-product-image > span.onsale::before,
body.single-product .shopengine-product-page .shopengine-product-image > span.onsale::after {
	display: none !important;
	content: none !important;
}

/*
 * Below desktop the gallery column is a stacked flex container. A flex item
 * whose height comes from an aspect-ratio box with a percentage width reports
 * an intrinsic height of zero, which collapses the column and lets the image
 * overlap the content below it. Block layout measures the same box correctly.
 */
@media (max-width: 1024px) {
	body.single-product .shopengine-product-page .elementor-element-fd42707,
	body.single-product .shopengine-product-page .elementor-element-0662cc7 {
		display: flow-root !important;
	}
}

@media (min-width: 1025px) {
	body.single-product {
		--ln-pdp-gallery-sticky-top: 72px;
		--ln-pdp-gallery-max-h: clamp(460px, calc(100vh - 150px), 820px);
	}

	body.admin-bar.single-product {
		--ln-pdp-gallery-sticky-top: 104px;
	}

	/* Sticky needs visible overflow on the ancestors of the gallery column. */
	body.single-product .shopengine-product-page .elementor-element-88ddf02,
	body.single-product .shopengine-product-page .elementor-element-67d99be,
	body.single-product .shopengine-product-page .elementor-element-88ddf02 > .e-con-inner,
	body.single-product .shopengine-product-page .elementor-element-67d99be > .e-con-inner,
	body.single-product .shopengine-product-page .elementor-element-fd42707,
	body.single-product .shopengine-product-page .elementor-element-0662cc7 {
		overflow: visible !important;
	}

	body.single-product .shopengine-product-page .elementor-element-fd42707,
	body.single-product .shopengine-product-page .elementor-element-0662cc7 {
		position: sticky !important;
		top: var(--ln-pdp-gallery-sticky-top) !important;
		align-self: flex-start !important;
	}

	/*
	 * The product row is an Elementor boxed container: .e-con-inner is capped at
	 * --container-max-width (1260px) and centred with auto side margins. On wide
	 * screens those auto margins are ~320px, which is the empty strip to the left
	 * of the gallery. Swap the auto centring for a page gutter that is capped at
	 * the size of the margin it replaces, so narrower desktops keep their current
	 * spacing and nothing can ever get wider than the viewport.
	 */
	body.single-product .shopengine-product-page .elementor-element-88ddf02 > .e-con-inner,
	body.single-product .shopengine-product-page .elementor-element-67d99be > .e-con-inner {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: min(48px, max(0px, calc((100% - var(--container-max-width, 1260px)) / 2)));
		padding-right: min(48px, max(0px, calc((100% - var(--container-max-width, 1260px)) / 2)));
	}

	/* The row is still centred on the viewport, so the 50/50 split keeps the
	   information column starting exactly where it does today; capping it at half
	   the site content width keeps its width identical too, and the extra space
	   goes to the gallery column. */
	body.single-product .shopengine-product-page .elementor-element-fd42707,
	body.single-product .shopengine-product-page .elementor-element-0662cc7,
	body.single-product .shopengine-product-page .elementor-element-cf65515,
	body.single-product .shopengine-product-page .elementor-element-a7de2b9 {
		flex-grow: 0;
		flex-shrink: 0;
	}

	body.single-product .shopengine-product-page .elementor-element-cf65515,
	body.single-product .shopengine-product-page .elementor-element-a7de2b9 {
		max-width: calc(var(--container-max-width, 1260px) / 2);
	}

	body.single-product .shopengine-product-page .shopengine-product-image {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/*
	 * Slight desktop-only horizontal expansion within the existing gallery
	 * column. Square product photos keep object-fit: contain (no crop); a
	 * 40px width bump is the smallest change that actually widens the painted
	 * image. Top sticky offset is unchanged.
	 */
	body.single-product .shopengine-product-page .ln-pdp-gallery {
		width: min(100%, calc(var(--ln-pdp-gallery-max-h) * var(--ln-pdp-gallery-ratio, 1) + 40px));
	}

	body.single-product .shopengine-product-page .ln-pdp-gallery__dots {
		bottom: 14px;
	}
}