.amless-related-model {
	/* .mbf-single-product-summary is a 2-column CSS grid (gallery | sticky
	   summary); without this, an auto-placed 3rd child gets squeezed into
	   column 1 instead of forming its own full-width row. */
	grid-column: 1 / -1;
	/* .entry-summary is `position: sticky` (theme style.css), which makes it
	   a positioned element — positioned elements paint above static ones in
	   the same stacking context regardless of DOM order, so on scroll it
	   covers this section. Giving this its own stacking context (any
	   position value) plus a higher z-index fixes the paint order. */
	position: relative;
	z-index: 2;
	background: var(--mbf-site-background, #fff);
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--mbf-color-border, rgba(0, 0, 0, 0.1));
}

.amless-related-model__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 20px;
}

.amless-related-model__list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.amless-related-model__card {
	display: flex;
	flex-direction: column;
	width: 80px;
	text-decoration: none;
	color: inherit;
}

.amless-related-model__image img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 6px;
}

.amless-related-model__name {
	font-size: 0.6875rem;
	font-weight: 600;
	margin-bottom: 2px;
	line-height: 1.2;
}

.amless-related-model__price {
	font-size: 0.6875rem;
	color: var(--mbf-color-secondary-text, currentColor);
}

.amless-related-model__price del {
	opacity: 0.6;
	margin-right: 6px;
}

/* ---------- Colour picker above the size choice (2026-11-02) ---------- */
.amless-related-model {
	grid-column: auto;
	margin: 0 0 20px !important;
	padding: 0 !important;
	border: 0 !important;
}

.amless-related-model .amless-related-model__title {
	margin: 0 0 10px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.4;
}

.amless-related-model__title span {
	color: var(--mbf-color-secondary, #79787f);
}

.amless-related-model .amless-related-model__list {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-left: 5px;
	scrollbar-width: none;
	/* Room for the selected ring (4px) — overflow-x:auto clips anything outside the padding box. */
	padding: 5px !important;
	margin: -5px -5px 0 !important;
	grid-template-columns: none !important;
}

.amless-related-model .amless-related-model__list::-webkit-scrollbar {
	display: none;
}

.amless-related-model .amless-related-model__card {
	flex: 0 0 60px !important;
	width: 60px !important;
	scroll-snap-align: start;
	text-decoration: none !important;
}

.amless-related-model .amless-related-model__image,
.amless-related-model .amless-related-model__image img {
	display: block;
	width: 60px !important;
	height: 76px !important;
	object-fit: cover;
	border-radius: 10px;
}

.amless-related-model .amless-related-model__image {
	box-shadow: 0 0 0 1px rgba(32, 32, 37, 0.12);
	overflow: hidden;
}

.amless-related-model .amless-related-model__card.is-current .amless-related-model__image {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #202025;
}

/* Name is shown in the label above; on the swatches only as a tooltip. */
.amless-related-model .amless-related-model__name,
.amless-related-model .amless-related-model__price {
	display: none !important;
}

/* Arrows + edge fade while more colours sit past the edge (product-page-mobile.js). */
.amless-related-model__scroller {
	position: relative;
}

.amless-related-model__scroller.has-more-right .amless-related-model__list {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

.amless-related-model__scroller.has-more-left .amless-related-model__list {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
}

.amless-related-model__scroller.has-more-left.has-more-right .amless-related-model__list {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}

.amless-related-model .amless-related-model__list {
	cursor: grab;
}

.amless-related-model .amless-related-model__list.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.amless-related-model__list.is-dragging a {
	pointer-events: none;
}

.amless-related-model__nav {
	position: absolute;
	z-index: 3;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202025' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 18px !important;
	box-shadow: 0 2px 10px rgba(32, 32, 37, 0.18);
	cursor: pointer;
}

.amless-related-model__nav[hidden] {
	display: none;
}

.amless-related-model__nav--next {
	right: -4px;
}

.amless-related-model__nav--prev {
	left: -4px;
	transform: scaleX(-1);
}

.amless-related-model__nav:focus-visible {
	outline: 2px solid #202025;
	outline-offset: 2px;
}

/* The scrolling row must not widen the summary column (it pushed the button off-screen). */
.amless-related-model,
.single-product .summary.entry-summary,
.mbf-single-product-summary > * {
	min-width: 0;
	max-width: 100%;
}