/* Route-owned Featured Brands rules consolidated from the former global assets. */

.hashtag-featured-brands__nav{
	font-size: 0 !important;
	line-height: 0 !important;
	overflow: hidden;
	position: absolute;
}

.hashtag-featured-brands__nav::after{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
}

.hashtag-featured-brands__nav--prev::after{
	transform: translate(-35%, -50%) rotate(225deg);
}

.hashtag-featured-brands__nav--next::after{
	transform: translate(-65%, -50%) rotate(45deg);
}

#page-container .hashtag-featured-brands__nav.hv-gradient-hover-slice:hover,
#page-container .hashtag-featured-brands__nav.hv-gradient-hover-slice:focus-visible{
	background-size: var(--hv-card-gradient-size, 100vw 100%) !important;
	background-position: var(--hv-card-gradient-x, 0px) 50% !important;
}
.hashtag-featured-brands-shell {
	--hashtag-brand-columns: 6;
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.hashtag-featured-brands {
	display: flex;
	gap: 14px;
	align-items: stretch;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 4px 2px 10px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.hashtag-featured-brands::-webkit-scrollbar {
	display: none;
}

.hashtag-featured-brands--grid {
	display: grid;
	grid-template-columns: repeat(var(--hashtag-brand-columns), minmax(0, 1fr));
	overflow: visible;
	padding: 0;
	scroll-snap-type: none;
}

.hashtag-featured-brands__item {
	display: flex;
	flex: 0 0 clamp(144px, 16vw, 190px);
	align-items: center;
	justify-content: center;
	min-height: 86px;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 7px;
	background: #ffffff;

	text-decoration: none;
	scroll-snap-align: start;
	transition: transform 160ms ease;
}

/* Home owns a single solid-white viewport while the duplicated loop buffer stays hidden. */
.hv-home .hashtag-featured-brands-shell--slider {
	overflow: hidden;
	border-radius: 7px;
	background: #ffffff;
}

.hv-home .hashtag-featured-brands--slider {
	background: #ffffff;
}

.hashtag-featured-brands--grid .hashtag-featured-brands__item {
	flex-basis: auto;
}

.hashtag-featured-brands__item:hover,
.hashtag-featured-brands__item:focus {
	transform: translateY(-2px);

}

.hashtag-featured-brands__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 54px;
}

.hashtag-featured-brands__image {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 54px;
	object-fit: contain;
}

.hashtag-featured-brands__fallback {
	color: #151515;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

.hashtag-featured-brands__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 42px;
	height: 42px;
	margin-top: -24px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(7, 11, 18, 0.78);
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 38px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 12px 26px rgba(7, 11, 18, 0.26);
	transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.hashtag-featured-brands__nav:hover,
.hashtag-featured-brands__nav:focus-visible {
	border-color: transparent;
	background-color: transparent;
	background-image: linear-gradient(90deg, #1060b0 0%, #803090 16%, #b02090 29%, #f01080 42%, #f03030 55%, #f4a51c 68%, #c0d040 82%, #60b050 100%);
	color: #ffffff;
	transform: translateY(-1px);
}

.hashtag-featured-brands__nav--prev {
	left: -14px;
}

.hashtag-featured-brands__nav--next {
	right: -14px;
}

.hashtag-featured-brands__nav[disabled] {
	opacity: 0.32;
	pointer-events: none;
}

@media (max-width: 980px) {
	.hashtag-featured-brands--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hashtag-featured-brands__nav--prev {
		left: -6px;
	}

	.hashtag-featured-brands__nav--next {
		right: -6px;
	}
}

@media (max-width: 640px) {
	.hashtag-featured-brands {
		gap: 10px;
		box-sizing: border-box;
		padding: 4px var(--hv-site-gutter-x, 10px) 10px;
		scroll-padding-inline: var(--hv-site-gutter-x, 10px);
	}

	.hashtag-featured-brands__item {
		flex: 0 0 132px;
		min-height: 76px;
		padding: 11px;
	}

	.hashtag-featured-brands__nav {
		width: 36px;
		height: 36px;
		margin-top: -21px;
		font-size: 26px;
		line-height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hashtag-featured-brands {
		scroll-behavior: auto;
	}

	.hashtag-featured-brands__item,
	.hashtag-featured-brands__nav {
		transition: none;
	}
}