/*
 * Desktop side toolbar (after taobao.com / jd.com): a floating vertical card at the
 * screen edge with icon + label tiles and a back-to-top button. Loaded with a media attribute.
 */
.abmbn {
	top: 50%;
	right: 16px;
	bottom: auto;
	left: auto;
	padding: 6px 0;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 6px 28px rgba(33, 37, 41, 0.12), 0 0 0 1px var(--abmbn-border);
	transform: translateY(-50%);
	transition: none;
}

.abmbn.abmbn-side-left {
	right: auto;
	left: 16px;
}

.abmbn.abmbn-side-bottom {
	top: auto;
	bottom: 24px;
	transform: none;
}

/* The side toolbar never hides on scroll. */
.abmbn.is-hidden {
	transform: translateY(-50%);
}

.abmbn.abmbn-side-bottom.is-hidden {
	transform: none;
}

.abmbn-list {
	flex-direction: column;
	gap: 2px;
	/* Width follows the longest label (labels never wrap), within 64–108px. */
	width: auto;
	min-width: 64px;
	max-width: none;
	height: auto;
	padding: 0 6px;
	box-sizing: border-box;
}

.abmbn-item {
	flex: none;
}

.abmbn-no-desktop {
	display: none;
}

.abmbn-link {
	gap: 4px;
	height: auto;
	min-height: 60px;
	padding: 9px 2px 8px;
	border-radius: 10px;
	font-size: 11.5px;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.abmbn-label {
	/* One line, never broken inside a word; overlong labels end in "…" (full text in the title tooltip). */
	max-width: 96px;
	white-space: nowrap;
	text-align: center;
}

/* Featured item becomes a brand-coloured tile instead of a raised circle. */
.abmbn-featured > .abmbn-link {
	background: var(--abmbn-active-bg);
}

.abmbn-featured .abmbn-icon-wrap {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.abmbn-featured .abmbn-icon {
	width: 24px;
	height: 24px;
}

/* Back-to-top: separated at the bottom, shown once the page is scrolled (frontend.js). */
.abmbn-top-item {
	display: block;
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid var(--abmbn-border);
}

.abmbn:not(.is-scrolled) .abmbn-top-item {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.abmbn-item:not(.abmbn-featured) .abmbn-link:hover {
		background: rgba(33, 37, 41, 0.05);
	}

	.abmbn-featured .abmbn-link:hover {
		filter: brightness(0.96);
	}
}

/*
 * Narrower screens (after jd.com): when the page margin is too small for the labelled toolbar
 * (Blocksy content is 1290px wide, so below ~1500px), fold to a 44px icon rail so it never covers
 * content such as the Add to cart button. Labels become tooltips on hover/keyboard focus and stay
 * in the accessible name.
 */
@media (max-width: 1499px) {
	.abmbn {
		right: 6px;
	}

	.abmbn.abmbn-side-left {
		right: auto;
		left: 6px;
	}

	.abmbn-list {
		width: 44px;
		min-width: 0;
		padding: 0 4px;
	}

	.abmbn-link {
		position: relative;
		min-height: 44px;
		padding: 10px 0;
	}

	.abmbn .abmbn-label {
		position: absolute;
		top: 50%;
		right: calc(100% + 12px);
		max-width: none;
		padding: 5px 10px;
		overflow: visible;
		border-radius: 6px;
		background: #212529;
		box-shadow: 0 4px 14px rgba(33, 37, 41, 0.2);
		color: #fff;
		font-size: 12px;
		font-weight: 500;
		line-height: 1.3;
		opacity: 0;
		pointer-events: none;
		transform: translate(4px, -50%);
		transition: opacity 0.15s ease, transform 0.15s ease;
	}

	.abmbn-side-left .abmbn-label {
		right: auto;
		left: calc(100% + 12px);
		transform: translate(-4px, -50%);
	}

	.abmbn-link:hover .abmbn-label,
	.abmbn-link:focus-visible .abmbn-label {
		opacity: 1;
		transform: translate(0, -50%);
	}

	.abmbn-no-labels .abmbn-label {
		width: auto;
		height: auto;
		clip: auto;
	}
}