/* ─── DTC Product Picker - Grid ─────────────────────────────────────────── */

.elementor-widget-dtc_product_picker_grid .elementor-loop-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* overridden by control selector */
}

/* Editor placeholder */
.dtc-picker-placeholder {
	background: #f0f0f0;
	border: 2px dashed #ccc;
	border-radius: 4px;
	color: #666;
	font-size: 14px;
	padding: 20px;
	text-align: center;
}


/* ─── DTC Product Picker - Carousel ─────────────────────────────────────── */

/* Default CSS variables — mirrors widget-loop-carousel for our wrapper classes.
   Shared by the picker carousel and the multi-row carousel. */
:is(.elementor-widget-dtc_product_picker_carousel, .elementor-widget-dtc_product_carousel_multirow) {
	height: -moz-fit-content;
	height: fit-content;

	/* Pagination */
	--swiper-pagination-size: 0;
	--swiper-pagination-spacing: 10px;
	--swiper-padding-bottom: calc(var(--swiper-pagination-size) + var(--swiper-pagination-spacing));

	/* Gap and offset */
	--swiper-slides-gap: 10px;
	--swiper-offset-size: 0;

	/* Arrow defaults - prev */
	--arrow-prev-top-align: 50%;
	--arrow-prev-top-position: 0px;
	--arrow-prev-caption-spacing: 0px;
	--arrow-prev-translate-y: -50%;
	--arrow-prev-left-align: 0%;
	--arrow-prev-left-position: 0px;
	--arrow-prev-translate-x: 0px;

	/* Arrow defaults - next */
	--arrow-next-top-align: 50%;
	--arrow-next-top-position: 0px;
	--arrow-next-caption-spacing: 0px;
	--arrow-next-translate-y: -50%;
	--arrow-next-right-align: 0%;
	--arrow-next-right-position: 0px;
	--arrow-next-translate-x: 0%;

	/* Arrow styling */
	--arrow-size: 25px;
	--arrow-normal-color: hsla(0, 0%, 93%, 0.9);
	--arrow-hover-color: hsla(0, 0%, 93%, 0.9);

	/* Dots defaults */
	--dots-normal-color: rgba(0, 0, 0, 0.3);
	--dots-hover-color: rgba(0, 0, 0, 0.9);

	/* Fraction defaults */
	--fraction-color: #000;

	/* Progressbar defaults */
	--progressbar-normal-color: rgba(0, 0, 0, 0.3);
	--progressbar-hover-color: rgba(0, 0, 0, 0.9);

	/* Pagination position - bullets */
	--dots-vertical-position: 100%;
	--dots-vertical-offset: 0px;
	--dots-horizontal-position: 50%;
	--dots-horizontal-offset: 0px;
	--dots-horizontal-transform: -50%;
	--dots-vertical-transform: -100%;

	/* Pagination position - fraction */
	--fraction-vertical-position: 100%;
	--fraction-vertical-offset: 0px;
	--fraction-horizontal-position: 50%;
	--fraction-horizontal-offset: 0px;
	--fraction-horizontal-transform: -50%;
	--fraction-vertical-transform: -100%;

	/* Pagination position - progressbar */
	--progressbar-vertical-position: 100%;
	--progressbar-vertical-offset: 0px;
	--progressbar-height: 4px;
}

/* Pagination type: activate size variable */
.elementor-widget-dtc_product_picker_carousel.elementor-pagination-type-bullets {
	--swiper-pagination-size: 6px;
}

.elementor-widget-dtc_product_picker_carousel.elementor-pagination-type-fraction {
	--swiper-pagination-size: 16px;
}

.elementor-widget-dtc_product_picker_carousel.elementor-pagination-type-progressbar {
	--swiper-pagination-size: 4px;
}

/* Swiper container */
:is(.elementor-widget-dtc_product_picker_carousel, .elementor-widget-dtc_product_carousel_multirow) .elementor-loop-container {
	overflow: hidden;
}

:is(.elementor-widget-dtc_product_picker_carousel, .elementor-widget-dtc_product_carousel_multirow) .swiper-slide {
	height: auto;
}

/* ── Arrows ──────────────────────────────────────────────────────────────── */

:is(.elementor-widget-dtc_product_picker_carousel, .elementor-widget-dtc_product_carousel_multirow) .elementor-swiper-button {
	color: var(--arrow-normal-color);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--arrow-size);
	line-height: 1;
	position: absolute;
	transition: color 0.25s ease;
	z-index: 2;
}

:is(.elementor-widget-dtc_product_picker_carousel, .elementor-widget-dtc_product_carousel_multirow) .elementor-swiper-button svg {
	fill: var(--arrow-normal-color);
	height: 1em;
	width: 1em;
}

:is(.elementor-widget-dtc_product_picker_carousel, .elementor-widget-dtc_product_carousel_multirow) .elementor-swiper-button:hover {
	color: var(--arrow-hover-color);
}

:is(.elementor-widget-dtc_product_picker_carousel, .elementor-widget-dtc_product_carousel_multirow) .elementor-swiper-button:hover svg {
	fill: var(--arrow-hover-color);
}

:is(.elementor-widget-dtc_product_picker_carousel, .elementor-widget-dtc_product_carousel_multirow) .elementor-swiper-button.swiper-button-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* Prev arrow positioning */
:is(.elementor-widget-dtc_product_picker_carousel, .elementor-widget-dtc_product_carousel_multirow) .elementor-swiper-button-prev {
	inset-inline-start: calc(var(--arrow-prev-left-align) + var(--arrow-prev-left-position));
	top: calc(var(--arrow-prev-top-align) + var(--arrow-prev-top-position) - var(--arrow-prev-caption-spacing));
	transform: translate(
		calc(var(--arrow-prev-translate-x) * var(--direction-multiplier, 1)),
		var(--arrow-prev-translate-y)
	);
}

/* Next arrow positioning */
:is(.elementor-widget-dtc_product_picker_carousel, .elementor-widget-dtc_product_carousel_multirow) .elementor-swiper-button-next {
	inset-inline-end: calc(var(--arrow-next-right-align) + var(--arrow-next-right-position));
	top: calc(var(--arrow-next-top-align) + var(--arrow-next-top-position) - var(--arrow-next-caption-spacing));
	transform: translate(
		calc(var(--arrow-next-translate-x) * var(--direction-multiplier, 1)),
		var(--arrow-next-translate-y)
	);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

/* Outside positioning (adds padding-bottom) */
.elementor-widget-dtc_product_picker_carousel.elementor-pagination-position-outside .elementor-loop-container {
	padding-bottom: var(--swiper-padding-bottom);
}

/* Bullets */
.elementor-widget-dtc_product_picker_carousel .swiper-pagination-bullets {
	inset-inline-start: calc(var(--dots-horizontal-position) + var(--dots-horizontal-offset));
	top: calc(var(--dots-vertical-position) + var(--dots-vertical-offset));
	transform: translate(
		calc(var(--dots-horizontal-transform) * var(--direction-multiplier, 1)),
		var(--dots-vertical-transform)
	);
	height: -moz-max-content;
	height: max-content;
	width: -moz-max-content;
	width: max-content;
	position: absolute;
	z-index: 3;
}

.elementor-widget-dtc_product_picker_carousel .swiper-pagination-bullet {
	background-color: var(--dots-normal-color);
	height: var(--swiper-pagination-size);
	opacity: 1;
	transition: background-color 0.25s;
	width: var(--swiper-pagination-size);
}

.elementor-widget-dtc_product_picker_carousel .swiper-pagination-bullet-active,
.elementor-widget-dtc_product_picker_carousel .swiper-pagination-bullet:hover {
	background-color: var(--dots-hover-color);
}

/* Fraction */
.elementor-widget-dtc_product_picker_carousel .swiper-pagination-fraction {
	color: var(--fraction-color);
	font-size: var(--swiper-pagination-size);
	inset-inline-start: calc(var(--fraction-horizontal-position) + var(--fraction-horizontal-offset));
	top: calc(var(--fraction-vertical-position) + var(--fraction-vertical-offset));
	transform: translate(
		calc(var(--fraction-horizontal-transform) * var(--direction-multiplier, 1)),
		var(--fraction-vertical-transform)
	);
	position: absolute;
	z-index: 3;
}

/* Progressbar */
.elementor-widget-dtc_product_picker_carousel .swiper-pagination-progressbar {
	background: var(--progressbar-normal-color);
	height: var(--swiper-pagination-size, var(--progressbar-height));
	position: absolute;
	inset-inline-start: 0;
	top: calc(var(--progressbar-vertical-position) + var(--progressbar-vertical-offset));
	width: 100%;
	z-index: 3;
}

.elementor-widget-dtc_product_picker_carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: var(--progressbar-hover-color);
}


/* ─── DTC Product Carousel - Multi-Row ──────────────────────────────────── */

.elementor-widget-dtc_product_carousel_multirow {
	--dtc-mr-cols: 3;
	--dtc-mr-rows: 2;
	--swiper-slides-gap: 20px; /* matches the live solutions carousel; control overrides */
}

/* Positioning context for the arrows, which sit outside the swiper container
   (siblings in the DOM, like the native Loop Carousel) so the container's
   overflow: hidden cannot clip them. */
.elementor-widget-dtc_product_carousel_multirow .dtc-mr-carousel {
	position: relative;
}

/* Desktop: arrows sit 45px outside the cards, in the page gutter, matching the
   native Loop Carousels on the solutions pages. Triple class specificity outruns
   Elementor's arrows-position-inside default; the widget's own style controls
   (post CSS, loads later) can still override. */
@media (min-width: 1025px) {
	.elementor-widget-dtc_product_carousel_multirow .elementor-swiper-button.elementor-swiper-button-prev {
		inset-inline-start: -45px !important;
	}

	.elementor-widget-dtc_product_carousel_multirow .elementor-swiper-button.elementor-swiper-button-next {
		inset-inline-end: -45px !important;
	}
}

/* Tablet and below: the boxed container runs full-bleed, so -45px would push the
   arrows off-screen. Bring them in to 5px from the window edge, matching the
   native carousels there. The widget carries a 20px side gutter at these widths
   (see the side-gutter rule below), which insets the arrows' positioning context,
   so -15px lands them 5px from the window edge. */
@media (max-width: 1024px) {
	.elementor-widget-dtc_product_carousel_multirow .elementor-swiper-button.elementor-swiper-button-prev {
		inset-inline-start: -15px !important; /* 5px - 20px gutter */
	}

	.elementor-widget-dtc_product_carousel_multirow .elementor-swiper-button.elementor-swiper-button-next {
		inset-inline-end: -15px !important;
	}
}

/* Each slide is a columns x rows grid of cards. Explicit template rows (not
   auto-rows) so a partial last chunk keeps card-sized cells instead of one
   card stretching across the slide height. */
.elementor-widget-dtc_product_carousel_multirow .dtc-mr-grid {
	display: grid;
	grid-template-columns: repeat(var(--dtc-mr-cols), minmax(0, 1fr));
	grid-template-rows: repeat(var(--dtc-mr-rows), 1fr);
	gap: var(--swiper-slides-gap);
	height: 100%;
}

.elementor-widget-dtc_product_carousel_multirow .dtc-mr-item {
	min-width: 0;
}

/* Equal-height cards: stretch the rendered loop template (and its root
   container, the glass card) to fill the grid cell. */
.elementor-widget-dtc_product_carousel_multirow .dtc-mr-item > .elementor,
.elementor-widget-dtc_product_carousel_multirow .dtc-mr-item > .e-loop-item {
	height: 100%;
}

.elementor-widget-dtc_product_carousel_multirow .dtc-mr-item > .elementor > .e-con,
.elementor-widget-dtc_product_carousel_multirow .dtc-mr-item > .e-loop-item > .e-con {
	height: 100%;
}

/* ── Responsive: match the native Loop Carousels below ──────────────────────
   The solutions-page Loop Carousels step their column count at the site's
   Elementor breakpoints: 3 columns above Laptop (>1366), 2 down to Mobile
   Landscape (881-1366), 1 at Mobile Landscape and below (<=880). The multi-row
   grid steps at the SAME widths so it reads as a taller sibling of those
   carousels rather than a differently-proportioned block.

   !important is required: Elementor's own responsive `columns` control writes
   --dtc-mr-cols at ITS breakpoints (1024 / 767) as post CSS that loads after
   this stylesheet. These overrides also keep the CSS grid in lock-step with the
   JS chunker, whose breakpoints (881 / 1367) live in
   ProductCarouselMultiRowWidget::render(). Both must agree at every width. */
@media (max-width: 1366px) {
	.elementor-widget-dtc_product_carousel_multirow {
		--dtc-mr-cols: 2 !important; /* Laptop and down: match native's 2-up */
	}
}

@media (max-width: 880px) {
	.elementor-widget-dtc_product_carousel_multirow {
		--dtc-mr-cols: 1 !important; /* Mobile Landscape and down: match native's 1-up */
		--dtc-mr-rows: 1 !important; /* single-column tier shows ONE card per slide */
	}
}

/* ── Stacked card: image on top ─────────────────────────────────────────────
   At <=1200 (Tablet Landscape) loop template 4000 flips its inner grid to a
   single column and moves the image above the copy. Give it a fixed 300px-high
   section with the whole product image contained (not cropped), centred in the
   light panel. */
@media (max-width: 1200px) {
	.elementor-widget-dtc_product_carousel_multirow .dtc-mr-item .elementor-widget-image,
	.elementor-widget-dtc_product_carousel_multirow .dtc-mr-item .elementor-widget-image .elementor-widget-container {
		width: 100% !important;
	}

	.elementor-widget-dtc_product_carousel_multirow .dtc-mr-item .elementor-widget-image img {
		width: 100% !important;
		height: 300px !important;
		object-fit: contain !important;
	}
}

/* ── Side gutter on smaller screens ─────────────────────────────────────────
   Above the page's boxed container the content gutter keeps the cards off the
   window edge, but from the Tablet breakpoint down (<=1024) that container runs
   full-bleed and the outer cards sit flush to the window. The native Loop
   Carousels add a 20px side padding here; match it so the multi-row lines up. */
@media (max-width: 1024px) {
	.elementor-widget-dtc_product_carousel_multirow {
		padding-left: 20px;
		padding-right: 20px;
	}
}