/**
 * Related products carousel (CollabX 446, "Next steps" item 3).
 *
 * Only applies once slick has initialised (.slick-initialized), so a related section with
 * 3 or fewer products keeps Betheme's untouched grid CSS — nothing here can affect it.
 *
 * Betheme's be.css already carries slick's structural rules (track, slide, cloned slides).
 * What's needed on top is undoing the theme's own grid/float sizing on li.product, because
 * slick sets slide widths inline and the theme's percentage widths fight it.
 */

.dws-related-carousel ul.products.slick-initialized {
	/* Betheme lays the grid out with flex/negative margins; the slick track manages its own. */
	display: block;
	margin-left: 0;
	margin-right: 0;
}

.dws-related-carousel ul.products.slick-initialized .slick-track {
	display: flex;
	align-items: stretch;
}

.dws-related-carousel ul.products.slick-initialized li.product {
	/* Kill the theme's column width/float — slick sets width inline on each slide. */
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 12px !important;
	float: none !important;
	clear: none !important;
	height: auto;
	display: block;
}

/* Equal-height cards.
   slick wraps each item as: div.slick-slide > div > li.product — and the card border is on
   the li, not the slide. The flex track equalises .slick-slide, but that height has to be
   handed down through slick's own unclassed wrapper div or the shorter card keeps its own
   height and its border stops short of the others (measured: 404px vs 445px). */
.dws-related-carousel ul.products.slick-initialized .slick-slide {
	height: auto;
}

.dws-related-carousel ul.products.slick-initialized .slick-slide > div {
	height: 100%;
}

.dws-related-carousel ul.products.slick-initialized li.product {
	height: 100%;
}

/* Arrows. Betheme positions .slick-prev/.slick-next for its own sliders, so these are
   scoped to this carousel only and sit clear of the cards rather than over them. */
.dws-related-carousel {
	position: relative;
}

/* slick's stylesheet gives .slick-prev/.slick-next a ::before glyph of its own ("←"/"→" in
   its bundled `slick` icon font). Left alone it renders *on top of* the ‹ › characters in our
   button markup, so each arrow shows two symbols. Suppress slick's and keep ours, which
   matches the rest of the child theme's chrome. */
.dws-related-carousel .dws-related-arrow::before {
	content: none;
	display: none;
}

.dws-related-carousel .dws-related-arrow {
	position: absolute;
	top: -46px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 3px;
	background: #fff;
	color: #333;
	font-size: 22px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	z-index: 2;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.dws-related-carousel .dws-related-arrow:hover,
.dws-related-carousel .dws-related-arrow:focus-visible {
	background: rgba( 0, 0, 0, 0.04 );
	border-color: rgba( 0, 0, 0, 0.35 );
}

.dws-related-carousel .slick-prev.dws-related-arrow {
	right: 44px;
	left: auto;
}

.dws-related-carousel .slick-next.dws-related-arrow {
	right: 0;
	left: auto;
}

/* slick adds .slick-disabled when infinite is off and you hit an end. */
.dws-related-carousel .dws-related-arrow.slick-disabled {
	opacity: 0.35;
	cursor: default;
}

@media only screen and ( max-width: 767px ) {
	/* On mobile the section heading and arrows would collide; drop the arrows below it. */
	.dws-related-carousel .dws-related-arrow {
		top: -40px;
		width: 30px;
		height: 30px;
		font-size: 19px;
		line-height: 27px;
	}

	.dws-related-carousel .slick-prev.dws-related-arrow {
		right: 38px;
	}
}