/* LCLS New Arrivals carousel — design ref: Figma "Abby-LCLS-DESIGN-SYSTEM" node 3413:148 */

.lcls-na {
	/* Overridable tokens (Figma values as defaults; chevron color = site --primary) */
	--na-band: #0e70b8;
	--na-radius: 15px;
	--na-card-bg: #fff;
	--na-chevron: var(--primary, #124473);
	--na-cover-h: clamp(10rem, 20vw, 15.6875rem); /* 251px max, per design */

	/* Explicit block layout — Bricks/ACSS give <section> elements flex + centering */
	display: block;
	width: 100%;
	background: var(--na-card-bg);
	border-radius: var(--na-radius);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.lcls-na__band {
	background: var(--na-band);
	padding: clamp(1.25rem, 3vw, 1.875rem) 1rem;
}

.lcls-na__title {
	margin: 0;
	font-family: "Big Shoulders", "Big Shoulders Display", var(--heading-font-family, sans-serif);
	font-weight: 700;
	font-size: clamp(2.25rem, 4.5vw, 3.75rem); /* 60px max, per design */
	line-height: 0.96;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
}

.lcls-na__body {
	/* Explicit block — theme forces flex on plain divs, which lets the track grow past the card */
	display: block;
	position: relative;
	padding: clamp(1.5rem, 3.5vw, 2.625rem) clamp(3.25rem, 6.5vw, 5.75rem) clamp(1.75rem, 3.5vw, 2.5rem);
}

.lcls-na__track {
	display: flex;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	gap: clamp(1rem, 2.6vw, 2.3125rem);
	margin: 0;
	padding: 0.5rem 0.25rem 1rem; /* room so cover shadows aren't clipped */
	list-style: none;
	overflow-x: auto;
	overflow-anchor: none; /* image loads must not yank the scroll position back */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.lcls-na__track::-webkit-scrollbar {
	display: none;
}

.lcls-na__item {
	flex: 0 0 auto;
	margin: 0;
}

.lcls-na__item a {
	display: block;
	line-height: 0;
	border-radius: 3px;
}

.lcls-na .lcls-na__item img {
	/* !important guards against theme-level img sizing (Bricks/ACSS force widths) */
	display: block;
	height: var(--na-cover-h) !important;
	width: auto !important;
	max-width: none !important;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 2px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* per design */
	transition: transform 0.18s ease;
}

.lcls-na__item a:hover img,
.lcls-na__item a:focus-visible img {
	transform: translateY(-4px);
}

.lcls-na__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: clamp(0.6rem, 1.8vw, 1.75rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--na-chevron);
}

.lcls-na__nav--next {
	left: auto;
	right: clamp(0.6rem, 1.8vw, 1.75rem);
}

.lcls-na__nav--next svg {
	transform: rotate(180deg);
}

.lcls-na__nav svg {
	width: 0.85em;
	height: auto;
	font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.lcls-na__nav:hover,
.lcls-na__nav:focus-visible {
	color: var(--primary-hover, #154e84);
}

.lcls-na__nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

.lcls-na__nav.is-hidden {
	display: none;
}

.lcls-na__all {
	margin: 0;
	padding: 0 clamp(3.25rem, 6.5vw, 5.75rem) 1.5rem;
	text-align: right;
	font-size: 0.9375rem;
}

/* No-JS fallback: native horizontal scrolling still works; hide the buttons. */
.no-js .lcls-na__nav {
	display: none;
}

/* Mobile: one cover per page, snap-aligned (snap points match the JS paging offsets) */
@media (max-width: 640px) {
	.lcls-na__track {
		scroll-snap-type: x mandatory;
		scroll-padding-left: 0.25rem; /* = track padding-left, keeps snap in step with offsets() */
	}

	.lcls-na__item {
		flex: 0 0 100%;
		display: flex;
		justify-content: center;
		scroll-snap-align: start;
	}

	.lcls-na .lcls-na__item img {
		height: clamp(13rem, 58vw, 16rem) !important;
		max-width: 100% !important;
	}
}