/* Previous/Next Lot floating arrows — see class-gba-lot-navigation.php.
   Fixed to the left/right edges of the viewport, vertically centered, so
   they stay reachable while scrolling a long item page without competing
   with the photo/details columns for layout space. */

.gba-lot-nav {
	position: fixed;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	z-index: 100;
	pointer-events: none;
}

.gba-lot-nav__arrow {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	text-decoration: none;
	pointer-events: auto;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gba-lot-nav__arrow:hover,
.gba-lot-nav__arrow:focus-visible {
	background: rgba(20, 20, 20, 0.85);
	border-color: #e0263a;
	color: #e0263a;
}

.gba-lot-nav__arrow span {
	font-size: 28px;
	line-height: 1;
	margin-top: -2px;
}

.gba-lot-nav__arrow--prev {
	left: 12px;
}

.gba-lot-nav__arrow--next {
	right: 12px;
}

/* Below the two-column desktop/tablet layout breakpoint the arrows would
   otherwise sit on top of the (now full-width, stacked) photo and text —
   shrink them and pull them further to the very edge so they read as a
   corner affordance rather than something blocking content. */
@media (max-width: 767px) {
	.gba-lot-nav__arrow {
		width: 36px;
		height: 36px;
		top: auto;
		bottom: 16px;
		transform: none;
	}

	.gba-lot-nav__arrow--prev {
		left: 8px;
	}

	.gba-lot-nav__arrow--next {
		right: 8px;
	}

	.gba-lot-nav__arrow span {
		font-size: 22px;
	}
}