.ipg-gallery {
	margin: 0 0 1em !important; /* theme/WooCommerce core spacing meant for the old thumbnail-strip gallery is otherwise oversized for this shorter layout */
	padding: 0 !important;
}

/* All sizing lives here, not on .ipg-gallery: .ipg-gallery also contains
   .ipg-dots as a sibling below this track, and a box sized by aspect-ratio
   stops being a "definite" height once a sibling forces the shared parent
   to grow to fit additional content -- which breaks the height:100% /
   max-height:100% percentage chain all the way down to the <img>, so it
   renders at its natural size and gets clipped by overflow:hidden instead
   of scaling down. Giving .ipg-track its own sizing, with no sibling
   inside the same box, keeps that chain definite in both directions. */
.ipg-track {
	position: relative;
	box-sizing: border-box;
	aspect-ratio: var(--ipg-ratio, 1 / 1);
	overflow: hidden;
	background: #ffffff;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden; /* without this, setting overflow-x alone makes overflow-y compute to "auto" too, which can make the image area vertically scrollable */
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0;
	padding: 0;
}

.ipg-track::-webkit-scrollbar {
	display: none;
}

.ipg-track .woocommerce-product-gallery__image {
	flex: 0 0 100%;
	/* Flex items default to min-width/min-height: auto, which resolves to
	   the content's natural (min-content) size and lets the item grow past
	   height:100% regardless -- here that content is an <img> whose natural
	   size is its real intrinsic dimensions, so without this reset the item
	   silently grows taller than the track and the excess gets clipped by
	   overflow:hidden, i.e. exactly the "cropped instead of scaled" bug. */
	min-width: 0;
	min-height: 0;
	scroll-snap-align: center;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	overflow: hidden;
}

/* wc_get_gallery_image_html() wraps the <img> in a plain <a> (the lightbox
   trigger) with no sizing of its own, so it shrinks to fit its content --
   which makes it an INDEFINITE containing block for the <img>'s percentage
   height/max-height below (percentages against an auto-height ancestor
   resolve as if unset). Live-verified this on indizio.pl: even after fixing
   the theme's max-height:500px override, forcing the track down to a small
   admin-configured height still didn't shrink the image, because
   max-height:100% was resolving against this auto-sized <a>, not the real
   slide box. Giving the anchor an explicit 100%/100% size (and doing the
   center/center alignment here instead of on the slide) closes that gap --
   confirmed via getBoundingClientRect that the image then actually clamps
   to the configured height and scales its width down proportionally. */
body.woocommerce div.product div.images.ipg-gallery .ipg-track .woocommerce-product-gallery__image > a {
	display: flex !important;
	width: 100% !important;
	height: 100% !important;
	align-items: center !important;
	justify-content: center !important;
}

/* This selector's specificity is deliberately inflated (real, always-present
   ancestor context, not a hack): live-inspected on indizio.pl and found the
   theme itself ships
     body.woocommerce div.product div.images .woocommerce-product-gallery__image img
       { height: auto !important; max-height: 500px !important; }
   unconditionally (not inside any media query, so it hits mobile too). That
   selector has 4 classes; ours needs at least as many to win against its
   !important, since two !important declarations of equal importance are
   resolved by specificity, not source order. Confirmed via getComputedStyle
   that this theme rule was overriding our previous, less specific
   ".ipg-track .woocommerce-product-gallery__image img" (2 classes) -- our
   max-height:100% was being ignored in favour of the theme's literal 500px
   cap, which is what let the image overflow its box and get clipped.

   width/height are "auto", not "100%": the image must never be stretched to
   fill the slide box. Instead max-width/max-height cap it at the box's real
   size (100% of the slide, itself the track's height -- either the real
   aspect-ratio on desktop, or the admin's configured px height on mobile),
   and object-fit:contain (together with the browser's own replaced-element
   sizing algorithm) shrinks the image proportionally to fit within that cap
   -- e.g. a 500(h) x 150(w) source capped to a 200px-tall box renders at
   200 x 60, never 200 x (full box width). */
body.woocommerce div.product div.images.ipg-gallery .ipg-track .woocommerce-product-gallery__image img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
}

/* Dots are mobile-only; desktop shows .ipg-thumbnails instead (see the
   max-width:768px block below, which flips both). */
.ipg-dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 6px;
	min-height: 18px;
	margin: 0;
	padding: 4px 0;
}

.ipg-dot {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e2e2e2;
	cursor: pointer;
	position: relative;
	box-sizing: border-box;
	transition: transform .2s ease, background-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.ipg-dot:hover,
.ipg-dot:active {
	background: #e2e2e2;
}

.ipg-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.ipg-dot.is-active,
.ipg-dot.is-active:hover,
.ipg-dot.is-active:active {
	background: #c5a059;
	transform: scale(1.15);
}

/* Thumbnails are desktop-only; mobile shows .ipg-dots instead (see the
   max-width:768px block below, which flips both). */
.ipg-thumbnails {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
}

.ipg-thumb {
	width: 64px;
	height: 64px;
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	background: none;
	cursor: pointer;
	overflow: hidden;
	box-sizing: border-box;
	opacity: .6;
	transition: opacity .15s ease, border-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	/* Same reasoning as the main image: center a proportionally-sized <img>
	   rather than stretch/crop it to fill this square slot. */
	display: flex;
	align-items: center;
	justify-content: center;
}

body.woocommerce div.product div.images.ipg-gallery .ipg-thumbnails .ipg-thumb img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
}

.ipg-thumb:hover {
	opacity: 1;
}

.ipg-thumb.is-active {
	opacity: 1;
	border-color: #c5a059;
}

.ipg-thumb:focus-visible {
	outline: 2px solid #c5a059;
	outline-offset: 2px;
}

.ipg-arrow {
	display: none;
	position: absolute;
	top: 50%;
	left: auto;
	right: auto;
	bottom: auto;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	cursor: pointer;
	opacity: 0;
	box-sizing: border-box;
	transition: opacity .2s ease;
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

/* Pin position and background across every interaction state so no theme
   button reset or native "pressed" UA style can shift or recolor it. */
.ipg-arrow:hover,
.ipg-arrow:focus,
.ipg-arrow:active {
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .85);
}

.ipg-arrow--prev {
	left: 12px;
}

.ipg-arrow--next {
	right: 12px;
}

.ipg-arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid #111111;
	border-right: 2px solid #111111;
	transform: translate(-50%, -50%) rotate(-135deg);
}

.ipg-arrow--next::before {
	transform: translate(-65%, -50%) rotate(45deg);
}

.ipg-dot:focus-visible,
.ipg-arrow:focus-visible {
	outline: 2px solid #c5a059;
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.ipg-has-multiple .ipg-arrow {
		display: block;
	}

	.ipg-track:hover .ipg-arrow,
	.ipg-arrow:focus-visible {
		opacity: 1;
	}
}

/* Fixed desktop box height, same idea as the mobile rule below: aspect-ratio
   made the box scale with column width times the main image's own ratio,
   unbounded in both directions -- a near-square image rendered small and a
   tall/narrow one (e.g. 373x751) rendered oversized. A fixed height gives
   every product the same box size regardless of its image's proportions;
   object-fit:contain (already on the img rule) centers each image inside
   without stretching, scaling smaller images up and larger ones down. */
@media (min-width: 769px) {
	.ipg-track {
		aspect-ratio: unset;
		height: var(--ipg-desktop-height, 500px);
	}

	/* .ipg-gallery's own box top already lines up with .summary's box top
	   (both are plain floated children of the same row, no flex/grid
	   stretching involved) -- the ~2px gap that's actually visible on
	   indizio.pl comes from the product title's line-height leaving a sliver
	   of space above the glyphs themselves (font metrics, not box metrics).
	   Live-measured via Range.getBoundingClientRect() on the title's first
	   text node: nudging the gallery down by that same amount lines up the
	   image's visible top edge with the optical top of the title text. */
	.ipg-gallery {
		margin-top: 2px !important;
	}
}

@media (max-width: 768px) {
	.ipg-track {
		aspect-ratio: unset;
		height: var(--ipg-mobile-height, 380px) !important;
	}

	.ipg-dots {
		display: flex;
	}

	.ipg-thumbnails {
		display: none;
	}

	/* .ipg-title-row is built by gallery.js, wrapping the title and the YITH
	   wishlist button together so the button docks next to the title instead
	   of on its own full-width row above it (see initWishlistPlacement()).
	   A WPCode site CSS snippet already forces that button to
	   position:static + width:100% on this breakpoint (selector
	   "body.single-product .product.type-product .yith-add-to-wishlist-button-block",
	   4 classes + 1 tag) -- this rule needs to out-specify that, since both
	   are !important, hence the matching body/.product/.type-product prefix
	   plus one extra class from .ipg-title-row. */
	.ipg-title-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 8px;
	}

	.ipg-title-row > .product_title {
		flex: 1 1 auto;
		min-width: 0;
	}

	body.single-product .product.type-product .ipg-title-row .yith-add-to-wishlist-button-block {
		position: static !important;
		width: auto !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ipg-arrow,
	.ipg-dot {
		transition: none;
	}
}