/**
 * Trial side gutter banners — PCSpecialist-style.
 * Centered content column + full readable creatives (contain, top).
 * Marquee/slot constrained to the same center max-width (no gutter overlap).
 * Skins from viewport top (behind header) with dark gutter fill — no white gaps.
 * Hidden when viewport has no usable gutter (<1520px).
 */

.pcp-side-skins {
	display: none;
}

@media (min-width: 1520px) {
	body.pcp-side-skins-on {
		/* Center column; leftover viewport becomes readable side skins. */
		--pcp-center-max: 1180px;
		--pcp-side-skin-w: max(160px, calc((100vw - var(--pcp-center-max)) / 2));
		/*
		 * Clear full WHB (logo row + CATEGORIE/bottom). Sticky-only (~120px)
		 * still tucked headlines under nav in the user screenshot.
		 */
		--pcp-side-skin-pad: max(
			calc(var(--wd-header-general-h, 128px) + var(--wd-header-bottom-h, 44px)),
			calc(var(--wd-header-general-sticky-h, 120px) + var(--wd-header-bottom-sticky-h, 0px))
		);
		/* Gutter fill stays on the skins, never on the whole page. */
		background-color: #ffffff;
	}

	body.pcp-side-skins-on .website-wrapper {
		width: auto;
		max-width: var(--pcp-center-max);
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		background-color: #fff;
	}

	/*
	 * Brand marquee otherwise breaks out to 100vw and paints over gutters.
	 * Keep scroll animation; clip logos to the centered content column.
	 */
	body.pcp-side-skins-on .pcp-brand-marquee-section,
	body.pcp-side-skins-on .pcp-brand-marquee-slot,
	body.pcp-side-skins-on .pcp-brand-marquee-slot--full-row,
	body.pcp-side-skins-on .pcp-brand-marquee-slot--after-trust,
	body.pcp-side-skins-on .pcp-brand-marquee-slot--under-hero,
	body.pcp-side-skins-on .pcp-brand-marquee-slot--mid-page,
	body.pcp-side-skins-on .pcp-brand-marquee-slot--elementor,
	body.pcp-side-skins-on .pcp-brand-marquee-bar,
	body.pcp-side-skins-on .elementor-widget-shortcode .pcp-brand-marquee-slot--full-row,
	body.pcp-side-skins-on .elementor-section.elementor-section-stretched .pcp-brand-marquee-slot--full-row,
	body.pcp-side-skins-on .elementor-section.elementor-section-full_width .pcp-brand-marquee-slot--full-row {
		width: 100% !important;
		max-width: var(--pcp-center-max) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		box-sizing: border-box;
	}

	/* Full viewport height under/behind header — dark fill kills white gutter bars. */
	.pcp-side-skins {
		display: block;
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 15;
	}

	.pcp-side-skin {
		position: absolute;
		top: 0;
		bottom: 0;
		width: var(--pcp-side-skin-w);
		pointer-events: auto;
		overflow: hidden;
		background: #0a0a0a;
		outline: none;
	}

	.pcp-side-skin--left {
		left: 0;
	}

	.pcp-side-skin--right {
		right: 0;
	}

	.pcp-side-skin:focus-visible {
		outline: 2px solid #c8c8c8;
		outline-offset: -2px;
	}

	/*
	 * Dark box fills from top:0 (flush under/behind black header).
	 * padding-top keeps creative headlines below sticky header when scrolling.
	 */
	.pcp-side-skin__img {
		display: block;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-top: var(--pcp-side-skin-pad);
		object-fit: contain;
		object-position: center top;
		background: #0a0a0a;
		pointer-events: none;
		user-select: none;
	}

	/*
	 * Banner fondo: resta nella colonna centrale (no 100vw) così
	 * l'immagine non viene upscalata oltre la risoluzione nativa.
	 */
	body.pcp-side-skins-on #pcp-footer-banner,
	body.pcp-side-skins-on .pcp-footer-banner {
		position: relative;
		z-index: 20;
		width: 100%;
		max-width: var(--pcp-center-max);
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		background: #ffffff;
	}

	body.pcp-side-skins-on .wd-footer.pcp-footer-wrap,
	body.pcp-side-skins-on .pcp-footer-wrap {
		position: relative;
		z-index: 20;
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		box-sizing: border-box;
	}
}

@media (min-width: 1800px) {
	body.pcp-side-skins-on {
		--pcp-center-max: 1280px;
	}
}

@media (min-width: 2200px) {
	body.pcp-side-skins-on {
		--pcp-center-max: 1400px;
	}
}