/*!
 * Madovan Hotspot Product Showcase — frontend styles
 * Scoped under .mhps · no external dependencies · zero side effects on the theme
 * --------------------------------------------------------------------------- */

/* ===== Section wrapper + reset =================================== */
.mhps {
	background-color: var(--mhps-bg, #e7e7e5) !important;
	color: var(--mhps-text, #222);
	font-size: var(--mhps-font-size, 16px);
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--mhps-padding-y, 0) var(--mhps-padding-x, 0);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Polish-capable font stack — !important beats theme/builder fonts that may
   not include all diacritics. Single rule, no per-descendant cascade. */
.mhps,
.mhps * {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Liberation Sans", "DejaVu Sans", "Noto Sans", sans-serif !important;
	box-sizing: border-box;
}
.mhps--no-fullwidth {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ===== Two-column layout (left = hotspots, right = product) ===== */
.mhps__inner {
	background-color: var(--mhps-bg, #e7e7e5) !important;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	aspect-ratio: var(--mhps-aspect, 2) / 1;
}
/* Each column is a fixed 1:1 square. When aspect-ratio > 2 the surplus width
   becomes a gap in the middle filled with --mhps-bg. */
.mhps__left,
.mhps__right {
	flex: 0 0 auto;
	height: 100%;
	width: auto;
	aspect-ratio: 1 / 1;
	max-width: 50%;
	position: relative;
	background: transparent;
}
.mhps__left { display: flex; align-items: stretch; padding: 0; }
.mhps__right {
	display: block;
	padding: 0;
	text-align: center;
	min-width: 0;
	contain: layout paint;
}

/* ===== Left column: main image + hotspot markers =================== */
.mhps__image {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: transparent;
}
.mhps__image-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	transform-origin: center center;
}

.mhps__hotspot {
	position: absolute;
	transform: translate(-50%, -50%) !important;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	-webkit-tap-highlight-color: transparent;
}
.mhps__hotspot:focus { outline: 0; }
.mhps__hotspot:focus-visible .mhps__hotspot-dot {
	box-shadow: 0 0 0 4px rgba(245,179,1,0.45), 0 1px 4px rgba(0,0,0,0.25);
}
.mhps__hotspot-dot {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--mhps-hotspot, #fff);
	border: 1px solid var(--mhps-hotspot-border, #111);
	box-shadow: 0 1px 4px rgba(0,0,0,0.25);
	transform-origin: center center;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.mhps__hotspot:hover .mhps__hotspot-dot { transform: scale(1.25); }
.mhps__hotspot.is-active .mhps__hotspot-dot {
	background: var(--mhps-hotspot-active, #f5b301);
	box-shadow: 0 0 0 4px rgba(245,179,1,0.35), 0 1px 6px rgba(0,0,0,0.3);
}
@keyframes mhps-pulse {
	0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(245,179,1,0.6), 0 1px 4px rgba(0,0,0,0.25); }
	50%  { transform: scale(1.8);  box-shadow: 0 0 0 10px rgba(245,179,1,0),   0 1px 4px rgba(0,0,0,0.25); }
	100% { transform: scale(1);    box-shadow: 0 0 0 4px rgba(245,179,1,0.35), 0 1px 6px rgba(0,0,0,0.3); }
}
.mhps__hotspot.is-pulse .mhps__hotspot-dot {
	animation: mhps-pulse 0.55s ease-out;
}

/* ===== Right column: product card (absolute %-positioned slots) ==== */
.mhps__title {
	position: absolute;
	top: 8%;
	left: 0;
	right: 0;
	height: 9%;
	margin: 0;
	padding: 0 clamp(20px, 4%, 64px);
	color: var(--mhps-title, #111);
	font-size: calc(var(--mhps-font-size, 16px) * 1.15);
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	transform: translateY(var(--mhps-title-offset, 0));
	transition: opacity 0.25s ease;
}

.mhps__media {
	position: absolute;
	top: 47%;
	left: 50%;
	width: 63.25%;
	aspect-ratio: 1 / 1;
	max-width: 96%;
	margin: 0;
	overflow: hidden;
	transform: translate(-50%, -50%) translateY(var(--mhps-media-offset, 0));
}
.mhps__product-img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	max-width: min(95%, calc(95% * var(--mhps-pscale, 1)));
	max-height: min(95%, calc(95% * var(--mhps-pscale, 1)));
	object-fit: contain;
	object-position: center;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: opacity 0.25s ease;
}
.mhps__product-img.is-active {
	opacity: 1;
	pointer-events: auto;
}
.mhps__product-img--empty { background: transparent; }

.mhps__desc {
	position: absolute;
	top: 77%;
	left: 50%;
	width: 76%;
	max-width: 480px;
	height: 8%;
	margin: 0;
	padding: 0;
	line-height: 1.5;
	color: var(--mhps-text, #222);
	text-align: center;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	transform: translateX(-50%) translateY(var(--mhps-desc-offset, 0));
	transition: opacity 0.25s ease;
}

.mhps__cta {
	position: absolute;
	top: 89%;
	left: 50% !important;
	right: auto !important;
	display: inline-block;
	margin: 0 !important;
	font-size: calc(var(--mhps-font-size, 16px) * var(--mhps-cta-scale, 1));
	padding: calc(12px * var(--mhps-cta-scale, 1)) calc(28px * var(--mhps-cta-scale, 1));
	background: var(--mhps-btn-bg, #fff);
	color: var(--mhps-btn-text, #111);
	border: 1px solid var(--mhps-btn-border, #111);
	border-radius: var(--mhps-btn-radius, 999px);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transform: translateX(-50%) translateY(var(--mhps-cta-offset, 0)) !important;
	transform-origin: center center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.mhps__cta:hover { opacity: 0.85; }

/* Mobile-only clickable-image overlay (display managed below in media query). */
.mhps__media-link {
	display: none;
	text-decoration: none;
	color: transparent;
}

/* ===== Navigation arrows ========================================== */
.mhps__nav {
	position: absolute;
	top: 47%;
	transform: translateY(-50%) !important;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 6px;
	color: var(--mhps-arrow, #111);
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	-webkit-tap-highlight-color: transparent;
}
.mhps__nav:focus { outline: 0; }
.mhps__nav svg {
	width: 40px;
	height: 40px;
	display: block;
	transform-origin: center center;
	transition: transform 0.18s ease, opacity 0.18s ease;
}
.mhps__nav:hover svg  { transform: scale(1.18); }
.mhps__nav:active svg { transform: scale(0.92); }
.mhps__nav--prev { left: 6%; }
.mhps__nav--next { right: 6%; }

/* ===== Fade transition during hotspot swap ======================== */
.mhps.is-fading .mhps__title,
.mhps.is-fading .mhps__product-img,
.mhps.is-fading .mhps__desc { opacity: 0; }

/* ===== Responsive — mobile (≤ 900px) =============================== */
@media (max-width: 900px) {
	/* Override desktop CSS variables with mobile counterparts. !important is
	   required to beat inline-style CSS variables set on the <section>. */
	.mhps {
		--mhps-padding-y:    var(--mhps-mobile-padding-y, 0) !important;
		--mhps-padding-x:    var(--mhps-mobile-padding-x, 0) !important;
		--mhps-title-offset: var(--mhps-mobile-title-offset, 0) !important;
		--mhps-desc-offset:  var(--mhps-mobile-desc-offset, 0) !important;
		--mhps-cta-offset:   var(--mhps-mobile-cta-offset, 0) !important;
		--mhps-media-offset: var(--mhps-mobile-media-offset, 0) !important;
	}
	.mhps__inner {
		flex-direction: column;
		justify-content: flex-start;
		aspect-ratio: auto;
	}
	.mhps__left, .mhps__right {
		width: 100%;
		max-width: 100%;
		flex: 1 1 auto;
		aspect-ratio: var(--mhps-mobile-aspect, 1) / 1;
	}
	/* Product box scales up 1.25× on mobile (hardcoded width for cross-browser
	   safety — width-driven aspect-ratio works on iOS where %-height fails). */
	.mhps__media {
		width: 79.0625% !important;
		max-width: 79.0625% !important;
		max-height: none !important;
		height: auto !important;
	}
	.mhps__cta {
		font-size: calc(var(--mhps-font-size, 16px) * var(--mhps-mobile-cta-scale, 1)) !important;
		padding: calc(12px * var(--mhps-mobile-cta-scale, 1)) calc(28px * var(--mhps-mobile-cta-scale, 1)) !important;
	}
	.mhps__desc { font-size: var(--mhps-mobile-desc-font-size, 14px) !important; }
	.mhps__nav { width: 44px; height: 44px; }
	.mhps__nav svg { width: 30px; height: 30px; }
	/* Hide CTA on mobile when flag is set. */
	.mhps--hide-cta .mhps__cta { display: none !important; }
	/* Activate clickable-image overlay. */
	.mhps--mobile-img-link .mhps__media-link {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 5;
		cursor: pointer;
		background: transparent;
		-webkit-tap-highlight-color: rgba(245,179,1,0.15);
	}
}

@media (max-width: 1100px) {
	.mhps__right { padding: clamp(12px, 2.5vw, 32px) clamp(40px, 6vw, 56px); }
}

@media (max-width: 480px) {
	.mhps__right { padding: 20px 40px; min-height: 320px; }
	.mhps__title { font-size: calc(var(--mhps-font-size, 16px) * 1.05); }
	.mhps__cta { padding: 10px 22px; font-size: 13px; }
}

/* ===== Accessibility: respect reduced motion ====================== */
@media (prefers-reduced-motion: reduce) {
	.mhps__title,
	.mhps__product-img,
	.mhps__desc,
	.mhps__cta,
	.mhps__hotspot-dot {
		transition: none !important;
		animation: none !important;
	}
}