/* Group stylesheet for the interactive widgets. */

/* Start, not the grid's stretch: an opened card would otherwise pull the card beside it to its height. */
.alovesinh-faq {
	--alv-grid-cols-md: 1;
	--alv-grid-cols-sm: 1;
	--alv-grid-gap: var(--alv-sp-2);
	--alv-grid-width: var(--alv-w-faq);
	align-items: start;
}

.alovesinh-faq-item {
	border: var(--alv-bd-hairline) solid var(--alv-c-border);
	border-radius: var(--alv-r-3);
	background: var(--alv-c-white);
	transition: border-color var(--alv-dur-2) ease;
}

.alovesinh-faq-item[open] {
	border-color: var(--alv-c-brand);
}

.alovesinh-faq-item:has(.alovesinh-faq-question:focus-visible) {
	border-color: var(--alv-c-brand-deep);
}

/* Flex, not list-item: the browser draws its own disclosure triangle on a summary that is a list item. */
.alovesinh-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--alv-sp-2);
	min-height: var(--alv-touch);
	padding: var(--alv-sp-3);
	font-size: var(--alv-fs-3);
	font-weight: var(--alv-fw-bold);
	color: var(--alv-c-ink);
	list-style: none;
	cursor: pointer;
}

/* Focus is shown by the card border above; a ring on the summary as well would draw a frame inside the frame. */
.alovesinh-faq-question:focus-visible {
	outline: none;
}

.alovesinh-faq-number {
	flex-shrink: 0;
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-wide-1);
	color: var(--alv-c-brand-deep);
}

/* The wording takes the space the number and the disc leave, so a long question wraps inside its
	own column instead of pushing the disc off the end of the row. */
.alovesinh-faq-question-text {
	flex: 1;
}

.alovesinh-faq-mark {
	flex-shrink: 0;
	width: var(--alv-sp-3e);
	height: var(--alv-sp-3e);
	border-radius: var(--alv-r-circle);
	color: var(--alv-c-white);
	background: var(--alv-c-brand);
	transition:
		transform var(--alv-dur-2) ease,
		background var(--alv-dur-2) ease;
}

.alovesinh-faq-mark svg {
	width: var(--alv-sp-2b);
	height: var(--alv-sp-2b);
	stroke-width: var(--alv-stroke-4);
	stroke-linejoin: miter;
}

.alovesinh-faq-item[open] .alovesinh-faq-mark {
	color: var(--alv-c-white);
	background: var(--alv-c-brand-strong);
	transform: rotate(var(--alv-turn-faq-open));
}

.alovesinh-faq-answer {
	padding: var(--alv-sp-2c) var(--alv-sp-3) var(--alv-sp-3);
	border-top: var(--alv-bd-hairline) solid var(--alv-c-border);
	font-size: var(--alv-fs-3);
	line-height: var(--alv-lh-loose);
	color: var(--alv-c-text-2);
}

/* Mattress materials, not skin colours: they name what a foam layer looks like, so a theme that
	repaints the brand must leave them alone - mixed from the brand, a blue kit draws blue foam. */
.alovesinh-anatomy {
	--alv-anatomy-cover-top: var(--alv-c-linen);
	--alv-anatomy-cover-bottom: var(--alv-c-orange-lightest);
	--alv-anatomy-topper-top: var(--alv-c-peach-pale);
	--alv-anatomy-topper-bottom: var(--alv-c-orange-light);
	--alv-anatomy-foam-top: var(--alv-c-orange-light);
	--alv-anatomy-foam-bottom: var(--alv-c-soil-pale);
	--alv-anatomy-coil-light: var(--alv-c-stain-deep);
	--alv-anatomy-coil-dark: var(--alv-c-dust);
	--alv-anatomy-base-top: var(--alv-c-soil-dark);
	--alv-anatomy-base-bottom: var(--alv-c-soil-deep);

	display: grid;
	grid-template-columns: 1fr;
	gap: var(--alv-sp-4);
	align-items: center;
	width: min(100%, var(--alv-w-grid));
	margin: 0 auto;
}

.alovesinh-anatomy-figure {
	position: relative;
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--alv-ratio-anatomy-figure);
	padding: var(--alv-pad-anatomy-figure);
	border-radius: var(--alv-r-4);
	background: var(--alv-scene-warm);
	box-shadow: var(--alv-sh-3);
}

.alovesinh-anatomy-figure::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--alv-scene-anatomy-glow);
}

.alovesinh-anatomy-stack {
	position: relative;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	width: 100%;
	aspect-ratio: var(--alv-ratio-anatomy-stack);
	border-radius: var(--alv-r-3);
	box-shadow: var(--alv-sh-3);
}

/* flex comes from the band's own control: hardcode it and all five layers draw equal. */
.alovesinh-anatomy-band {
	position: relative;
	display: flex;
	flex: var(--alv-anatomy-ratio, 1);
	align-items: center;
	padding: 0 var(--alv-sp-3b);
	border-bottom: var(--alv-bd-hairline) solid var(--alv-c-black-film);
	font-size: var(--alv-fs-1);
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-wide-2);
	text-transform: uppercase;
	color: var(--alv-c-text-2);
}

.alovesinh-anatomy-band:last-child {
	border-bottom: 0;
}

.alovesinh-anatomy-band-cover {
	background: linear-gradient(
		to bottom,
		var(--alv-anatomy-cover-top) 0%,
		var(--alv-anatomy-cover-bottom) 100%
	);
}

.alovesinh-anatomy-band-topper {
	background: linear-gradient(
		to bottom,
		var(--alv-anatomy-topper-top) 0%,
		var(--alv-anatomy-topper-bottom) 100%
	);
}

.alovesinh-anatomy-band-foam {
	background: linear-gradient(
		to bottom,
		var(--alv-anatomy-foam-top) 0%,
		var(--alv-anatomy-foam-bottom) 100%
	);
}

.alovesinh-anatomy-band-coil {
	color: var(--alv-c-white);
	background: repeating-linear-gradient(
		to right,
		var(--alv-anatomy-coil-light) 0%,
		var(--alv-anatomy-coil-light) var(--alv-stop-coil),
		var(--alv-anatomy-coil-dark) var(--alv-stop-coil),
		var(--alv-anatomy-coil-dark) var(--alv-stop-coil-repeat)
	);
}

.alovesinh-anatomy-band-base {
	color: var(--alv-c-white);
	background: linear-gradient(
		to bottom,
		var(--alv-anatomy-base-top) 0%,
		var(--alv-anatomy-base-bottom) 100%
	);
}

.alovesinh-anatomy-pin {
	position: absolute;
	top: var(--alv-pos-center);
	left: var(--alv-pos-center);
	z-index: var(--alv-z-stamp);
	width: var(--alv-sp-3c);
	height: var(--alv-sp-3c);
	border: var(--alv-bd-thick) solid var(--alv-c-brand);
	border-radius: var(--alv-r-circle);
	font-size: var(--alv-fs-1);
	font-weight: var(--alv-fw-extrabold);
	color: var(--alv-c-brand-deep);
	background: var(--alv-c-white);
	box-shadow: var(--alv-sh-lift);
	transform: translate(calc(-1 * var(--alv-pos-center)), calc(-1 * var(--alv-pos-center)));
	transition:
		transform var(--alv-dur-2) ease,
		background var(--alv-dur-2) ease,
		color var(--alv-dur-2) ease;
	cursor: pointer;
}

.alovesinh-anatomy-pin:hover,
.alovesinh-anatomy-pin[aria-pressed='true'] {
	background: var(--alv-c-brand-wash);
	transform: translate(calc(-1 * var(--alv-pos-center)), calc(-1 * var(--alv-pos-center)))
		scale(var(--alv-scale-pin-hover));
}

.alovesinh-anatomy-pin::after {
	content: '';
	position: absolute;
	inset: calc(-1 * var(--alv-sp-0b));
	border: var(--alv-bd-thick) solid var(--alv-c-brand);
	border-radius: var(--alv-r-circle);
	opacity: 0;
	pointer-events: none;
}

/* The beats stay under five seconds in all, the WCAG 2.2.2 ceiling for motion that starts on its own. */
.alovesinh-anatomy-hint .alovesinh-anatomy-pin::after {
	animation: alovesinh-anatomy-pulse var(--alv-dur-pulse) ease-out var(--alv-count-pulse);
}

@keyframes alovesinh-anatomy-pulse {
	0% {
		opacity: var(--alv-op-pulse);
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(var(--alv-scale-pulse));
	}
}

.alovesinh-anatomy-cards {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	border: var(--alv-bd-hairline) solid var(--alv-c-border);
	border-radius: var(--alv-r-3);
	background: var(--alv-c-white);
	box-shadow: var(--alv-sh-1);
}

.alovesinh-anatomy-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--alv-sp-3);
	padding: var(--alv-sp-3b) var(--alv-sp-3d);
	border: 0;
	border-bottom: var(--alv-bd-hairline) solid var(--alv-c-border);
	text-align: left;
	background: transparent;
	transition: background var(--alv-dur-2) ease;
	cursor: pointer;
}

.alovesinh-anatomy-card:last-child {
	border-bottom: 0;
}

.alovesinh-anatomy-card:hover {
	background: var(--alv-c-bg-light);
}

.alovesinh-anatomy-card[aria-pressed='true'] {
	background: var(--alv-scene-anatomy-card-active);
}

.alovesinh-anatomy-card-number {
	width: var(--alv-sp-4a);
	height: var(--alv-sp-4a);
	border-radius: var(--alv-r-1);
	font-size: var(--alv-fs-3);
	font-weight: var(--alv-fw-extrabold);
	color: var(--alv-c-brand-deep);
	background: var(--alv-c-brand-wash);
	transition: box-shadow var(--alv-dur-2) ease;
}

.alovesinh-anatomy-card[aria-pressed='true'] .alovesinh-anatomy-card-number {
	box-shadow: inset 0 0 0 var(--alv-bd-thick) var(--alv-c-brand-deep);
}

/* Without it the long answer stretches the middle column and pushes the arrow off the card. */
.alovesinh-anatomy-card-text {
	min-width: 0;
}

.alovesinh-anatomy-card-name {
	display: block;
	margin-bottom: var(--alv-sp-0c);
	font-size: var(--alv-fs-4);
	font-weight: var(--alv-fw-bold);
	line-height: var(--alv-lh-tight);
	color: var(--alv-c-ink);
}

.alovesinh-anatomy-card-description {
	display: none;
	margin-top: var(--alv-sp-1);
	font-size: var(--alv-fs-2);
	line-height: var(--alv-lh-body);
	color: var(--alv-c-text-muted);
}

.alovesinh-anatomy-card[aria-pressed='true'] .alovesinh-anatomy-card-description {
	display: block;
}

.alovesinh-anatomy-card-meta {
	display: none;
	align-items: center;
	gap: var(--alv-sp-1);
	margin-top: var(--alv-sp-1);
	padding: var(--alv-sp-0c) var(--alv-sp-1a);
	border-radius: var(--alv-r-1);
	font-size: var(--alv-fs-1);
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-wide-2);
	text-transform: uppercase;
	color: var(--alv-c-ink);
	background: var(--alv-c-accent-wash);
}

.alovesinh-anatomy-card-meta::before {
	content: '';
	flex-shrink: 0;
	width: var(--alv-sp-1);
	height: var(--alv-sp-1);
	border-radius: var(--alv-r-circle);
	background: var(--alv-c-accent);
}

.alovesinh-anatomy-card[aria-pressed='true'] .alovesinh-anatomy-card-meta {
	display: inline-flex;
}

.alovesinh-anatomy-card-arrow {
	color: var(--alv-c-text-muted);
	transition: transform var(--alv-dur-3) ease;
}

.alovesinh-anatomy-card[aria-pressed='true'] .alovesinh-anatomy-card-arrow {
	color: var(--alv-c-brand);
	transform: rotate(var(--alv-turn-card-arrow));
}

.alovesinh-tabs-bar {
	display: flex;
	border-bottom: var(--alv-bd-hairline) solid var(--alv-c-border);
	background: var(--alv-c-bg-light);
}

/* The horizontal bar is one segmented strip, not a row of underlined words: each button takes an
	equal share, stacks its icon over its label, and the divider between them is a right border the
	last button drops. */
.alovesinh-tabs-button {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: var(--alv-sp-1);
	min-height: var(--alv-touch);
	padding: var(--alv-sp-2d) var(--alv-sp-2b);
	border: 0;
	border-right: var(--alv-bd-hairline) solid var(--alv-c-border);
	font-size: var(--alv-fs-3);
	font-weight: var(--alv-fw-bold);
	text-align: center;
	color: var(--alv-c-text-muted);
	background: transparent;
	cursor: pointer;
	transition:
		color var(--alv-dur-1) ease,
		background var(--alv-dur-1) ease;
}

.alovesinh-tabs-button:last-child {
	border-right: 0;
}

/* The segmented strip draws its icon at 22px and the chip strip at 18px in the source design, so
	the size is a variable each shape sets rather than one number for the widget. */
.alovesinh-tabs-button svg,
.alovesinh-tabs-button i {
	flex-shrink: 0;
	width: var(--alv-tabs-icon, var(--alv-sp-3a));
	height: var(--alv-tabs-icon, var(--alv-sp-3a));
	font-size: var(--alv-tabs-icon, var(--alv-sp-3a));
	line-height: 1;
}

.alovesinh-tabs-pill {
	--alv-tabs-icon: var(--alv-sp-2d);
}

.alovesinh-tabs-button[aria-selected='true'] {
	color: var(--alv-c-brand-deep);
	background: var(--alv-c-white);
	box-shadow: inset 0 calc(-1 * var(--alv-bd-heavy)) 0 var(--alv-c-brand);
}

/* Elementor lays a nested widget's pane out as a flex line, which shrinks the container a buyer
	drops in to its own content, so the pane is put back to a block. The pair below returns the
	hiding that setting display takes away from the attribute. */
.alovesinh-tabs .alovesinh-tabs-panel {
	display: block;
	padding-top: var(--alv-sp-3);
}

.alovesinh-tabs .alovesinh-tabs-panel[hidden] {
	display: none;
}

/* The chip form carries its panel in a framed card, unlike the segmented bar whose panel runs on
	under the strip. */
.alovesinh-tabs-pill .alovesinh-tabs-panel,
.alovesinh-phan-loai-the {
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--alv-sp-4);
	padding: var(--alv-sp-3);
	border: var(--alv-bd-hairline) solid var(--alv-c-border);
	border-radius: var(--alv-r-4);
	background: var(--alv-c-white);
	box-shadow: var(--alv-sh-2);
}

.alovesinh-tabs-pill .alovesinh-tabs-panel > .alovesinh-tabs-posts-panel {
	grid-column: 1 / -1;
}

.alovesinh-tabs-pill .alovesinh-tabs-bar {
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--alv-sp-2);
	margin-bottom: var(--alv-sp-4);
	border-bottom: 0;
	background: transparent;
}

.alovesinh-tabs-pill .alovesinh-tabs-button {
	flex: 0 0 auto;
	flex-direction: row;
	gap: var(--alv-sp-2);
	padding: var(--alv-sp-2b) var(--alv-sp-3b);
	border: var(--alv-bd-hairline) solid var(--alv-c-border);
	border-radius: var(--alv-r-pill);
	font-weight: var(--alv-fw-semibold);
	color: var(--alv-c-text-2);
	background: var(--alv-c-white);
	box-shadow: none;
}

.alovesinh-tabs-pill .alovesinh-tabs-button[aria-selected='true'] {
	border-color: var(--alv-c-ink);
	color: var(--alv-c-white);
	background: var(--alv-c-ink);
	box-shadow: var(--alv-sh-2);
}

/* Core Nested Tabs takes Kit colours and var() sizes in its own controls; a colour outside the Kit, a duration it
	only takes as a typed number and a two-layer shadow are read from the token here instead. */
.elementor-widget-n-tabs.alovesinh-tabs-pill {
	--n-tabs-title-color: var(--alv-c-text-2);
	--n-tabs-title-transition: var(--alv-dur-1);
}

.elementor-widget-n-tabs.alovesinh-tabs-pill .e-n-tab-title[aria-selected='true'] {
	box-shadow: var(--alv-sh-2);
}

/* Icon tabs: the label is clipped out of view below mobile-extra and shown from it. */
.alovesinh-tabs-horizontal .alovesinh-tabs-button:has(svg, i) span {
	position: absolute;
	overflow: hidden;
	width: var(--alv-sp-0a);
	height: var(--alv-sp-0a);
	white-space: nowrap;
	clip-path: inset(var(--alv-pos-center));
}

.alovesinh-tabs-vertical {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--alv-sp-1);
	align-items: start;
	padding-top: var(--alv-sp-3b);
	border-top: var(--alv-bd-hairline) solid var(--alv-c-border);
	counter-reset: alovesinh-tabs-index;
}

.alovesinh-tabs-vertical > .alovesinh-tabs-panel {
	order: calc(2 * var(--alv-tabs-index, 0) + 1);
}

.alovesinh-tabs-vertical .alovesinh-tabs-bar {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--alv-sp-1);
	border-bottom: 0;
	background: transparent;
	counter-reset: alovesinh-tabs-index;
}

/* The shared 44px floor belongs to the segmented strip, where the button is the whole control.
	An index row is 38px in the source design, and holding it at 44 spaces the list out wrongly. */
.alovesinh-tabs-vertical .alovesinh-tabs-button {
	flex: 0 0 auto;
	flex-direction: row;
	gap: var(--alv-sp-2);
	min-height: 0;
	padding: var(--alv-sp-1b) var(--alv-sp-2);
	border: 0;
	border-radius: var(--alv-r-1);
	font-weight: var(--alv-fw-medium);
	line-height: var(--alv-lh-snug);
	text-align: left;
	color: var(--alv-c-text-2);
	box-shadow: none;
	counter-increment: alovesinh-tabs-index;
}

/* The number is drawn by the counter, not typed into each label: inserting a section renumbers
	the rest on its own, which a hand-typed figure never does. */
.alovesinh-tabs-vertical .alovesinh-tabs-button::before {
	content: counter(alovesinh-tabs-index, decimal-leading-zero);
	min-width: var(--alv-sp-3a);
	font-size: var(--alv-fs-1);
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-wide-1);
	color: var(--alv-c-text-muted);
}

.alovesinh-tabs-vertical .alovesinh-tabs-button[aria-selected='true'] {
	font-weight: var(--alv-fw-bold);
	color: var(--alv-c-brand-deep);
	background: var(--alv-c-brand-wash);
	box-shadow: none;
}

.alovesinh-tabs-vertical .alovesinh-tabs-button[aria-selected='true']::before {
	color: var(--alv-c-brand-deep);
}

.alovesinh-tabs-vertical .alovesinh-tabs-panel {
	padding-block: var(--alv-sp-2) var(--alv-sp-3);
}

.alovesinh-tabs-pill .alovesinh-tabs-panel:not([hidden]),
.alovesinh-phan-loai-the {
	display: grid;
}

.alovesinh-tabs-button:hover:not([aria-selected='true']) {
	color: var(--alv-c-ink);
	background: var(--alv-c-brand-trace);
}

.alovesinh-tabs-pill .alovesinh-tabs-button:hover:not([aria-selected='true']) {
	border-color: var(--alv-c-brand);
	color: var(--alv-c-brand-deep);
	background: var(--alv-c-white);
}

.alovesinh-tabs-vertical .alovesinh-tabs-button:hover:not([aria-selected='true']) {
	color: var(--alv-c-brand-deep);
	background: var(--alv-c-brand-film);
}

.alovesinh-tabs-rail-label {
	margin-bottom: var(--alv-sp-3);
	font-size: var(--alv-fs-1);
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-wide-4);
	text-transform: uppercase;
	color: var(--alv-c-text-muted);
}

.alovesinh-tabs-rail-foot {
	margin-top: var(--alv-sp-3);
	padding-top: var(--alv-sp-3);
	border-top: var(--alv-bd-hairline) dashed var(--alv-c-border);
}

.alovesinh-tabs-rail-link {
	display: inline-flex;
	align-items: center;
	gap: var(--alv-sp-1);
	padding: var(--alv-sp-1a) var(--alv-sp-2);
	border-radius: var(--alv-r-1);
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-bold);
	color: var(--alv-c-brand-deep);
	background: var(--alv-c-brand-wash);
}

.alovesinh-tabs-rail-link svg {
	stroke-width: var(--alv-stroke-3);
}

.alovesinh-tabs-rail-link:hover {
	background: var(--alv-c-brand-cloud);
}

.alovesinh-tabs-vertical > .alovesinh-tabs-rail,
.alovesinh-tabs-vertical > .alovesinh-tabs-rail > .alovesinh-tabs-bar {
	display: contents;
}

.alovesinh-tabs-vertical > .alovesinh-tabs-rail > .alovesinh-tabs-rail-label {
	order: -1;
}

.alovesinh-tabs-vertical > .alovesinh-tabs-rail > .alovesinh-tabs-bar > .alovesinh-tabs-button {
	order: calc(2 * var(--alv-tabs-index, 0));
}

.alovesinh-tabs-vertical > .alovesinh-tabs-rail > .alovesinh-tabs-rail-foot {
	order: calc(2 * var(--alv-tabs-count, 0) + 2);
}

/* Opened right under its own tab, the panel's spec label would repeat the number and name just read. */
.alovesinh-tabs-vertical > .alovesinh-tabs-panel .alovesinh-table-spec-label {
	display: none;
}

.alovesinh-before-after {
	position: relative;
	overflow: hidden;
	border-radius: var(--alv-r-3);
	cursor: ew-resize;
	/* The frame takes the drag, so a vertical swipe across it must still scroll the page:
		set to none, a swipe that starts on the photo cannot scroll past it. */
	touch-action: pan-y;
}

.alovesinh-before-after:focus-visible {
	outline: none;
}

/* Drawn on a layer of its own above the photos: an outline on the frame paints under its absolute children. */
.alovesinh-before-after:focus-visible::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--alv-z-lift);
	border: var(--alv-bd-hairline) solid var(--alv-c-ink);
	border-radius: inherit;
	pointer-events: none;
}

/* Both layers are absolute so they stack in the same box; the after layer is then clipped to the
	slider percentage rather than resized, which keeps the seam a straight edge. */
.alovesinh-before-after-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.alovesinh-before-after-layer-after {
	clip-path: inset(0 0 0 var(--alv-reveal));
}

/* min/max hold the height against Elementor's `.elementor img { height: auto }`, which outranks one class. */
.alovesinh-before-after-layer img {
	width: 100%;
	min-height: 100%;
	max-height: 100%;
	object-fit: cover;
}

.alovesinh-before-after-layer svg {
	display: block;
	width: 100%;
	height: 100%;
}

.alovesinh-before-after-layer::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--alv-before-after-scrim, none);
	pointer-events: none;
}

.alovesinh-before-after-layer-after::after {
	background: var(--alv-before-after-scrim-after, none);
}

.alovesinh-before-after-proof {
	--alv-before-after-scrim: var(--alv-scrim-proof-before);
	--alv-before-after-scrim-after: var(--alv-scrim-proof-after);
}

/* Above the wash, not under it: the brown scrim over the soiled half would mute the label. */
.alovesinh-before-after-label {
	position: absolute;
	top: var(--alv-sp-2b);
	z-index: 1;
	padding: var(--alv-sp-1) var(--alv-sp-2);
	border-radius: var(--alv-r-1);
	font-size: var(--alv-fs-1);
	font-weight: var(--alv-fw-extrabold);
	letter-spacing: var(--alv-tr-label-sm);
	text-transform: uppercase;
	color: var(--alv-c-white);
}

/* Red for the soiled side, green for the cleaned one: the pair has to read at a glance from the
	colour alone, because the slider covers one label at each extreme of its travel. */
.alovesinh-before-after-layer-before .alovesinh-before-after-label {
	left: var(--alv-sp-2b);
	background: var(--alv-c-danger);
}

.alovesinh-before-after-layer-after .alovesinh-before-after-label {
	right: var(--alv-sp-2b);
	color: var(--alv-c-ink);
	background: var(--alv-c-success-wash);
}

.alovesinh-before-after-seam {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--alv-reveal);
	width: var(--alv-sp-0c);
	background: var(--alv-c-white);
	box-shadow: 0 0 0 var(--alv-bd-hairline) var(--alv-c-black-tint-strong);
	transform: translateX(calc(-1 * var(--alv-pos-center)));
	pointer-events: none;
}

.alovesinh-before-after-seam::before {
	content: '';
	position: absolute;
	top: var(--alv-pos-center);
	left: var(--alv-pos-center);
	width: var(--alv-sp-4c);
	height: var(--alv-sp-4c);
	border-radius: var(--alv-r-circle);
	background: var(--alv-c-white);
	box-shadow: 0 var(--alv-sp-1) var(--alv-sp-2d) var(--alv-c-black-shade);
	transform: translate(calc(-1 * var(--alv-pos-center)), calc(-1 * var(--alv-pos-center)));
}

/* One element drawn as a double chevron: two side borders clipped into arrow heads, so the grip
	needs no icon file and no extra markup the template would have to keep in step. */
.alovesinh-before-after-seam::after {
	content: '';
	position: absolute;
	top: var(--alv-pos-center);
	left: var(--alv-pos-center);
	width: var(--alv-sp-2d);
	height: var(--alv-sp-2d);
	border-right: var(--alv-bd-thick) solid var(--alv-c-ink);
	border-left: var(--alv-bd-thick) solid var(--alv-c-ink);
	background: transparent;
	transform: translate(calc(-1 * var(--alv-pos-center)), calc(-1 * var(--alv-pos-center)));
	clip-path: polygon(
		0 0,
		var(--alv-sp-0c) var(--alv-pos-center),
		0 100%,
		100% 100%,
		calc(100% - var(--alv-sp-0c)) var(--alv-pos-center),
		100% 0
	);
}

.alovesinh-countdown {
	--alv-row-wrap: wrap;
	--alv-countdown-unit-min: var(--alv-w-countdown-unit);
	position: relative;
	z-index: 1;
	justify-content: center;
}

/* A pair never splits, so the row holds four boxes or two pairs stacked, never three and one. */
.alovesinh-countdown-pair {
	display: flex;
	flex: 1 1 0;
	gap: var(--alv-sp-2);
	min-width: calc(2 * var(--alv-countdown-unit-min) + var(--alv-sp-2));
}

.alovesinh-countdown-unit {
	display: grid;
	justify-items: center;
	gap: var(--alv-sp-1);
	flex: 1;
	min-width: var(--alv-countdown-unit-min);
	padding: var(--alv-sp-3) var(--alv-countdown-unit-pad-inline, var(--alv-sp-2c));
	border: var(--alv-bd-hairline) solid var(--alv-countdown-border, var(--alv-c-glass-edge-strong));
	border-radius: var(--alv-r-3);
	text-align: center;
	background: var(--alv-countdown-bg, var(--alv-c-glass-edge-strong));
}

/* These woff2 files carry no tabular figures, so tabular-nums alone leaves each tick narrowing or
	widening the centred figure and moving it; a box two zeros wide holds still while the digits change. */
.alovesinh-countdown-number {
	min-width: var(--alv-w-countdown-digits);
	font-size: clamp(var(--alv-fs-6c), var(--alv-fs-grow-5a), var(--alv-fs-8));
	font-weight: var(--alv-fw-extrabold);
	line-height: 1;
	letter-spacing: var(--alv-tr-figure);
	font-variant-numeric: tabular-nums;
	color: var(--alv-countdown-number, var(--alv-c-white));
}

.alovesinh-countdown-label {
	font-size: var(--alv-fs-1);
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-wide-3);
	text-transform: uppercase;
	color: var(--alv-countdown-label, var(--alv-c-on-dark));
}

.alovesinh-countdown-separator {
	align-self: center;
	font-size: var(--alv-fs-4b);
	font-weight: var(--alv-fw-extrabold);
	line-height: 1;
	color: var(--alv-c-warning);
}

.alovesinh-countdown > .alovesinh-countdown-separator {
	display: none;
}

/* The full height fills a widget set to Grow, which is how the source design stretches the map to
	the list beside it; in a column with no set height it falls back to auto. */
.alovesinh-hotspot-map {
	position: relative;
	height: 100%;
	min-height: var(--alv-h-map);
	padding: var(--alv-sp-3);
	border: var(--alv-bd-hairline) solid var(--alv-c-border);
	border-radius: var(--alv-r-4);
	background: var(--alv-scene-warm);
	box-shadow: var(--alv-sh-1);
}

.alovesinh-hotspot-map img,
.alovesinh-hotspot-map svg {
	display: block;
	width: 100%;
}

.alovesinh-hotspot-map svg {
	height: 100%;
}

/* The source design draws this map as an inline SVG, which scales on its own. A buyer who
	uploads a photograph instead gets it cropped rather than stretched, because the pins are
	placed by percentage and a stretched map moves every one of them off its landmark. */
.alovesinh-hotspot-map img {
	min-height: 100%;
	max-height: 100%;
	object-fit: cover;
}

/* The pin IS the dot: eight names on screen at once would cover the map they sit on, so a name
	appears only for the one being pointed at. The pin carries its own left/top from the repeater,
	so translate is the only way to centre it on that point rather than hang it below and right. */
.alovesinh-hotspot-map-pin {
	position: absolute;
	width: var(--alv-sp-2b);
	height: var(--alv-sp-2b);
	border-radius: var(--alv-r-circle);
	background: var(--alv-c-accent);
	box-shadow:
		0 0 0 var(--alv-sp-0d) var(--alv-c-accent-shade),
		0 var(--alv-sp-0d) var(--alv-sp-1c) var(--alv-c-accent-veil);
	transform: translate(calc(-1 * var(--alv-pos-center)), calc(-1 * var(--alv-pos-center)));
	cursor: pointer;
}

.alovesinh-hotspot-map-pin-label {
	position: absolute;
	bottom: calc(100% + var(--alv-sp-1c));
	left: var(--alv-pos-center);
	padding: var(--alv-sp-1) var(--alv-sp-2);
	border-radius: var(--alv-r-pill);
	font-size: var(--alv-fs-1);
	font-weight: var(--alv-fw-semibold);
	white-space: nowrap;
	color: var(--alv-c-white);
	background: var(--alv-c-ink);
	opacity: 0;
	transform: translateX(calc(-1 * var(--alv-pos-center)));
	transition: opacity var(--alv-dur-1) ease;
	pointer-events: none;
}

/* The source design reveals the name from script and leaves the keyboard with no way in. Pairing
	focus-visible with hover keeps the markers usable without a mouse. */
.alovesinh-hotspot-map-pin:hover .alovesinh-hotspot-map-pin-label,
.alovesinh-hotspot-map-pin:focus-visible .alovesinh-hotspot-map-pin-label {
	opacity: 1;
}

/* Clipped across only: the cards' shadows fall below the band, and clipping them as well took a strip of
	empty track under the last card that left the block closing lower than its cards end. */
.alovesinh-marquee {
	position: relative;
	overflow-x: clip;
}

.alovesinh-marquee-track {
	display: flex;
	flex-shrink: 0;
	padding-top: var(--alv-sp-1a);
}

/* A pass is never narrower than the band: a short list would let the track's end scroll into view
	before the loop restarts, and the seam shows as bare ground. Each of the two identical passes travels
	exactly its own width, so the second lands where the first began and the seam never shows. */
.alovesinh-marquee-pass {
	display: flex;
	flex-shrink: 0;
	min-width: 100%;
	animation: alovesinh-marquee-travel var(--alv-marquee-duration, var(--alv-dur-marquee)) linear
		infinite;
}

/* A margin on each card, never a gap on the track: a pass travels only its own width, so a gap between
	the two passes is never covered and the loop jumps by it. */
.alovesinh-marquee-item {
	--alv-marquee-item-width: var(--alv-w-marquee-item);
	display: inline-flex;
	align-items: center;
	flex: 0 0 var(--alv-marquee-item-width, var(--alv-w-marquee-item-default));
	gap: var(--alv-sp-2);
	margin-right: var(--alv-sp-3);
	white-space: nowrap;
}

/* A card sets its own height from the quote inside it, so the wrapper drops the single-line rules
	the wording strip needs: centred and nowrap would clip the quote to one line. */
.alovesinh-marquee-item-review {
	--alv-card-pad: var(--alv-sp-3);
	display: block;
	white-space: normal;
}

@keyframes alovesinh-marquee-travel {
	to {
		transform: translateX(-100%);
	}
}

.alovesinh-marquee-paused .alovesinh-marquee-pass,
.alovesinh-marquee-offscreen .alovesinh-marquee-pass,
.alovesinh-marquee:hover .alovesinh-marquee-pass {
	animation-play-state: paused;
}

.alovesinh-marquee-pause {
	display: block;
	flex-shrink: 0;
	margin: 0 0 var(--alv-sp-2) auto;
	padding: var(--alv-sp-1) var(--alv-sp-2b);
	border: var(--alv-bd-hairline) solid var(--alv-c-border);
	border-radius: var(--alv-r-pill);
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-semibold);
	color: var(--alv-c-text-2);
	background: var(--alv-c-white);
	cursor: pointer;
}

.alovesinh-marquee-pause:hover {
	border-color: var(--alv-c-brand);
	color: var(--alv-c-brand-deep);
}

/* Hidden by visibility, not display: the box holds its place until the script takes the button over,
	so revealing it moves nothing, and a box hidden this way is still out of the tab and reading order. */
.alovesinh-marquee-pause[hidden] {
	visibility: hidden;
}

.alovesinh-countdown-phone-two .alovesinh-countdown-pair {
	flex-basis: 100%;
}

.alovesinh-countdown-phone-two .alovesinh-countdown-unit {
	flex: 1 1 calc(var(--alv-pos-center) - var(--alv-sp-1a));
	min-width: 0;
	padding: var(--alv-sp-2d) var(--alv-sp-2b);
}

.alovesinh-khuyen-mai-50-suat .alovesinh-countdown {
	--alv-countdown-unit-min: var(--alv-sp-5b);
	--alv-countdown-unit-floor: var(--alv-countdown-unit-min);
	--alv-countdown-unit-pad-inline: var(--alv-sp-1);
	--alv-countdown-bg: var(--alv-c-glass-edge-soft);
	gap: var(--alv-sp-1a);
	justify-content: flex-start;
}

.alovesinh-khuyen-mai-50-suat .alovesinh-countdown-pair {
	flex: 0 1 auto;
	gap: var(--alv-sp-1a);
}

.alovesinh-khuyen-mai-50-suat .alovesinh-countdown-unit {
	flex: 0 0 auto;
	gap: 0;
	padding-block: var(--alv-sp-1a);
	border: 0;
	border-radius: var(--alv-r-2);
}

.alovesinh-khuyen-mai-50-suat .alovesinh-countdown-number {
	font-size: var(--alv-fs-5a);
	line-height: var(--alv-lh-display);
	letter-spacing: normal;
}

.alovesinh-khuyen-mai-50-suat .alovesinh-countdown-label {
	font-weight: var(--alv-fw-semibold);
	letter-spacing: var(--alv-tr-label);
}

/* The cards and the panel they open are drawn on one measure in the source design, so the figure
	sits on the pair and neither can be retuned without the other. The space between them is the
	column gap: the panel starts hidden, a hidden item takes no gap, and nothing is left under the cards
	until a reader opens one. */
.alovesinh-persona-picker {
	--alv-grid-width: var(--alv-w-persona-picker);
	display: flex;
	flex-direction: column;
	gap: var(--alv-sp-4);
}

.alovesinh-persona-picker-result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--alv-sp-3);
	width: min(100%, var(--alv-grid-width));
	margin-inline: auto;
	padding: var(--alv-sp-4) var(--alv-sp-4a);
	border-radius: var(--alv-r-4);
	background: var(--alv-c-ink);
	animation: alovesinh-persona-picker-reveal var(--alv-dur-4) ease;
}

.alovesinh-persona-picker-result[hidden] {
	display: none;
}

@keyframes alovesinh-persona-picker-reveal {
	from {
		opacity: 0;
		transform: translateY(var(--alv-sp-1a));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.alovesinh-persona-picker-result-text {
	flex: 1;
	min-width: var(--alv-w-persona-text);
}

.alovesinh-persona-picker-result-label {
	font-size: var(--alv-fs-1);
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-wide-3);
	text-transform: uppercase;
	color: var(--alv-c-brand-light);
}

.alovesinh-persona-picker-result-title {
	margin: var(--alv-sp-1) 0;
	font-size: var(--alv-fs-5);
	font-weight: var(--alv-fw-extrabold);
	color: var(--alv-c-white);
}

.alovesinh-persona-picker-result-description {
	margin: 0;
	font-size: var(--alv-fs-3);
	line-height: var(--alv-lh-body);
	color: var(--alv-c-text-muted-dark);
}

.alovesinh-persona-picker-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alv-sp-2);
}

.alovesinh-persona-picker-result-button {
	--alv-btn-icon: var(--alv-fs-2a);
}

.alovesinh-bang-gia-loai-nem-khung .alovesinh-tabs .alovesinh-tabs-panel {
	padding-top: 0;
}

/* The class picker frames the container set in each pane, not the pane: a pane holds that one
	container, so a two-column grid on the pane would leave it alone in the first column. */
.alovesinh-phan-loai-nem .alovesinh-tabs .alovesinh-tabs-panel {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.alovesinh-phan-loai-nem .alovesinh-tabs .alovesinh-tabs-panel:not([hidden]) {
	display: block;
}

.alovesinh-truoc-sau-truot .alovesinh-before-after {
	border-radius: var(--alv-r-4);
	background: var(--alv-c-ink);
	box-shadow: var(--alv-sh-3);
}

.alovesinh-bang-chung-anh .alovesinh-before-after {
	border-bottom: var(--alv-bd-hairline) solid var(--alv-c-glass-tint);
}

@media (min-width: 561px) {
	.alovesinh-tabs-horizontal .alovesinh-tabs-button:has(svg, i) span {
		position: static;
		overflow: visible;
		width: auto;
		height: auto;
		white-space: inherit;
		clip-path: none;
	}

	.alovesinh-marquee-item {
		--alv-marquee-item-width: inherit;
	}

	.alovesinh-marquee-item-review {
		--alv-card-pad: inherit;
	}

	.alovesinh-countdown-phone-two .alovesinh-countdown-pair {
		flex-basis: 0;
	}

	.alovesinh-countdown-phone-two .alovesinh-countdown-unit {
		flex: 1;
		min-width: var(--alv-countdown-unit-min);
		padding: var(--alv-sp-3) var(--alv-sp-2c);
	}

	.alovesinh-countdown > .alovesinh-countdown-separator {
		display: block;
	}
}

@media (min-width: 821px) {
	.alovesinh-faq {
		/* Tablet follows the chosen count instead of the shared grid's tablet default. */
		--alv-grid-cols-md: var(--alv-grid-cols, 1);
	}

	.alovesinh-anatomy {
		grid-template-columns: var(--alv-track-anatomy);
		gap: var(--alv-sp-5);
	}

	.alovesinh-anatomy-figure {
		aspect-ratio: var(--alv-ratio-anatomy-figure-wide);
		padding: var(--alv-pad-anatomy-figure-wide);
	}

	.alovesinh-anatomy-pin {
		width: var(--alv-sp-3e);
		height: var(--alv-sp-3e);
		font-size: var(--alv-fs-2);
	}

	/* Below the tablet breakpoint the framed panel drops to one column: the source design pairs
		copy with a picture side by side only while both still have room to read. */
	.alovesinh-tabs-pill .alovesinh-tabs-panel,
	.alovesinh-phan-loai-the {
		grid-template-columns: 1fr 1fr;
	}

	.alovesinh-tabs-pill .alovesinh-tabs-panel {
		padding: var(--alv-sp-3) var(--alv-sp-4) var(--alv-sp-4);
	}

	.alovesinh-phan-loai-the {
		padding: var(--alv-sp-4);
	}

	.alovesinh-hotspot-map {
		min-height: var(--alv-h-map-lg);
	}
}

@media (min-width: 981px) {
	.alovesinh-tabs-vertical {
		grid-template-columns: var(--alv-w-tab-rail) 1fr;
		gap: var(--alv-sp-5);
		padding-top: 0;
		border-top: 0;
	}

	/* An index pinned to the left edge, which is how the source design sets the long specification
		list: the rule runs down the left of the column, not between it and the panel. Sticky so the
		reader keeps the list of sections while scrolling a table that runs past the fold. */
	.alovesinh-tabs-vertical > .alovesinh-tabs-rail {
		display: block;
		position: sticky;
		top: var(--alv-sticky-top);
		padding-left: var(--alv-sp-3b);
		border-left: var(--alv-bd-thick) solid var(--alv-c-border);
	}

	.alovesinh-tabs-vertical > .alovesinh-tabs-rail > .alovesinh-tabs-bar {
		display: flex;
	}

	.alovesinh-tabs-vertical .alovesinh-tabs-panel {
		padding-block: 0;
	}

	.alovesinh-tabs-vertical > .alovesinh-tabs-panel .alovesinh-table-spec-label {
		display: inline-flex;
	}

	/* On the two-column desktop the four boxes always share one row: they drop side padding, not the fourth box. */
	.alovesinh-countdown .alovesinh-countdown-pair {
		min-width: 0;
	}

	.alovesinh-countdown .alovesinh-countdown-unit {
		min-width: var(--alv-countdown-unit-floor, 0);
		padding-inline: var(--alv-countdown-unit-pad-inline, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.alovesinh-anatomy-hint .alovesinh-anatomy-pin::after,
	.alovesinh-marquee-pass {
		animation: none;
	}

	/* With the travel gone the band can no longer reveal its far end, so it becomes a scroller and
		the pause button loses its job. */
	.alovesinh-marquee {
		overflow-x: auto;
	}

	.alovesinh-marquee-pause {
		display: none;
	}
}