/* 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 {
	/* Tablet follows the chosen count: left to the grid default, a one-column list opens into two at 980. */
	--alv-grid-cols-md: var( --alv-grid-cols, 1 );
	--alv-grid-cols-sm: 1;
	--alv-grid-gap: var( --alv-sp-2 );
	--alv-grid-width: 1080px;
	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;
}

.alovesinh-faq-question::-webkit-details-marker {
	display: none;
}

/* 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: 30px;
	height: 30px;
	border-radius: var( --alv-r-circle );
	color: var( --alv-c-text-2 );
	background: var( --alv-c-bg-light );
	transition: transform var( --alv-dur-2 ) ease, background var( --alv-dur-2 ) ease;
}

.alovesinh-faq-mark svg {
	width: 14px;
	height: 14px;
	stroke-width: 2.4;
	stroke-linejoin: miter;
}

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

.alovesinh-faq-answer {
	padding: 16px 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 );
}

@media ( max-width: 820px ) {

	.alovesinh-faq {
		--alv-grid-cols-md: 1;
	}
}

/* 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: #FAFAF7;
	--alv-anatomy-cover-bottom: #EDE8D8;
	--alv-anatomy-topper-top: #F5E8C8;
	--alv-anatomy-topper-bottom: #E8D4A0;
	--alv-anatomy-foam-top: #E6C896;
	--alv-anatomy-foam-bottom: #C9A466;
	--alv-anatomy-coil-light: #A87A48;
	--alv-anatomy-coil-dark: #9A6C3C;
	--alv-anatomy-base-top: #5C4226;
	--alv-anatomy-base-bottom: #3D2C18;

	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var( --alv-sp-5 );
	align-items: center;
	max-width: var( --alv-w-grid );
	margin: 0 auto;
}

.alovesinh-anatomy-figure {
	position: relative;
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1.05 / 1;
	padding: 8% 10%;
	border-radius: var( --alv-r-4 );
	background: linear-gradient( 160deg, var( --alv-c-brand-pale ) 0%, var( --alv-c-bg-warm ) 100% );
	box-shadow: var( --alv-sh-3 );
}

.alovesinh-anatomy-figure::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient( circle at 30% 30%, color-mix( in srgb, var( --alv-c-brand ) 6%, transparent ) 0%, transparent 50% );
}

.alovesinh-anatomy-stack {
	position: relative;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	width: 100%;
	aspect-ratio: 1.4 / 1;
	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 24px;
	border-bottom: var( --alv-bd-hairline ) solid color-mix( in srgb, var( --alv-c-black ) 6%, transparent );
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-bold );
	letter-spacing: var( --alv-tr-wide-2 );
	text-transform: uppercase;
	color: color-mix( in srgb, var( --alv-c-ink ) 50%, transparent );
}

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

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

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

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

.alovesinh-anatomy-band-coil {
	color: color-mix( in srgb, var( --alv-c-white ) 70%, transparent );
	background: repeating-linear-gradient( 90deg, var( --alv-anatomy-coil-light ) 0%, var( --alv-anatomy-coil-light ) 8%, var( --alv-anatomy-coil-dark ) 8%, var( --alv-anatomy-coil-dark ) 14% );
}

.alovesinh-anatomy-band-base {
	color: color-mix( in srgb, var( --alv-c-white ) 70%, transparent );
	background: linear-gradient( 180deg, var( --alv-anatomy-base-top ) 0%, var( --alv-anatomy-base-bottom ) 100% );
}

.alovesinh-anatomy-pin {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: 30px;
	height: 30px;
	border: 2px solid var( --alv-c-brand );
	border-radius: var( --alv-r-circle );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-extrabold );
	color: var( --alv-c-brand-deep );
	background: var( --alv-c-white );
	box-shadow: 0 6px 14px var( --alv-c-brand-veil );
	transform: translate( -50%, -50% );
	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"] {
	color: var( --alv-c-white );
	background: var( --alv-c-brand );
	transform: translate( -50%, -50% ) scale( 1.15 );
}

.alovesinh-anatomy-pin::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px 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 1.5s ease-out 3;
}

@keyframes alovesinh-anatomy-pulse {

	0% {
		opacity: 0.7;
		transform: scale( 1 );
	}

	100% {
		opacity: 0;
		transform: scale( 1.6 );
	}
}

.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: 24px 28px;
	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: linear-gradient( 135deg, color-mix( in srgb, var( --alv-c-brand ) 4%, transparent ) 0%, color-mix( in srgb, var( --alv-c-accent ) 2%, transparent ) 100% );
}

.alovesinh-anatomy-card-number {
	width: 36px;
	height: 36px;
	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-tint );
	transition: background var( --alv-dur-2 ) ease, color var( --alv-dur-2 ) ease;
}

.alovesinh-anatomy-card[aria-pressed="true"] .alovesinh-anatomy-card-number {
	color: var( --alv-c-white );
	background: var( --alv-c-brand );
}

/* 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: 3px;
	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: 6px;
	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: 3px 8px;
	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-accent );
	background: color-mix( in srgb, var( --alv-c-accent ) 8%, transparent );
}

.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( 90deg );
}

@media ( max-width: 820px ) {

	/* A card packs a number, three lines of copy and an arrow into one row; at the section gutter
		the copy column falls to 180px and the description takes a line more. */
	.alovesinh-anatomy {
		grid-template-columns: 1fr;
		gap: var( --alv-sp-4 );
		margin-inline: calc( var( --alv-w-gutter-tight ) - var( --alv-w-gutter ) );
	}

	.alovesinh-anatomy-figure {
		aspect-ratio: 1.4 / 1;
		padding: 6% 8%;
	}

	.alovesinh-anatomy-pin {
		width: 26px;
		height: 26px;
		font-size: var( --alv-fs-1 );
	}
}

.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: 18px 14px;
	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, 22px );
	height: var( --alv-tabs-icon, 22px );
	font-size: var( --alv-tabs-icon, 22px );
	line-height: 1;
}

.alovesinh-tabs-pill {
	--alv-tabs-icon: 18px;
}

.alovesinh-tabs-button[aria-selected="true"] {
	color: var( --alv-c-brand-deep );
	background: var( --alv-c-white );
	box-shadow: inset 0 -3px 0 var( --alv-c-brand );
}

.alovesinh-tabs-button:hover:not( [aria-selected="true"] ) {
	color: var( --alv-c-ink );
	background: color-mix( in srgb, var( --alv-c-brand ) 4%, transparent );
}

/* 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 .alovesinh-tabs-panel {
	display: block;
	padding-top: var( --alv-sp-3 );
}

.alovesinh-tabs.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. Two columns because the source design pairs a block of copy with a picture. */
.alovesinh-tabs-pill .alovesinh-tabs-panel,
.alovesinh-phan-loai-the.alovesinh-phan-loai-the {
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var( --alv-sp-4 );
	padding: var( --alv-sp-4 );
	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:not( [hidden] ),
.alovesinh-phan-loai-the.alovesinh-phan-loai-the {
	display: grid;
}

/* Below 820px 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. Left at two, a 360px phone gives each
	column at most 108px. */
@media ( max-width: 820px ) {

	.alovesinh-tabs-pill .alovesinh-tabs-panel,
	.alovesinh-phan-loai-the.alovesinh-phan-loai-the {
		grid-template-columns: 1fr;
		padding: var( --alv-sp-3 );
	}
}

.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: 14px 24px;
	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:hover:not( [aria-selected="true"] ) {
	border-color: var( --alv-c-brand );
	color: var( --alv-c-brand-deep );
	background: var( --alv-c-white );
}

.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 );
}

/* Below 560px the label is hidden from sight but kept in the tree: the icon is aria-hidden, so
	that text is the tab's only accessible name and display: none would delete it. */
@media ( max-width: 560px ) {

	.alovesinh-tabs-horizontal .alovesinh-tabs-button:has( svg, i ) span {
		position: absolute;
		overflow: hidden;
		width: 1px;
		height: 1px;
		white-space: nowrap;
		clip-path: inset( 50% );
	}
}

.alovesinh-tabs-vertical {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var( --alv-sp-5 );
	align-items: start;
}

/* 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 {
	position: sticky;
	top: var( --alv-tabs-index-top, var( --alv-sticky-top ) );
	padding-left: 24px;
	border-left: 2px solid var( --alv-c-border );
}

.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: 9px 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: 22px;
	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: color-mix( in srgb, var( --alv-c-brand ) 10%, transparent );
	box-shadow: none;
}

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

.alovesinh-tabs-vertical .alovesinh-tabs-button:hover:not( [aria-selected="true"] ) {
	color: var( --alv-c-brand-deep );
	background: color-mix( in srgb, var( --alv-c-brand ) 6%, transparent );
}

/* Named twice to outweigh the doubled class the shared panel rule carries: the strip form needs
	air under its buttons, while this form puts its index beside the panel and the gap would show
	up as the panel starting lower than the index it belongs to. */
.alovesinh-tabs.alovesinh-tabs-vertical .alovesinh-tabs-panel {
	padding-top: 0;
}

.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: 8px 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-tint );
}

.alovesinh-tabs-rail-link svg {
	stroke-width: 2.2;
}

.alovesinh-tabs-rail-link:hover {
	background: color-mix( in srgb, var( --alv-c-brand ) 14%, transparent );
}

/* Under 980px a side rail leaves the panel too narrow to read, so the strip stacks
	back on top of its panels. */
@media ( max-width: 980px ) {

	/* Stacked, the panel reads at the section gutter and loses a line to it; reaching back across
		the gutter returns the 16px the specification table needs to keep its rows on one line. */
	.alovesinh-tabs-vertical {
		grid-template-columns: 1fr;
		gap: var( --alv-sp-4 );
		margin-inline: calc( var( --alv-w-gutter-tight ) - var( --alv-w-gutter ) );
	}

	/* The index unpins and moves above the panel, and its rule moves from the side to the top:
		a sticky column that spans the whole width would follow the reader down the page. */
	.alovesinh-tabs-vertical .alovesinh-tabs-rail {
		position: relative;
		top: 0;
		padding-top: 24px;
		padding-left: 0;
		border-top: var( --alv-bd-hairline ) solid var( --alv-c-border );
		border-left: 0;
	}

	.alovesinh-tabs-vertical .alovesinh-tabs-bar {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 560px ) {

	.alovesinh-tabs-vertical .alovesinh-tabs-bar {
		grid-template-columns: 1fr;
	}
}

.alovesinh-before-after {
	position: relative;
	overflow: hidden;
	border-radius: var( --alv-r-3 );
	font-size: 0;
}

/* 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 ) );
}

.alovesinh-before-after-layer.alovesinh-before-after-layer img {
	width: 100%;
	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 );
}

/* Photographic washes, not palette colours: the warm pair is the colour of old soil under tungsten
	light and the cool pair is the colour of a rinsed fibre, which is why they are literals. */
.alovesinh-before-after-proof {
	--alv-before-after-scrim: linear-gradient( 135deg, rgb( 92 44 9 / 0.52 ) 0%, rgb( 44 22 7 / 0.62 ) 100% );
	--alv-before-after-scrim-after: linear-gradient( 135deg,
		color-mix( in srgb, var( --alv-c-success ) 18%, transparent ) 0%, rgb( 15 41 32 / 0.1 ) 100% );
}

/* Under the wash, not above it: the source design paints the tint over the whole half, label
	included, so lifting the label out of it would make the pair read differently from the demo. */
.alovesinh-before-after-label {
	position: absolute;
	top: 14px;
	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: 0.08em;
	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: 14px;
	background: var( --alv-c-danger );
}

.alovesinh-before-after-layer-after .alovesinh-before-after-label {
	right: 14px;
	background: var( --alv-c-success );
}

/* The seam is drawn on a box of its own and the range input is spread over the whole frame: a
	range maps the pointer across its own width, so a control 3px wide reads every press as an end
	of travel and the reader can never drag the seam. */
.alovesinh-before-after-seam {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var( --alv-reveal );
	width: 3px;
	background: var( --alv-c-white );
	box-shadow: 0 0 0 1px color-mix( in srgb, var( --alv-c-black ) 12%, transparent );
	transform: translateX( -50% );
	pointer-events: none;
}

.alovesinh-before-after-seam::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	border-radius: var( --alv-r-circle );
	background: var( --alv-c-white );
	box-shadow: 0 6px 18px color-mix( in srgb, var( --alv-c-black ) 25%, transparent );
	transform: translate( -50%, -50% );
}

/* 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: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	border-right: 2px solid var( --alv-c-ink );
	border-left: 2px solid var( --alv-c-ink );
	background: transparent;
	transform: translate( -50%, -50% );
	clip-path: polygon( 0 0, 3px 50%, 0 100%, 100% 100%, calc( 100% - 3px ) 50%, 100% 0 );
}

.alovesinh-before-after-handle {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	appearance: none;
	background: transparent;
	cursor: ew-resize;
	/* The handle covers the whole frame, 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;
}

/* A thumb one pixel wide keeps the value linear with the pointer: the browser lays the thumb out
	inside the track, so a wide thumb shifts every position by half its width. */
.alovesinh-before-after-handle::-webkit-slider-runnable-track {
	height: 100%;
	background: transparent;
}

.alovesinh-before-after-handle::-webkit-slider-thumb {
	appearance: none;
	width: 1px;
	height: 100%;
	border: 0;
	background: transparent;
	cursor: ew-resize;
}

.alovesinh-before-after-handle::-moz-range-track {
	height: 100%;
	background: transparent;
}

.alovesinh-before-after-handle::-moz-range-thumb {
	width: 1px;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: ew-resize;
}

/* Lifted out of the stacking flow: both blocks that carry a clock lay a glow over the whole
	section with ::after, and without this the figures sit under it. */
.alovesinh-countdown {
	--alv-row-wrap: wrap;
	position: relative;
	z-index: 1;
	justify-content: center;
	gap: var( --alv-sp-2 );
}

/* Translucent white, not a light grey: both blocks that carry a clock sit on a dark or orange
	background, so an opaque light box would punch a hole in the gradient behind it. */
.alovesinh-countdown-unit {
	display: grid;
	justify-items: center;
	gap: var( --alv-sp-1 );
	flex: 1;
	min-width: 90px;
	padding: var( --alv-sp-3 ) 16px;
	border: var( --alv-bd-hairline ) solid var( --alv-countdown-border,
		color-mix( in srgb, var( --alv-c-white ) 22%, transparent ) );
	border-radius: var( --alv-r-3 );
	text-align: center;
	background: var( --alv-countdown-bg,
		color-mix( in srgb, var( --alv-c-white ) 22%, transparent ) );
}

/* 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: 2ch;
	font-size: clamp( 36px, 4.5vw, 56px );
	font-weight: var( --alv-fw-extrabold );
	line-height: 1;
	letter-spacing: -0.03em;
	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,
		color-mix( in srgb, var( --alv-c-white ) 82%, transparent ) );
}

/* 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: 420px;
	padding: var( --alv-sp-3 );
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-4 );
	background: var( --alv-hotspot-map-bg,
		linear-gradient( 160deg, var( --alv-c-brand-faint ), var( --alv-c-bg-warm ) ) );
	box-shadow: var( --alv-sh-1 );
}

.alovesinh-hotspot-map.alovesinh-hotspot-map img,
.alovesinh-hotspot-map.alovesinh-hotspot-map svg {
	display: block;
	width: 100%;
	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.alovesinh-hotspot-map img {
	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: 14px;
	height: 14px;
	border-radius: var( --alv-r-circle );
	background: var( --alv-c-accent );
	box-shadow:
		0 0 0 4px color-mix( in srgb, var( --alv-c-accent ) 25%, transparent ),
		0 4px 10px color-mix( in srgb, var( --alv-c-accent ) 40%, transparent );
	transform: translate( -50%, -50% );
	cursor: pointer;
}

.alovesinh-hotspot-map-pin-label {
	position: absolute;
	bottom: calc( 100% + 10px );
	left: 50%;
	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( -50% );
	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;
}

@media ( max-width: 820px ) {

	.alovesinh-hotspot-map {
		min-height: 340px;
	}
}

.alovesinh-marquee {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
}

/* The track holds two identical passes and travels exactly half its width, so the
	second pass lands where the first began and the seam never shows. */
.alovesinh-marquee-track {
	display: flex;
	flex-shrink: 0;
	width: max-content;
	padding: 8px 0;
	animation: alovesinh-marquee-travel var( --alv-marquee-duration ) linear infinite;
}

/* 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. */
.alovesinh-marquee-pass {
	display: flex;
	flex-shrink: 0;
	min-width: 100cqi;
}

/* The spacing is a margin on each card, never a gap on the track: gap adds one extra space that
	belongs to neither pass, so the track stops being exactly two cycles wide and the loop jumps. */
.alovesinh-marquee-item {
	display: inline-flex;
	align-items: center;
	flex: 0 0 var( --alv-marquee-item-width, 360px );
	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 {
	display: block;
	white-space: normal;
}

@keyframes alovesinh-marquee-travel {

	to {
		transform: translateX( -50% );
	}
}

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

.alovesinh-marquee-pause {
	display: block;
	flex-shrink: 0;
	margin: 0 0 var( --alv-sp-2 ) auto;
	padding: 6px 14px;
	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;
}

@media ( max-width: 560px ) {

	.alovesinh-marquee-track {
		--alv-marquee-duration: 45s;
	}

	.alovesinh-marquee-item {
		--alv-marquee-item-width: 300px;
	}

	.alovesinh-marquee-item-review {
		--alv-card-pad: var( --alv-sp-3 );
	}

	.alovesinh-countdown-phone-two .alovesinh-countdown-unit {
		flex: 1 1 calc( 50% - 8px );
		min-width: 0;
		padding: 18px 14px;
	}
}

/* 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. */
.alovesinh-persona-picker {
	--alv-grid-width: 1132px;
}

/* The gap below the cards belongs here, not above the panel: the panel starts hidden, and a hidden
	box takes its margin out of the flow with it, so the block would shrink by this much until the
	reader pressed a card. */
.alovesinh-persona-picker-choices {
	margin-bottom: 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 );
	max-width: var( --alv-grid-width );
	margin-inline: auto;
	padding: 32px 36px;
	border-radius: var( --alv-r-4 );
	background: linear-gradient( 135deg, var( --alv-c-ink ) 0%, var( --alv-c-ink-blue ) 100% );
	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( 8px );
	}

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

.alovesinh-persona-picker-result-text {
	flex: 1;
	min-width: 260px;
}

.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: 14px;
}

/* 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 .alovesinh-tabs-panel {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

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

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

.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 color-mix( in srgb, var( --alv-c-white ) 6%, transparent );
}

@media ( prefers-reduced-motion: reduce ) {

	.alovesinh-anatomy-hint .alovesinh-anatomy-pin::after,
	.alovesinh-marquee-track {
		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;
	}
}