/**
 * VIC Products (elementor-widgets/products.php).
 *
 * Layout "Stack" uses the VIC Stack Cards stylesheet (stack-cards.css).
 * This file covers:
 *   .vic-products--hover   columns; details reveal on hover / focus (fine
 *                          pointers), sit below the image on touch screens
 *   .vic-products--tabs    product tags + one panel at a time (products.js)
 *   .vic-products--list    every product top to bottom, sides alternating
 *   .vic-products--expand  tinted cards in rows; the hovered card widens
 *
 * Motion: [data-vic-reveal] units (entrance) and --motion-{lift|zoom|none}
 * (hover) — see "Motion" at the end of this file.
 *
 * Shared: .vic-products__benefits (components/benefits) above the link;
 * Style → Card / Image Radius set --vic-products-card-radius and
 * --vic-products-media-radius (empty = each layout's VIC radius).
 * .vic-products__card-bg = Card Colours row with a colour or gradient (--vic-card-bg is
 * set on the card by Elementor through its elementor-repeater-item class).
 */

.vic-products {
	--vic-products-radius: var(--radius-product-card);
	--vic-products-ratio: 4 / 3;
	--vic-products-speed: var(--duration-menu);
}

.vic-products__eyebrow {
	margin: 0;
}

.vic-products__name {
	margin: 0;
	color: var(--color-heading);
	overflow-wrap: anywhere;
}

.vic-products__text {
	margin: 0;
	color: var(--color-body);
}

.vic-products__link {
	align-self: flex-start;
}

/* Logo tile beside the name (Show Product Logo), every layout. */
.vic-products__head {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	min-width: 0;
}

.vic-products__head-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vic-products__tile .vic-products__head {
	align-items: flex-start;
}

.vic-products__logo-tile {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--space-14);  /* 56 */
	height: var(--space-14);
	padding: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background-color: var(--color-background);
}

.vic-products__logo-tile img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Smaller in the Columns layout (caption / overlay). */
.vic-products--hover .vic-products__logo-tile {
	width: var(--space-10);  /* 40 */
	height: var(--space-10);
	padding: var(--space-1);
	border-radius: var(--radius-control);
}

.vic-products--align-center :is(.vic-products__caption, .vic-products__details) .vic-products__head {
	justify-content: center;
}

/* Light text on a dark card (Details Panel, or Card Colours → Light text). */
.vic-products .on-dark .vic-products__name { color: var(--color-on-dark); }
.vic-products .on-dark .vic-products__text { color: var(--color-on-dark-muted); }

/* Media: real screenshot, else logo / name on a soft panel (never a fake UI). */
.vic-products__image,
.vic-products__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: var(--vic-products-ratio);
}

.vic-products__image {
	height: auto;
	object-fit: cover;
	object-position: left top; /* keep the start of a screenshot */
}

/* Image Fit: Contain — the whole image (e.g. a transparent device mockup),
   scaled to the box and centred. */
.vic-products--fit-contain .vic-products__image {
	object-fit: contain;
	object-position: center;
}

.vic-products__placeholder {
	display: grid;
	place-items: center;
	padding: var(--card-pad);
	background: linear-gradient(135deg, color-mix(in srgb, var(--vic-blue) 8%, var(--color-background)) 0%, var(--color-surface-soft) 100%);
	background: var(--vic-products-media-bg, linear-gradient(135deg, color-mix(in srgb, var(--vic-blue) 8%, var(--color-background)) 0%, var(--color-surface-soft) 100%));
	color: var(--color-heading);
	font-size: var(--text-h4-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-h4-line);
	text-align: center;
}

/* Logo image (no screenshot set): up to 88% of the box but never above its
   own size — a large mockup put in "Logo" nearly fills the box, a small logo
   keeps its natural size (no blurry upscaling). */
.vic-products__placeholder:has(.vic-products__logo) {
	padding: var(--space-4);
}

.vic-products__logo {
	width: auto;
	height: auto;
	max-width: 88%;
	max-height: 88%;
	object-fit: contain;
}

.vic-products--ratio-16x10 { --vic-products-ratio: 16 / 10; }
.vic-products--ratio-4x3   { --vic-products-ratio: 4 / 3; }
.vic-products--ratio-1x1   { --vic-products-ratio: 1 / 1; }
.vic-products--ratio-3x4   { --vic-products-ratio: 3 / 4; }

/* ==========================================================================
   Hover — columns
   ========================================================================== */
.vic-products--hover {
	--vic-products-cols: 1;

	display: grid;
	grid-template-columns: repeat(var(--vic-products-cols), minmax(0, 1fr));
	gap: var(--space-10) var(--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.vic-products--hover { --vic-products-cols: 2; }
}

@media (min-width: 1024px) {
	.vic-products--hover { --vic-products-cols: 3; }
}

.vic-products__item {
	min-width: 0;
}

.vic-products__card {
	position: relative; /* the stretched link covers the whole card */
	height: 100%;
}

.vic-products--hover .vic-products__media {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--vic-products-media-radius, var(--vic-products-radius));
	background-color: var(--vic-products-media-bg, var(--color-surface-soft));
}

.vic-products--hover .vic-products__image {
	transition: transform calc(var(--vic-products-speed) * 2) var(--ease-standard);
}

/* Details: base (touch / no hover) = a panel below the image. */
.vic-products__details {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--card-pad);
}

.vic-products--overlay-navy .vic-products__details { background-color: var(--vic-blue-deep); }
.vic-products--overlay-blue .vic-products__details { background-color: var(--vic-blue); }
.vic-products--overlay-white .vic-products__details { background-color: var(--color-background); }

/* Card Colours: the image box takes the product's colour. */
.vic-products--hover .vic-products__card-bg .vic-products__media {
	background: var(--vic-card-bg, var(--color-surface-soft)); /* colour or gradient */
}

.vic-products--hover .vic-products__name {
	font-size: var(--text-h4-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-h4-line);
}

.vic-products--hover .vic-products__text {
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
}

/* The product link makes the whole card clickable (one tab stop). The VIC
   button base rule sets position/overflow on the link, which would trap the
   ::after inside it — undo that here (higher specificity). */
.vic-products a.vic-products__link--stretched.vic-button {
	position: static;
	overflow: visible;
}

.vic-products__link--stretched::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vic-products--hover .vic-products__benefits {
	--vic-benefits-gap: var(--space-2);
	--vic-benefits-line: var(--text-body-sm-line);

	font-size: var(--text-body-sm-size);
}

.vic-products__caption {
	padding-block-start: var(--space-4);
}

/* Columns → Text Alignment: Center (default) centres the name below the
   image and the details panel. */
.vic-products--align-center :is(.vic-products__caption, .vic-products__details) {
	text-align: center;
}

.vic-products--align-center .vic-products__details {
	align-items: center;
}

.vic-products--align-center .vic-products__details .vic-products__link {
	align-self: center;
}

.vic-products--align-center .vic-products__details .vic-benefits {
	align-items: center;
	justify-content: center;
}

.vic-products__caption .vic-products__name {
	font-size: var(--text-h5-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-h5-line);
	transition: color var(--duration-base) var(--ease-standard);
}

.vic-products__card:is(:hover, :focus-within) .vic-products__caption .vic-products__name {
	color: var(--vic-blue);
}

/* Fine pointer: the details cover the image and reveal on hover / focus. */
@media (hover: hover) and (pointer: fine) {
	.vic-products--hover .vic-products__details {
		position: absolute;
		inset: 0;
		justify-content: flex-end;
		opacity: 0;
		transform: translateY(var(--space-2));
		transition:
			opacity var(--vic-products-speed) var(--ease-standard),
			transform var(--vic-products-speed) var(--ease-standard);
	}

	/* Slightly see-through panel where color-mix() is supported. Elsewhere the
	   solid panel colour above stays (a color-mix() with var() would otherwise
	   be dropped at computed time and leave the panel transparent). */
	@supports (background-color: color-mix(in srgb, red 50%, transparent)) {
		.vic-products--overlay-navy .vic-products__details { background-color: color-mix(in srgb, var(--vic-blue-deep) 94%, transparent); }
		.vic-products--overlay-blue .vic-products__details { background-color: color-mix(in srgb, var(--vic-blue) 94%, transparent); }
		.vic-products--overlay-white .vic-products__details { background-color: color-mix(in srgb, var(--color-background) 96%, transparent); }
	}

	.vic-products__card:is(:hover, :focus-within) .vic-products__details {
		opacity: 1;
		transform: none;
	}

	/* Overlay space is limited: industry, name and link never shrink; the
	   description takes what is left and ends with "…" (visual only — screen
	   readers get the full text). Fewer lines on narrower cards. */
	/* The query container is the details overlay, NOT the media box: size
	   containment on an element whose height follows its width (aspect-ratio)
	   makes Elementor's flex container measure the widget far too short, and
	   the cards then spill over the next sections. The overlay is absolutely
	   positioned, so containing it never affects layout. */
	.vic-products--hover .vic-products__details {
		container-type: inline-size;
		overflow: hidden;
	}

	.vic-products--hover .vic-products__details > * {
		flex-shrink: 0;
	}

	/* With benefits: the description keeps 2 whole lines and the benefits
	   take what is left. Column + wrap pushes a benefit that does not fit
	   into a second, clipped column, so only whole benefits show. */
	.vic-products--hover .vic-products__details:has(.vic-products__benefits) .vic-products__text {
		flex-shrink: 0;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.vic-products--hover .vic-products__details .vic-products__benefits {
		flex-flow: column wrap;
		flex-shrink: 1;
		align-content: flex-start;
		min-height: 0;
		overflow: hidden;
	}

	.vic-products--hover .vic-products__details .vic-products__benefits .vic-benefits__item {
		width: 100%;
	}

	@container (max-width: 300px) {
		.vic-products--hover .vic-products__details .vic-products__benefits {
			display: none;
		}
	}

	.vic-products--hover .vic-products__details .vic-products__text {
		display: -webkit-box;
		flex-shrink: 1;
		min-height: 0;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}

	@container (max-width: 380px) {
		.vic-products--hover .vic-products__details .vic-products__text {
			-webkit-line-clamp: 3;
			line-clamp: 3;
		}
	}

	@container (max-width: 300px) {
		.vic-products--hover .vic-products__details .vic-products__text {
			-webkit-line-clamp: 2;
			line-clamp: 2;
		}

		.vic-products--hover .vic-products__name {
			font-size: var(--text-h5-size);
			line-height: var(--text-h5-line);
		}
	}

	@container (max-width: 220px) {
		.vic-products--hover .vic-products__details .vic-products__text {
			display: none;
		}
	}

	/* Short boxes (e.g. a 16:10 image in a narrow column): fewer lines too. */
	.vic-products--hover.vic-products--ratio-16x10 .vic-products__details .vic-products__text {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	/* Image zoom: Animation → Hover (Lift / Zoom); see "Motion" below. */
}

/* ==========================================================================
   Tabs
   ========================================================================== */
.vic-products__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block-end: var(--space-10);
}

.vic-products--tabs-center .vic-products__tablist { justify-content: center; }

.vic-products__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--touch-target);
	margin: 0;
	padding: 0 var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background-color: var(--color-background);
	color: var(--color-heading);
	font-family: inherit;
	font-size: var(--text-button-size);
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	cursor: pointer;
	transition: var(--transition-colors);
}

.vic-products__tab:hover {
	border-color: var(--vic-blue);
	color: var(--vic-blue);
}

/* Selected: fill + weight change (not colour alone). */
.vic-products__tab[aria-selected="true"] {
	border-color: var(--vic-blue);
	background-color: var(--vic-blue);
	color: var(--color-on-dark);
}

/* Segmented control. */
.vic-products--tabs-segmented .vic-products__tablist {
	width: fit-content;
	max-width: 100%;
	padding: var(--space-1);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface-muted);
	gap: var(--space-1);
}

.vic-products--tabs-segmented.vic-products--tabs-center .vic-products__tablist {
	margin-inline: auto;
}

.vic-products--tabs-segmented .vic-products__tab {
	border-color: transparent;
	background-color: transparent;
}

.vic-products--tabs-segmented .vic-products__tab[aria-selected="true"] {
	border-color: var(--color-background);
	background-color: var(--color-background);
	box-shadow: var(--shadow-card);
	color: var(--vic-blue);
}

/* Underline. */
.vic-products--tabs-underline .vic-products__tablist {
	gap: var(--space-6);
	border-block-end: 1px solid var(--color-border);
}

.vic-products--tabs-underline .vic-products__tab {
	margin-block-end: -1px;
	padding-inline: 0;
	border: 0;
	border-block-end: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--color-body);
}

.vic-products--tabs-underline .vic-products__tab[aria-selected="true"] {
	border-block-end-color: var(--vic-blue);
	background: none;
	color: var(--vic-blue);
}

/* Panel */
.vic-products__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
	align-items: center;
	--vic-products-ratio: 16 / 10;
}

.vic-products__panel[hidden] {
	display: none;
}

.vic-products__panel:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus-ring);
	outline-offset: var(--space-1);
}

.vic-products--panel-soft .vic-products__panel,
.vic-products--panel-card .vic-products__panel {
	padding: var(--panel-pad);
	border-radius: var(--vic-products-card-radius, var(--radius-panel));
}

.vic-products--panel-soft .vic-products__panel {
	background-color: var(--color-surface-soft);
}

.vic-products--panel-card .vic-products__panel {
	border: 1px solid var(--color-border);
	background-color: var(--color-background);
}

.vic-products__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.vic-products--tabs .vic-products__name {
	font-size: var(--text-h3-size);
	font-weight: var(--weight-bold);
	line-height: var(--text-h3-line);
	letter-spacing: var(--text-h3-tracking);
}

.vic-products--tabs .vic-products__text {
	max-width: 36rem;
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
}

.vic-products--tabs .vic-products__link {
	margin-block-start: var(--space-2);
}

.vic-products--tabs .vic-products__media {
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--vic-products-media-radius, var(--radius-card));
	background-color: var(--vic-products-media-bg, var(--color-background));
}

/* Card Colours: the panel takes the product's colour (padded even with Panel: None). */
.vic-products .vic-products__panel.vic-products__card-bg {
	padding: var(--panel-pad);
	border-radius: var(--vic-products-card-radius, var(--radius-panel));
	background: var(--vic-card-bg, var(--color-surface-soft)); /* colour or gradient */
}

/* Text / Image Width (Tabs, Listing): --vic-products-split = text first,
   --vic-products-split-rev = image first. Desktop (1024px+). */
.vic-products {
	--vic-products-split: minmax(0, 45fr) minmax(0, 55fr);
	--vic-products-split-rev: minmax(0, 55fr) minmax(0, 45fr);
}

.vic-products--split-50-50 { --vic-products-split: minmax(0, 1fr) minmax(0, 1fr); --vic-products-split-rev: minmax(0, 1fr) minmax(0, 1fr); }
.vic-products--split-40-60 { --vic-products-split: minmax(0, 40fr) minmax(0, 60fr); --vic-products-split-rev: minmax(0, 60fr) minmax(0, 40fr); }
.vic-products--split-55-45 { --vic-products-split: minmax(0, 55fr) minmax(0, 45fr); --vic-products-split-rev: minmax(0, 45fr) minmax(0, 55fr); }
.vic-products--split-60-40 { --vic-products-split: minmax(0, 60fr) minmax(0, 40fr); --vic-products-split-rev: minmax(0, 40fr) minmax(0, 60fr); }

@media (min-width: 1024px) {
	.vic-products__panel {
		grid-template-columns: var(--vic-products-split);
		gap: var(--space-16);
	}

	.vic-products--media-left .vic-products__panel {
		grid-template-columns: var(--vic-products-split-rev);
	}

	.vic-products--media-left .vic-products__media {
		order: -1;
	}
}

/* Panel change: a short fade (no motion when reduced). */
@keyframes vic-products-in {
	from { opacity: 0; transform: translateY(var(--space-2)); }
}

.vic-products__panel:not([hidden]) {
	animation: vic-products-in var(--vic-products-speed) var(--ease-standard);
}

/* Phones (below MD), "On phones: List": no tags — every product panel in
   turn, so nothing hides behind a small tag (products.js drops the tab
   semantics and extra tab stops while the list is shown). */
@media (max-width: 767px) {
	.vic-products--mobile-list .vic-products__tablist {
		display: none;
	}

	.vic-products--mobile-list .vic-products__panel[hidden] {
		display: grid;
	}

	.vic-products--mobile-list .vic-products__panel + .vic-products__panel {
		margin-block-start: var(--space-6);
	}

	/* No panel style: a hairline between products keeps them apart. */
	.vic-products--mobile-list.vic-products--panel-none .vic-products__panel + .vic-products__panel {
		padding-block-start: var(--space-8);
		border-block-start: 1px solid var(--color-border);
	}

	.vic-products--mobile-list .vic-products__panel:not([hidden]) {
		animation: none;
	}
}

/* ==========================================================================
   Listing — top to bottom; text and image swap sides product by product
   (.vic-products__row--media-left|right, set per row in PHP).
   ========================================================================== */
.vic-products--list {
	--vic-products-ratio: 16 / 10;
	--vic-products-list-gap: clamp(var(--space-12), 7vw, var(--space-24));

	display: grid;
	gap: var(--vic-products-list-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vic-products--list.vic-products--ratio-4x3 { --vic-products-ratio: 4 / 3; }
.vic-products--list.vic-products--ratio-1x1 { --vic-products-ratio: 1 / 1; }

.vic-products__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
	align-items: center;
	min-width: 0;
	margin: 0;
}

/* Card: None → a hairline halfway between products (uncoloured rows). */
.vic-products--list.vic-products--panel-none {
	row-gap: calc(var(--vic-products-list-gap) / 2);
}

.vic-products--list.vic-products--panel-none .vic-products__row:not(.vic-products__card-bg) + .vic-products__row:not(.vic-products__card-bg) {
	padding-block-start: calc(var(--vic-products-list-gap) / 2);
	border-block-start: 1px solid var(--color-border);
}

.vic-products--list.vic-products--panel-soft .vic-products__row,
.vic-products--list.vic-products--panel-card .vic-products__row,
.vic-products--list .vic-products__row.vic-products__card-bg {
	padding: var(--panel-pad);
	border-radius: var(--vic-products-card-radius, var(--radius-panel));
}

.vic-products--list.vic-products--panel-soft .vic-products__row { background-color: var(--color-surface-soft); }

.vic-products--list.vic-products--panel-card .vic-products__row {
	border: 1px solid var(--color-border);
	background-color: var(--color-background);
}

.vic-products--list .vic-products__row.vic-products__card-bg {
	background: var(--vic-card-bg, var(--color-surface-soft)); /* colour or gradient */
}

.vic-products--list .vic-products__name {
	font-size: var(--text-h3-size);
	font-weight: var(--weight-bold);
	line-height: var(--text-h3-line);
	letter-spacing: var(--text-h3-tracking);
}

.vic-products--list .vic-products__text {
	max-width: 36rem;
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
}

.vic-products--list .vic-products__link {
	margin-block-start: var(--space-2);
}

.vic-products--list .vic-products__media {
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--vic-products-media-radius, var(--radius-card));
	background-color: var(--vic-products-media-bg, var(--color-background));
}

@media (min-width: 768px) {
	.vic-products__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-10);
	}

	.vic-products__row--media-left .vic-products__media {
		order: -1;
	}
}

@media (min-width: 1024px) {
	.vic-products__row--media-right {
		grid-template-columns: var(--vic-products-split);
		gap: var(--space-16);
	}

	.vic-products__row--media-left {
		grid-template-columns: var(--vic-products-split-rev);
		gap: var(--space-16);
	}
}

/* Benefits sit between the text and the link (Tabs, Listing). */
.vic-products__body > .vic-products__benefits {
	margin-block: var(--space-2);
}

/* ==========================================================================
   Expand — tinted cards in rows (.vic-products__xrow, Cards per Row from
   PHP). From 1024px (LG) each row is a flex row: every card
   flex-grows 1, the hovered / focused one --vic-expand-grow, so it widens
   and its neighbours give way. Smaller screens: a plain grid
   (--vic-expand-cols, the responsive control), rows display: contents.
   ========================================================================== */
.vic-products--expand {
	--vic-expand-cols: 1;
	--vic-expand-grow: 1.6;
	--vic-expand-media-h: 240px;
	--vic-expand-speed: 450ms;

	display: grid;
	grid-template-columns: repeat(var(--vic-expand-cols), minmax(0, 1fr));
	gap: var(--grid-gap);
}

@media (min-width: 768px) {
	.vic-products--expand { --vic-expand-cols: 2; }
}

.vic-products__xrow {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vic-products__xitem {
	display: flex;
	min-width: 0;
	margin: 0;
}

/* Card */
.vic-products__tile {
	--_tile-bg: var(--color-surface-soft);

	position: relative; /* the stretched link covers the card */
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	width: 100%;
	min-width: 0;
	padding: var(--card-pad);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--vic-blue) 8%, transparent);
	border-radius: var(--vic-products-card-radius, var(--radius-panel));
	background: var(--_tile-bg);
	transition:
		box-shadow var(--duration-menu) var(--ease-standard),
		border-color var(--duration-menu) var(--ease-standard);
}

/* Default tints, in turn: VIC Blue, VIC Orange, neutral. */
.vic-products__tile--tone-1 { --_tile-bg: linear-gradient(160deg, color-mix(in srgb, var(--vic-blue) 9%, var(--color-background)) 0%, var(--color-surface-soft) 100%); }
.vic-products__tile--tone-2 { --_tile-bg: linear-gradient(160deg, color-mix(in srgb, var(--vic-orange) 12%, var(--color-background)) 0%, var(--color-background) 100%); }
.vic-products__tile--tone-3 { --_tile-bg: linear-gradient(160deg, var(--color-surface-muted) 0%, var(--color-background) 100%); }

/* Card Colours: the product's own colour. */
.vic-products__tile.vic-products__card-bg {
	--_tile-bg: var(--vic-card-bg, var(--color-surface-soft));
}

.vic-products__tile:is(:hover, :focus-within) {
	border-color: color-mix(in srgb, var(--vic-blue) 18%, transparent);
	box-shadow: var(--shadow-hover);
}

.vic-products__tile-title {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.vic-products__tile-title .vic-products__head-text {
	gap: var(--space-2);
}

.vic-products--expand .vic-products__name {
	font-size: var(--text-h4-size);
	font-weight: var(--weight-bold);
	line-height: var(--text-h4-line);
	letter-spacing: var(--text-h4-tracking);
}

.vic-products--expand .vic-products__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Image: same height in every card; it sits at the bottom and grows with
   its card (Contain keeps the whole screenshot visible). */
.vic-products--expand .vic-products__media {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: var(--vic-expand-media-h);
	margin-block-start: auto;
}

.vic-products--expand :is(.vic-products__image, .vic-products__placeholder) {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

.vic-products--expand.vic-products--fit-cover .vic-products__image {
	border-radius: var(--vic-products-media-radius, var(--radius-card));
}

/* No screenshot: the Logo image (or the name) sits straight on the tinted
   card, fitted inside the image height. */
.vic-products--expand .vic-products__placeholder {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	border-radius: var(--vic-products-media-radius, var(--radius-card));
	background: var(--vic-products-media-bg, transparent);
}

.vic-products--expand .vic-products__placeholder .vic-products__logo {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

.vic-products--expand .vic-products__image {
	background: var(--vic-products-media-bg, transparent);
}

.vic-products--expand .vic-products__tile .vic-products__link {
	margin-block-start: var(--space-1);
}

@media (min-width: 1024px) {
	.vic-products--expand {
		display: flex;
		flex-direction: column;
	}

	/* A short last row keeps the card width of the full rows, centred. */
	.vic-products__xrow {
		display: flex;
		gap: var(--grid-gap);
		width: calc((100% + var(--grid-gap)) * var(--vic-expand-count) / var(--vic-expand-cols-desktop) - var(--grid-gap));
		max-width: 100%;
		margin-inline: auto;
	}

	.vic-products__xitem {
		flex: 1 1 0;
		transition: flex-grow var(--vic-expand-speed) var(--ease-standard);
	}

	.vic-products__xitem:focus-within {
		flex-grow: var(--vic-expand-grow);
	}
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	.vic-products__xitem:hover {
		flex-grow: var(--vic-expand-grow);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vic-products__xitem {
		transition: none;
	}
}

/* ==========================================================================
   Image Border / Image Shadow (classes on the Elementor widget wrapper via
   prefix_class, so Stack's markup is covered too).
   ========================================================================== */
.vic-products-border-none .vic-products .vic-products__media {
	border: 0;
}

/* Around the image box. Expand / Stack have no box of their own: the box
   gets the card radius there. */
.vic-products-shadow-box .vic-products .vic-products__media {
	box-shadow: var(--shadow-hover);
}

.vic-products-shadow-box .vic-products--expand .vic-products__media {
	overflow: hidden;
	border-radius: var(--vic-products-media-radius, var(--radius-card));
}

.vic-products-shadow-box .vic-stack__image {
	border-radius: var(--vic-products-media-radius, var(--radius-card));
	box-shadow: var(--shadow-hover);
}

/* Following the image's own shape (alpha), e.g. a transparent device mockup. */
.vic-products-shadow-drop :is(.vic-products__image, .vic-products__logo, .vic-stack__image) {
	filter: drop-shadow(0 12px 20px rgba(0, 30, 64, 0.16)) drop-shadow(0 2px 4px rgba(0, 30, 64, 0.08));
}

/* No JS: no tags, every product panel shown in turn. */
html.no-js .vic-products__tablist {
	display: none;
}

html.no-js .vic-products__panel[hidden] {
	display: grid;
}

html.no-js .vic-products__panel + .vic-products__panel {
	margin-block-start: var(--space-8);
}

@media (prefers-reduced-motion: reduce) {
	.vic-products__panel:not([hidden]),
	.vic-products--hover .vic-products__details,
	.vic-products--hover .vic-products__image {
		animation: none;
		transition: none;
	}

	.vic-products__card:hover .vic-products__image {
		transform: none;
	}
}

/* ==========================================================================
   Motion
   Entrance — each card / row ([data-vic-reveal], one per unit; Tabs: the
   whole widget) plays once when it scrolls in (reveal.js → .is-inview).
   The unit fades in, then its text lines rise one after another (--_k, by
   position) and the image follows: rising (fade-up), unveiled from the
   bottom (reveal), or the whole card scales in (scale). Units entering
   together are staggered by --vic-reveal-index (--stagger).
   Hover — --motion-lift: the image box / card lifts with a soft shadow and
   the image zooms a little; --motion-zoom: image zoom only.
   Editor (static) and reduced motion: final state, nothing moves.
   ========================================================================== */
.vic-products {
	--_dur: 650ms;
	--_step: 70ms;     /* between text lines */
	--_card: 140ms;    /* between cards entering together */
	--_ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.vic-products--speed-fast { --_dur: 450ms; --_step: 50ms; --_card: 100ms; }
.vic-products--speed-slow { --_dur: 900ms; --_step: 100ms; --_card: 200ms; }

.vic-products [data-vic-reveal],
.vic-products[data-vic-reveal] {
	--_i: 0;
	--_base: calc(var(--_i) * var(--_card));
}

.vic-products--stagger [data-vic-reveal] {
	--_i: var(--vic-reveal-index, 0);
}

@keyframes vic-p-fade  { from { opacity: 0; } }
@keyframes vic-p-up    { from { opacity: 0; transform: translateY(var(--space-5)); } }
@keyframes vic-p-media { from { opacity: 0; transform: translateY(var(--space-8)) scale(0.96); } }
@keyframes vic-p-wipe  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vic-p-scale { from { opacity: 0; transform: translateY(var(--space-4)) scale(0.94); } }
@keyframes vic-p-slide { from { opacity: 0; transform: translateX(var(--space-8)); } }
@keyframes vic-p-failsafe { to { opacity: 1; } }

/* Hidden until revealed (JS only, never in the editor); failsafe after 2.5s. */
html.js body:not(.elementor-editor-active) :is(.vic-products [data-vic-reveal], .vic-products[data-vic-reveal]):not(.is-inview) {
	opacity: 0;
}

html.js body:not(.elementor-editor-active) :is(.vic-products [data-vic-reveal], .vic-products[data-vic-reveal]):not(.is-armed):not(.is-inview) {
	animation: vic-p-failsafe 1ms 2.5s forwards;
}

/* The unit itself (card background, borders) fades in first. */
:is(.vic-products [data-vic-reveal], .vic-products[data-vic-reveal]).is-inview {
	animation: vic-p-fade calc(var(--_dur) * 0.6) var(--_ease) var(--_base) backwards;
}

/* Text lines, in order (--_k = position). */
.is-inview:is([data-vic-reveal="fade-up"], [data-vic-reveal="reveal"]) :is(.vic-products__body, .vic-products__tile, .vic-products__caption, .vic-products__tablist) > :not(.vic-products__media) {
	animation: vic-p-up var(--_dur) var(--_ease) calc(var(--_base) + var(--_k, 1) * var(--_step)) backwards;
}

:is(.vic-products__body, .vic-products__tile, .vic-products__tablist) > :nth-child(1) { --_k: 1; }
:is(.vic-products__body, .vic-products__tile, .vic-products__tablist) > :nth-child(2) { --_k: 2; }
:is(.vic-products__body, .vic-products__tile, .vic-products__tablist) > :nth-child(3) { --_k: 3; }
:is(.vic-products__body, .vic-products__tile, .vic-products__tablist) > :nth-child(4) { --_k: 4; }
:is(.vic-products__body, .vic-products__tile, .vic-products__tablist) > :nth-child(5) { --_k: 5; }
:is(.vic-products__body, .vic-products__tile, .vic-products__tablist) > :nth-child(n + 6) { --_k: 6; }
.vic-products__caption > * { --_k: 4; }

/* Image: rises… */
.is-inview[data-vic-reveal="fade-up"] .vic-products__media {
	animation: vic-p-media calc(var(--_dur) * 1.2) var(--_ease) calc(var(--_base) + 2 * var(--_step)) backwards;
}

/* …or unveils from the bottom. */
.is-inview[data-vic-reveal="reveal"] .vic-products__media {
	animation:
		vic-p-wipe calc(var(--_dur) * 1.4) var(--_ease) calc(var(--_base) + 2 * var(--_step)) backwards,
		vic-p-fade var(--_dur) var(--_ease) calc(var(--_base) + 2 * var(--_step)) backwards;
}

/* Scale: the whole card at once. */
:is(.vic-products [data-vic-reveal], .vic-products[data-vic-reveal]).is-inview[data-vic-reveal="scale"] {
	animation: vic-p-scale var(--_dur) var(--_ease) var(--_base) backwards;
}

/* Tabs: a newly picked panel replays its text and slides its image in
   (only once the widget itself has been revealed, or without an entrance). */
.vic-products--tabs:is(.is-inview, :not([data-vic-reveal])):not(.vic-products--motion-none) .vic-products__panel:not([hidden]) .vic-products__body > * {
	animation: vic-p-up var(--_dur) var(--_ease) calc(var(--_k, 1) * var(--_step)) backwards;
}

.vic-products--tabs:is(.is-inview, :not([data-vic-reveal])):not(.vic-products--motion-none) .vic-products__panel:not([hidden]) .vic-products__media {
	animation: vic-p-slide calc(var(--_dur) * 1.2) var(--_ease) calc(2 * var(--_step)) backwards;
}

.vic-products--tabs.vic-products--media-left:is(.is-inview, :not([data-vic-reveal])) .vic-products__panel:not([hidden]) .vic-products__media {
	animation-name: vic-p-fade;
}

/* Hover — fine pointers only. */
@media (hover: hover) and (pointer: fine) {
	.vic-products :is(.vic-products__media, .vic-products__tile) {
		transition:
			transform var(--duration-menu) var(--ease-standard),
			box-shadow var(--duration-menu) var(--ease-standard),
			border-color var(--duration-menu) var(--ease-standard);
	}

	.vic-products :is(.vic-products__image, .vic-products__logo) {
		transition: transform calc(var(--_dur) * 1.2) var(--_ease);
	}

	/* Lift: the image box (Columns, Tabs, Listing) or the card (Expand). */
	.vic-products--motion-lift :is(.vic-products__card, .vic-products__row, .vic-products__panel):hover .vic-products__media,
	.vic-products--motion-lift .vic-products__xitem:hover .vic-products__tile {
		transform: translateY(calc(var(--space-1) * -1));
		box-shadow: var(--shadow-hover);
	}

	/* Zoom (Lift includes it). */
	:is(.vic-products--motion-lift, .vic-products--motion-zoom) :is(.vic-products__card, .vic-products__row, .vic-products__panel, .vic-products__tile):hover :is(.vic-products__image, .vic-products__logo) {
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vic-products [data-vic-reveal],
	.vic-products[data-vic-reveal] {
		opacity: 1 !important;
		animation: none !important;
	}

	/* Animations only (the Columns details panel keeps its own hover opacity). */
	.vic-products [data-vic-reveal] *,
	.vic-products[data-vic-reveal] *,
	.vic-products--tabs .vic-products__panel * {
		animation: none !important;
	}

	.vic-products :is(.vic-products__media, .vic-products__tile, .vic-products__image, .vic-products__logo) {
		transform: none !important;
		transition: none !important;
	}
}