/*
 * Wida Commerce: structural layout only.
 *
 * Deliberately carries no colour, type, or spacing values. Those belong to
 * the Elementor global kit, which is the single source of truth for the
 * design system. Everything here exists because the markup this plugin
 * outputs cannot lay itself out without it.
 */

/* Stacked full-bleed gallery. Product photography is 1280x1920, so 2:3. */
.wida-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 8px;
}

.wida-gallery .shot {
	position: relative;
	overflow: hidden;
}

/*
 * The aspect ratio is on the IMAGE, and the image stays in normal flow.
 *
 * This was the classic ratio box until 2026-09-06: `aspect-ratio` on `.shot`
 * with the image `position: absolute; inset: 0`. It renders correctly in
 * isolation and every box measures right — `.shot` 728px, `.wida-gallery`
 * 4385px — but the grid's block ancestor resolved to **20px**, the height of
 * a bare line box, and never corrected. The summary, the size table, the
 * enquiry button and the related products were all laid out as though the
 * gallery were 20px tall and painted on top of the photographs. Measured on
 * the live build: replacing the ratio with an explicit height took the page
 * from 4549px to 6802px and the overlap disappeared.
 *
 * An absolutely-positioned child contributes nothing to its parent's
 * intrinsic height, so the whole chain depended on `aspect-ratio` propagating
 * up through a grid item, and it did not. An in-flow image with a ratio needs
 * no such propagation: the image sizes itself from its own width and the
 * ancestors add it up the ordinary way.
 *
 * Standing rule: never let a container's height depend only on the resolved
 * ratio of a box whose contents are out of flow. And check the ancestor's
 * height, not the element's: every box in the failing version measured
 * correctly, which is why this survived a verification pass.
 */
.wida-gallery .shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: top center;
}

@media (max-width: 700px) {
	.wida-gallery {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/*
 * Split name. Only the block behaviour that keeps brand and type on their
 * own lines. Size, weight, colour and letterspacing come from the kit.
 */
.wida-brand,
.wida-code,
.wida-type {
	display: block;
}

/* The piece code is a Western-numeral LTR island inside Arabic. The <bdi>
   carries the isolation; this only keeps it from wrapping. */
.wida-code bdi {
	white-space: nowrap;
}

.wida-title-block .wida-type {
	margin: 0;
}

/* ==========================================================================
   Term strips: the collection and brand carousels.

   Mechanism only. Colour, type and the card's proportions come from the kit.

   No JavaScript. Elementor's carousel would bring Swiper, and this build has
   just removed 50 KB of widget JavaScript from a shell measured at 546 KB
   against a 330 KB budget. A keyframe over a duplicated track does the same
   job for nothing.
   ========================================================================== */

.wida-strip {
	--wida-strip-card: 260px;
	--wida-strip-gap: 8px;
	--wida-strip-duration: 40s;
}

.wida-strip__viewport {
	overflow: hidden;
}

.wida-strip__track {
	display: flex;
	inline-size: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The spacing is padding on the item, never `gap` on the track.
 *
 * With a flex gap the two halves of a duplicated track are not equal: the
 * space between the last card of the first set and the first card of the
 * second belongs to neither set, so a 50% translate drifts by half a gap on
 * every loop and the strip walks out of alignment. As padding, every card
 * occupies exactly the same outer width and half the track is exactly one set.
 */
.wida-strip__item {
	flex: 0 0 var(--wida-strip-card);
	inline-size: var(--wida-strip-card);
	margin: 0;
	padding-inline-end: var(--wida-strip-gap);
}

.wida-strip.is-moving .wida-strip__track {
	animation: wida-strip-scroll var(--wida-strip-duration) linear infinite;
}

/*
 * The sign is positive because the document is RTL.
 *
 * In an RTL flex row the first card sits at the RIGHT and later cards run
 * leftwards, so the cards still to be seen are off the left edge and the
 * track has to travel right to bring them in. A negative translate, which is
 * what a left-to-right marquee uses, would push the unseen cards further
 * away. The LTR case is written out below rather than left to be discovered.
 */
@keyframes wida-strip-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}

html[dir="ltr"] .wida-strip.is-moving .wida-strip__track {
	animation-name: wida-strip-scroll-ltr;
}

@keyframes wida-strip-scroll-ltr {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Anyone reaching for a card can stop it, by pointer or by keyboard. A strip
   that keeps moving while you are trying to click it is a strip you cannot
   use. */
.wida-strip.is-moving:hover .wida-strip__track,
.wida-strip.is-moving:focus-within .wida-strip__track {
	animation-play-state: paused;
}

/*
 * Reduced motion is not "slower", it is off. The strip becomes an ordinary
 * horizontal scroller with snap points, which is the same content reachable
 * by the same gestures, and the duplicate set is removed from view so nothing
 * is listed twice.
 */
@media (prefers-reduced-motion: reduce) {
	.wida-strip.is-moving .wida-strip__track {
		animation: none;
	}

	.wida-strip__viewport {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.wida-strip__item {
		scroll-snap-align: start;
	}

	.wida-strip__item[aria-hidden="true"] {
		display: none;
	}
}

.wida-strip__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.wida-strip__media {
	display: block;
	overflow: hidden;
}

.wida-strip__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: top center;
}

/* A brand with no logo yet still gets a card carrying its name, so uploading
   the logo later is an improvement rather than the thing that makes the strip
   work at all. */
.wida-strip__media.is-empty {
	display: none;
}