/**
 * SkinPoint landing-page compatibility shims.
 *
 * Scope tightly to migrated LP templates. These rules bridge historical
 * Elementor-authored layout contracts without loading Elementor frontend CSS.
 */

.sp-canvas-landing,
.sp-canvas-landing * {
	box-sizing: border-box;
}

.sp-canvas-landing {
	min-width: 0;
	overflow-x: clip;
}

.sp-canvas-landing #sp-landing-content {
	width: 100%;
	min-width: 0;
}

.sp-lp-diag-beautyplan {
	--sp-lp-container: min(1120px, calc(100% - 32px));
	--sp-lp-section-y: clamp(56px, 8vw, 120px);
	--sp-lp-grid-gap: clamp(24px, 4vw, 56px);
}

.sp-lp-diag-beautyplan .sp-lp-container,
.sp-lp-diag-beautyplan [id^="sp-"] > .sp-lp-container {
	width: var(--sp-lp-container);
	max-width: 100%;
	margin-inline: auto;
}

.sp-lp-diag-beautyplan .sp-lp-section {
	padding-block: var(--sp-lp-section-y);
}

.sp-lp-diag-beautyplan .sp-lp-grid-2,
.sp-lp-diag-beautyplan [class*="grid"] {
	min-width: 0;
}

.sp-lp-diag-beautyplan [id^="sp-"] {
	min-width: 0;
}

/*
 * The global typography layer treats any class containing "hero" as a dark
 * hero context. The migrated Diag intro sections are light payload sections,
 * so restore their local Elementor payload color contract.
 */
.sp-lp-diag-beautyplan .sp-hero-intro {
	color: var(--sp-text, #111) !important;
}

.sp-lp-diag-beautyplan .sp-hero-intro .sp-hero__headline,
.sp-lp-diag-beautyplan .sp-hero-intro .sp-hero__lead,
.sp-lp-diag-beautyplan .sp-hero-intro .sp-hero__quote {
	color: var(--sp-text, #111) !important;
}

.sp-lp-diag-beautyplan .sp-hero-intro .sp-hl {
	color: var(--sp-hl-text, #fff) !important;
}

.sp-lp-diag-beautyplan a[href="#zakup"],
.sp-lp-diag-beautyplan a[href*="/add/"],
.sp-lp-diag-beautyplan [data-sticky-meta] {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

.sp-lp-diag-beautyplan img,
.sp-lp-diag-beautyplan video,
.sp-lp-diag-beautyplan iframe {
	max-width: 100%;
}

/*
 * Historical LP icon contract.
 *
 * The native /diag-peautyplan/ template still contains raw WordPress emoji
 * images and inline check SVGs that Elementor/global widget CSS previously
 * constrained. Keep these as small inline markers without loading Elementor.
 */
.sp-lp-diag-beautyplan #sp-bundle article ul,
.sp-lp-diag-beautyplan #sp-offer aside ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.sp-lp-diag-beautyplan #sp-bundle article li,
.sp-lp-diag-beautyplan #sp-offer aside li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

.sp-lp-diag-beautyplan #sp-bundle article li > img[alt="👉"] {
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	margin: .42em 0 0 !important;
	display: block !important;
}

.sp-lp-diag-beautyplan #sp-offer aside li > svg {
	width: 14px !important;
	height: 14px !important;
	box-sizing: content-box;
	padding: 4px;
	margin-top: .22em;
	border-radius: 999px;
	background: rgba(121, 21, 30, .92);
	fill: #fff;
	flex: 0 0 auto;
}

.sp-lp-diag-beautyplan #sp-bundle article > img {
	width: min(420px, 100%);
	margin: 22px auto;
	display: block;
}

@media (max-width: 768px) {
	.sp-lp-diag-beautyplan {
		--sp-lp-container: min(100%, calc(100% - 28px));
		--sp-lp-section-y: clamp(44px, 12vw, 72px);
	}
}