/* Bestseller landing page — visual layer over the shared campaign layout. */

body.vtxvn-bestsellers .site-main--shop {
	--deal-red: #e0a31a;
	--deal-red-dark: #b97b08;
	--deal-navy: #062f55;
	--deal-blue: #087e96;
	--deal-gold: #ffd86b;
	background:
		radial-gradient(circle at 8% 8%, rgba(10, 139, 165, 0.08), transparent 22rem),
		#f4f7fa;
}

body.vtxvn-bestsellers .deal-hot-hero {
	background: linear-gradient(120deg, #052e55 0%, #075f88 58%, #098da4 100%);
	box-shadow: 0 20px 54px rgba(5, 61, 83, 0.2);
}

body.vtxvn-bestsellers .deal-hot-hero__background::after {
	background: linear-gradient(90deg, rgba(3, 29, 56, 0.92) 0%, rgba(5, 68, 99, 0.72) 56%, rgba(7, 99, 117, 0.2) 100%);
}

body.vtxvn-bestsellers .deal-hot-hero__eyebrow {
	border-color: rgba(255, 216, 107, 0.42);
	background: rgba(255, 216, 107, 0.14);
	color: #ffe7a4;
}

body.vtxvn-bestsellers .deal-hot-hero__button--primary {
	background: linear-gradient(135deg, #ffd86b, #e2a11a);
	box-shadow: 0 10px 26px rgba(180, 116, 4, 0.28);
	color: #16354d;
}

body.vtxvn-bestsellers .deal-hot-hero__button--primary:hover,
body.vtxvn-bestsellers .deal-hot-hero__button--primary:focus-visible {
	background: linear-gradient(135deg, #ffe596, #efb331);
	color: #102f47;
}

body.vtxvn-bestsellers .deal-hot-hero__assurances .dashicons {
	color: #8ff0dd;
}

body.vtxvn-bestsellers .bestseller-hero__ranking {
	border: 1px solid rgba(255, 244, 199, 0.58);
	background: linear-gradient(145deg, #ffd96e 0%, #efa91b 52%, #cc7d08 100%);
	box-shadow: 0 25px 58px rgba(33, 34, 21, 0.32);
	color: #173850;
	transform: rotate(2deg);
}

body.vtxvn-bestsellers .bestseller-hero__ranking::before,
body.vtxvn-bestsellers .bestseller-hero__ranking::after {
	background: #087e96;
}

body.vtxvn-bestsellers .bestseller-hero__ranking > strong {
	color: #fff;
	font-size: clamp(2.8rem, 5vw, 4.35rem);
	letter-spacing: -0.045em;
	white-space: nowrap;
	text-shadow: 0 4px 18px rgba(91, 55, 0, 0.26);
}

body.vtxvn-bestsellers .bestseller-hero__ranking > small {
	border-color: rgba(22, 53, 77, 0.26);
	color: rgba(22, 53, 77, 0.9);
	font-weight: 700;
}

@media (min-width: 981px) {
	body.vtxvn-bestsellers .bestseller-hero {
		display: block;
		min-height: 425px;
	}

	body.vtxvn-bestsellers .bestseller-hero .deal-hot-hero__background {
		display: none;
	}

	body.vtxvn-bestsellers .bestseller-hero .deal-hot-hero__copy {
		position: relative;
		z-index: 3;
		display: flex;
		width: min(58%, 680px);
		min-height: 423px;
		justify-content: center;
		flex-direction: column;
		padding: clamp(34px, 3.5vw, 52px);
	}

	body.vtxvn-bestsellers .bestseller-hero .deal-hot-hero__visual.has-bestseller-artwork {
		position: absolute;
		z-index: 1;
		inset: 0;
		min-height: 0;
		overflow: hidden;
		padding: 0;
		background: transparent;
		box-shadow: none;
	}

	body.vtxvn-bestsellers .bestseller-hero .deal-hot-hero__picture {
		position: absolute;
		inset: 0;
		display: block;
	}

	body.vtxvn-bestsellers .bestseller-hero .deal-hot-hero__image {
		display: block;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	body.vtxvn-bestsellers .bestseller-hero .deal-hot-hero__spark {
		display: none;
	}

	body.vtxvn-bestsellers .bestseller-hero .bestseller-hero__ranking {
		position: absolute;
		z-index: 2;
		top: 18px;
		right: 18px;
		bottom: auto;
		width: auto;
		min-width: 145px;
		min-height: 0;
		padding: 12px 16px;
		border-radius: 12px;
		transform: none;
	}

	body.vtxvn-bestsellers .bestseller-hero .bestseller-hero__ranking::before,
	body.vtxvn-bestsellers .bestseller-hero .bestseller-hero__ranking::after {
		display: none;
	}

	body.vtxvn-bestsellers .bestseller-hero .bestseller-hero__ranking > span {
		font-size: 0.64rem;
		letter-spacing: 0.13em;
	}

	body.vtxvn-bestsellers .bestseller-hero .bestseller-hero__ranking > strong {
		margin: 4px 0 0;
		font-size: clamp(2rem, 4.5vw, 3.25rem);
	}

	body.vtxvn-bestsellers .bestseller-hero .bestseller-hero__ranking > small {
		margin-top: 5px;
		padding-top: 5px;
		font-size: 0.65rem;
		white-space: nowrap;
	}
}

body.vtxvn-bestsellers .deal-hot-category:hover,
body.vtxvn-bestsellers .deal-hot-category:focus-visible,
body.vtxvn-bestsellers .deal-hot-category.is-active {
	border-color: #e0a31a;
	background: #fff9e8;
	color: #8b5b05;
}

body.vtxvn-bestsellers .bestseller-filter-groups {
	display: grid;
	gap: 10px;
	margin-top: 14px;
}

body.vtxvn-bestsellers .bestseller-filter-groups .deal-hot-categories {
	margin-top: 0;
}

body.vtxvn-bestsellers .bestseller-brands .deal-hot-categories__heading .dashicons {
	color: #087e96;
}

body.vtxvn-bestsellers .deal-hot-products-heading > div > span {
	color: #b87809;
}

body.vtxvn-bestsellers .deal-hot-products-heading > strong {
	background: #fff5d9;
	color: #9c6506;
}

@media (max-width: 767px) {
	body.vtxvn-bestsellers .bestseller-filter-groups {
		gap: 8px;
		margin-top: 10px;
	}

	body.vtxvn-bestsellers .bestseller-hero .deal-hot-hero__visual.has-default-artwork .bestseller-hero__picture--default {
		display: none;
	}

	body.vtxvn-bestsellers .deal-hot-hero__background::after {
		background: linear-gradient(180deg, rgba(3, 29, 56, 0.9) 0%, rgba(5, 68, 99, 0.72) 62%, rgba(7, 99, 117, 0.36) 100%);
	}

	body.vtxvn-bestsellers .deal-hot-hero__copy {
		padding: 20px 18px 12px;
	}

	body.vtxvn-bestsellers .deal-hot-hero__eyebrow {
		min-height: 26px;
		margin-bottom: 10px;
		padding: 4px 9px;
		font-size: 0.59rem;
		letter-spacing: 0.03em;
	}

	body.vtxvn-bestsellers .deal-hot-hero h1 {
		font-size: clamp(1.65rem, 7.4vw, 2rem);
		line-height: 1.04;
		letter-spacing: -0.04em;
	}

	body.vtxvn-bestsellers .deal-hot-hero__copy > p {
		margin-top: 10px;
		font-size: 0.78rem;
		line-height: 1.48;
	}

	body.vtxvn-bestsellers .deal-hot-hero__actions {
		gap: 7px;
		margin-top: 13px;
	}

	body.vtxvn-bestsellers .deal-hot-hero__button {
		min-height: 40px;
		padding: 8px 12px;
		font-size: 0.75rem;
	}

	body.vtxvn-bestsellers .deal-hot-hero__assurances {
		align-items: center;
		flex-direction: row;
		gap: 6px 11px;
		margin-top: 12px;
		font-size: 0.64rem;
		line-height: 1.25;
	}

	body.vtxvn-bestsellers .deal-hot-hero__assurances li {
		white-space: nowrap;
	}
}