/**
 * Related Products Carousel.
 *
 * A CONTAINED track: unlike the Feature Carousel it stays inside the content
 * column and shows a whole number of equal-width cards, because it sits in the
 * body of a product page rather than running off the edge of a landing page.
 * Swiper sets each slide's width from slidesPerView, so there is no fixed card
 * width here.
 *
 * Arrow appearance comes from carousel-arrows.css; only placement is local.
 */

.ashers-products-carousel {
	--ashers-products-carousel-arrow-offset: 8px;
	--ashers-products-carousel-media-height: 260px;

	position: relative;
}

.ashers-products-carousel__track-wrap {
	position: relative;
	min-width: 0;
}

/*
 * Swiper needs the track to clip, but a card's focus ring and its hover shadow
 * both sit outside the card box. Padding on the track gives them room to show
 * without being cut, and the negative margin takes that padding back off the
 * layout so the card still lines up with the column edge.
 *
 * Vertical only, on purpose. Doing the same horizontally makes the track 12px
 * wider than its column, and on a narrow screen that is 12px of horizontal
 * page scroll. The side shadows lose a few pixels instead, which the gap
 * between cards hides.
 */
.ashers-products-carousel__swiper {
	padding: 6px 0;
	margin: -6px 0;
}

.ashers-products-carousel__slide {
	height: auto;
	display: flex;
}

/* A slide is a flex row so the card fills it. */
.ashers-products-carousel__slide .ashers-card {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Product names run to different lengths, so without this the price sits at a
 * different height on every card and the row reads as ragged. Letting the body
 * grow and pushing the price to the end of it puts every price on the same
 * line, which is what the widget this replaced achieved with a height:100%
 * override. Scoped to this carousel: the grid and the feature carousel size
 * their cards differently and are left alone.
 */
.ashers-products-carousel__slide .ashers-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ashers-products-carousel__slide .ashers-card__price {
	margin-top: auto;
}

/* ----------------------------------------------------------------- arrow */

/*
 * Centred on the product image rather than the whole card, so the arrow does
 * not drift when a title wraps to a second line. The offset control decides
 * how far in from the track edge it parks; a negative value puts it outside,
 * which only works where the column has room for it.
 */
.ashers-products-carousel .ashers-carousel__arrow {
	top: calc(var(--ashers-products-carousel-media-height, 260px) / 2);
}

.ashers-products-carousel .ashers-carousel__arrow--prev {
	left: var(--ashers-products-carousel-arrow-offset, 8px);
}

.ashers-products-carousel .ashers-carousel__arrow--next {
	right: var(--ashers-products-carousel-arrow-offset, 8px);
}

/* --------------------------------------------------------------- status */

/*
 * The add-to-cart live region. Visually hidden but never display:none, which
 * would stop a screen reader announcing it.
 */
.ashers-products-carousel__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ashers-products-carousel__empty {
	margin: 0;
}

/*
 * Keyboard focus must never land on a card the track has scrolled out of
 * sight. The script slides such a card into view, and this keeps the movement
 * from being the only thing that signals it.
 */
.ashers-products-carousel__slide:focus-within {
	outline: none;
}

@media (max-width: 767px) {
	.ashers-products-carousel {
		--ashers-products-carousel-media-height: 200px;
	}
}