/**
 * Square hero images: product photo on the right, soft fade into dark for copy.
 * Wide (≈2.22) slides keep the default full-bleed cover treatment.
 */

/* Clip any right overhang so it never paints onto the adjacent Splide slide. */
.tsak-main-slide.tsak-main-slide--square {
	background-image: none !important;
	background-color: #0a0a0a;
	overflow: hidden;
}

.tsak-main-slide--square > .tsak-main-slider-image {
	top: 0;
	left: auto;
	/* Was -8%; that hung past the slide edge into the next slide. */
	right: 0;
	bottom: 0;
	z-index: 0;
	width: auto;
	height: 100%;
	max-width: 68%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.tsak-main-slide--square > .tsak-main-slider-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		#0a0a0a 0%,
		rgba(10, 10, 10, 0.75) 6%,
		rgba(10, 10, 10, 0.28) 18%,
		rgba(10, 10, 10, 0.06) 32%,
		transparent 48%
	);
}

.tsak-main-slide--square > .tsak-main-slider-image picture {
	display: block;
	width: 100%;
	height: 100%;
}

.tsak-main-slide--square > .tsak-main-slider-image img,
.tsak-main-slide--square > .tsak-main-slider-image picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
}

/* Pre-Splide boot: keep square crop (override hero height:auto rule). */
#brxe-ejhgmb.splide:not(.is-initialized) .tsak-main-slide--square > .tsak-main-slider-image img,
#brxe-ejhgmb.splide:not(.is-initialized) .tsak-main-slide--square > .tsak-main-slider-image picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
}

/* Hard-clip the track so subpixel slide gaps never flash the next slide. */
#brxe-ejhgmb.splide .splide__track,
#brxe-ejhgmb.splide .splide__slide {
	overflow: hidden;
}

/*
 * Readable copy on full-bleed (wide) slides: 50% black behind title /
 * description / countdown only (not the Coming Up type badge).
 *
 * Bars bleed to the slide’s left edge (JS sets negative margin = slide
 * padding; left pad restores text inset). Left corners stay square; right
 * radii from measured widths. Title/desc use .tsak-slide-text-bg (inline +
 * clone) so wrapped lines still hug.
 */
.tsak-main-slider .tsak-main-slide > .brxe-heading,
.tsak-main-slider .tsak-main-slide > .brxe-text-basic:not(.brxe-zwoddx):not(.brxe-phxidh),
.tsak-main-slider .tsak-main-slide > .countdown-timer {
	align-self: flex-start !important;
	box-sizing: border-box !important;
	width: fit-content !important;
	max-width: min(85%, 28rem) !important;
	min-width: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	/* keep heading margin-top:auto from Bricks so the stack stays bottom-aligned */
	padding: 0 !important;
	text-indent: 0 !important;
	/*
	 * --tsak-lh drives line-height; matching half-leading pad on the hug span
	 * makes wrapped lines abut as one unit (no gap, no overlap).
	 */
	--tsak-lh: 1.4;
	line-height: var(--tsak-lh) !important;
	border-radius: 0;
	background-color: transparent !important;
}

.tsak-main-slider .tsak-main-slide > .brxe-text-basic:not(.brxe-zwoddx):not(.brxe-phxidh),
.tsak-main-slider .tsak-main-slide > .countdown-timer {
	margin-top: 0.35rem !important;
}

.tsak-main-slider .tsak-main-slide > .countdown-timer {
	display: inline-flex !important;
	align-items: center;
	width: max-content !important;
	line-height: 1.25 !important;
	/* left pad set by JS (slide pad + inset) so it aligns with title/desc bleed */
	padding-top: 0.35rem !important;
	padding-right: 0.55rem !important;
	padding-bottom: 0.35rem !important;
	padding-left: 0.55rem;
	background-color: rgba(0, 0, 0, 0.5) !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* CTA under copy: vertical gap + match text inset (JS refines margin-left) */
.tsak-main-slider .tsak-main-slide > .brxe-button {
	margin-top: 0.75rem !important;
	margin-left: 0.55rem !important;
}

/*
 * Inline hug + clone. Vertical pad = half-leading so fills meet at the line
 * boundary (one unit). Left/right pad refined in JS for edge bleed.
 */
.tsak-main-slider .tsak-main-slide .tsak-slide-text-bg {
	--tsak-lh: 1.4;
	background-color: rgba(0, 0, 0, 0.5);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding-top: calc((var(--tsak-lh) - 1) * 0.5em + 0.5px);
	padding-bottom: calc((var(--tsak-lh) - 1) * 0.5em + 0.5px);
	padding-left: 0.55rem;
	padding-right: 0.55rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}