/*
 * AverionHair Elementor Widgets.
 *
 * Every token falls back to the child theme's own --avh-* value first and a literal second.
 * Headings and controls state their own colours: an inherited colour loses to any theme rule
 * matching the element itself, and a bare <button> becomes the theme's gold pill.
 *
 * Columns: --avh-ew-cols is the number of cards in view. Elementor's responsive control writes it
 * directly (at higher specificity than anything here); a shortcode supplies --avh-ew-cols-d/-t/-m
 * inline and the breakpoints below choose between them. Decimals are allowed everywhere, which is
 * why neither layout uses repeat(): a fractional count in repeat() is invalid, and an invalid value
 * there does not fall back - it collapses every column into one.
 */

.avh-ew {
	--avh-ew-ink: var(--avh-black, #191410);
	--avh-ew-pure: var(--avh-pure, #fffdf9);
	--avh-ew-cream: var(--avh-cream, #f7f1e6);
	--avh-ew-nude: var(--avh-nude, #ece0cf);
	--avh-ew-gold: var(--avh-gold, #c29a4f);
	--avh-ew-bronze: var(--avh-bronze, #9d7b43);
	--avh-ew-muted: color-mix(in srgb, var(--avh-ew-ink) 58%, var(--avh-ew-pure));
	--avh-ew-line: color-mix(in srgb, var(--avh-ew-ink) 14%, var(--avh-ew-pure));
	--avh-ew-font-heading: var(--avh-font-heading, "Fraunces", Georgia, "Times New Roman", serif);
	--avh-ew-font-body: var(--avh-font-body, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif);
	--avh-ew-ease: var(--avh-ease-luxe, cubic-bezier(0.16, 1, 0.3, 1));

	--avh-ew-cols: var(--avh-ew-cols-d, 4);
	--avh-ew-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
	--avh-ew-radius: 1.25rem;
	--avh-ew-ratio: 4 / 5;
	--avh-ew-shade: var(--avh-ew-ink);
	--avh-ew-shade-strength: 78%;
	--avh-ew-arrow: var(--avh-ew-ink);
	--avh-ew-arrow-bg: var(--avh-ew-pure);

	/* Width of one card: the row minus the gaps between the cards in view, shared out. */
	--avh-ew-card: calc((100% - (var(--avh-ew-cols) - 1) * var(--avh-ew-gap)) / var(--avh-ew-cols));

	position: relative;
	box-sizing: border-box;
	width: 100%;
	/*
	 * Its own content width and side gutters: dropped into a full-width container with no padding
	 * (as on the live home page), the heading and the first card otherwise sit on the screen edge.
	 */
	max-width: var(--avh-ew-max, 1290px);
	margin-inline: auto;
	padding-inline: var(--avh-ew-pad, clamp(1rem, 0.5rem + 2vw, 2rem));
	color: var(--avh-ew-ink);
	font-family: var(--avh-ew-font-body);
}

/*
 * Elementor lays a container's widgets out as flex items, and with "align items: centre" a widget
 * is only as wide as its content. A grid sized in percentages HAS no content width, so the whole
 * widget shrank to a column of thumbnails. Claim the row - unless somebody set a custom width.
 */
.e-con > .elementor-widget-avh_categories:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial),
.e-con > .e-con-inner > .elementor-widget-avh_categories:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial),
.e-con > .elementor-widget-avh_product_carousel:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial),
.e-con > .e-con-inner > .elementor-widget-avh_product_carousel:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial) {
	align-self: stretch;
	width: 100%;
}

/*
 * Elementor's own `.elementor img { height: auto; max-width: 100% }` loads after the Product Card
 * stylesheet and wins the tie, so a card photo stopped filling its 3:4 frame and sat in the top of
 * it. Only the sizing is restated - object-fit stays the card's (a placeholder is contained).
 */
.avh-ew .avh-ew-track .avh-pc__media img {
	width: 100%;
	max-width: none;
	height: 100%;
}

/* Elementor's default breakpoints. */
@media (max-width: 1024px) {
	.avh-ew {
		--avh-ew-cols: var(--avh-ew-cols-t, 3);
	}
}

@media (max-width: 767px) {
	.avh-ew {
		--avh-ew-cols: var(--avh-ew-cols-m, 2);
	}
}

.avh-ew *,
.avh-ew *::before,
.avh-ew *::after {
	box-sizing: border-box;
}

.avh-ew [hidden] {
	display: none !important;
}

/*
 * Our icons state their size and fill: Jeg Elementor Kit's `.elementor-element svg { width: 1em;
 * fill: currentcolor }` would otherwise size them off the font and fill the open chevrons solid.
 */
.avh-ew.avh-ew .avh-ew-arrow svg {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
}

.avh-ew.avh-ew .avh-ew-more svg,
.avh-ew.avh-ew .avh-ew-cat__cta svg {
	flex: none;
	width: 14px;
	height: 14px;
	fill: none;
}

/* --- Heading row ----------------------------------------------------------------------------- */

.avh-ew-head {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.avh-ew-head__side {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.25rem;
	align-items: center;
	margin-left: auto;
}

/* Centred: the heading stands alone in the middle, the link and arrows under it. */
.avh-ew-head--center .avh-ew-head {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.avh-ew-head--center .avh-ew-head__side {
	margin-left: 0;
}

.avh-ew .avh-ew-eyebrow {
	margin: 0 0 0.65rem;
	color: var(--avh-ew-bronze);
	font-family: var(--avh-ew-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Doubled class: themes style h2/h3 directly. */
.avh-ew.avh-ew .avh-ew-title {
	margin: 0;
	padding: 0;
	color: var(--avh-ew-ink);
	font-family: var(--avh-ew-font-heading);
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: none;
}

.avh-ew .avh-ew-more {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	color: var(--avh-ew-ink);
	font-family: var(--avh-ew-font-body);
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--avh-ew-gold);
	text-underline-offset: 5px;
	white-space: nowrap;
}

.avh-ew .avh-ew-more:hover {
	color: var(--avh-ew-bronze);
}

.avh-ew .avh-ew-more svg {
	transition: transform 300ms var(--avh-ew-ease);
}

.avh-ew .avh-ew-more:hover svg {
	transform: translateX(3px);
}

.avh-ew-nav {
	display: flex;
	gap: 0.5rem;
}

.avh-ew .avh-ew-arrow {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--avh-ew-line);
	border-radius: 50%;
	background: var(--avh-ew-arrow-bg);
	box-shadow: none;
	color: var(--avh-ew-arrow);
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms var(--avh-ew-ease), color 200ms var(--avh-ew-ease), border-color 200ms var(--avh-ew-ease), opacity 200ms var(--avh-ew-ease);
}

.avh-ew .avh-ew-arrow:hover:not(:disabled),
.avh-ew .avh-ew-arrow:focus-visible {
	border-color: var(--avh-ew-arrow);
	background: var(--avh-ew-arrow);
	color: var(--avh-ew-arrow-bg);
}

.avh-ew .avh-ew-arrow:focus-visible {
	outline: 2px solid var(--avh-ew-gold);
	outline-offset: 2px;
}

.avh-ew .avh-ew-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* --- The two layouts ------------------------------------------------------------------------- */

.avh-ew .avh-ew-grid,
.avh-ew .avh-ew-track {
	margin: 0;
	padding: 0;
	list-style: none;
}

.avh-ew .avh-ew-grid > li,
.avh-ew .avh-ew-track > li {
	margin: 0;
	list-style: none;
}

.avh-ew .avh-ew-grid > li::before,
.avh-ew .avh-ew-track > li::before,
.avh-ew .avh-ew-grid > li::marker,
.avh-ew .avh-ew-track > li::marker {
	content: none;
}

/*
 * Grid: wraps, and a short last row is centred - six categories in rows of four read as 4 + a
 * centred 2, not 4 + a ragged 2 hanging off the left.
 */
.avh-ew .avh-ew-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--avh-ew-gap);
	justify-content: center;
}

.avh-ew .avh-ew-grid > li {
	flex: 0 0 var(--avh-ew-card);
	width: var(--avh-ew-card);
	min-width: 0;
}

/*
 * Carousel: a list that scrolls sideways natively and snaps to each card - it swipes, scrolls on a
 * trackpad and answers the arrow keys before any script has run. Padding above and below gives a
 * card's hover lift and shadow room, since a scrolling box clips on both axes.
 */
.avh-ew .avh-ew-track {
	display: grid;
	grid-auto-columns: var(--avh-ew-card);
	grid-auto-flow: column;
	gap: var(--avh-ew-gap);
	margin-block: -0.75rem -1.25rem;
	padding-block: 0.75rem 1.25rem;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.avh-ew .avh-ew-track::-webkit-scrollbar {
	display: none;
}

.avh-ew .avh-ew-track:focus-visible {
	outline: 2px solid var(--avh-ew-gold);
	outline-offset: 4px;
	border-radius: 0.5rem;
}

.avh-ew .avh-ew-track > li {
	min-width: 0;
	scroll-snap-align: start;
}

/* Dragging with a mouse: snapping would fight the hand, and a drag must not end in a click. */
.avh-ew .avh-ew-track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

.avh-ew .avh-ew-track.is-dragging a,
.avh-ew .avh-ew-track.is-dragging img {
	pointer-events: none;
}

.avh-ew .avh-ew-track img {
	-webkit-user-drag: none;
}

/* Product cards from the Product Card plugin own their own look; the slide only fills its cell. */
.avh-ew .avh-ew-track > li.avh-pc {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

/* --- Below a carousel ------------------------------------------------------------------------ */

.avh-ew-foot {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-top: clamp(1.5rem, 1rem + 1vw, 2.25rem);
}

.avh-ew-progress {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--avh-ew-line);
}

.avh-ew-progress > span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 25%;
	border-radius: 2px;
	background: var(--avh-ew-ink);
	transition: left 250ms var(--avh-ew-ease), width 250ms var(--avh-ew-ease);
}

.avh-ew .avh-ew-play {
	flex: none;
	height: 2rem;
	margin: 0 0 0 auto;
	padding: 0 0.9rem;
	border: 1px solid var(--avh-ew-line);
	border-radius: 999px;
	background: var(--avh-ew-pure);
	box-shadow: none;
	color: var(--avh-ew-ink);
	font-family: var(--avh-ew-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

.avh-ew .avh-ew-play:hover,
.avh-ew .avh-ew-play:focus-visible {
	border-color: var(--avh-ew-ink);
}

/* --- Category tiles -------------------------------------------------------------------------- */

.avh-ew .avh-ew-cat {
	position: relative;
	display: block;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: var(--avh-ew-ratio);
	border-radius: var(--avh-ew-radius);
	background: var(--avh-ew-nude);
	box-shadow: 0 2px 10px rgba(25, 20, 16, 0.06);
	color: var(--avh-ew-pure);
	text-decoration: none;
	transition: box-shadow 500ms var(--avh-ew-ease), transform 500ms var(--avh-ew-ease);
}

.avh-ew .avh-ew-cat:hover {
	box-shadow: 0 18px 40px -12px rgba(25, 20, 16, 0.28);
	transform: translateY(-3px);
}

.avh-ew .avh-ew-cat:focus-visible {
	outline: 2px solid var(--avh-ew-gold);
	outline-offset: 3px;
}

.avh-ew-cat__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

/* Theme rules on img (max-width, height:auto, a radius) would stop it filling the tile. */
.avh-ew.avh-ew .avh-ew-cat__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform 900ms var(--avh-ew-ease);
}

.avh-ew .avh-ew-cat:hover .avh-ew-cat__img {
	transform: scale(1.06);
}

/* No photo at all, not even a borrowed one: the storefront's monogram on sand, a lighter shade. */
.avh-ew .avh-ew-cat.is-mono {
	--avh-ew-shade-strength: 62%;
}

.avh-ew .avh-ew-cat.is-mono .avh-ew-cat__mono {
	place-items: start center;
	padding-top: 28%;
}

.avh-ew-cat__mono {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--avh-ew-pure) 55%, var(--avh-ew-nude)), var(--avh-ew-nude) 70%);
	color: var(--avh-ew-gold);
	font-family: var(--avh-ew-font-heading);
	font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
	letter-spacing: 0.06em;
}

/*
 * The shade keeps white type readable on a pale photograph. It is a gradient from the bottom only,
 * so the top of the picture stays untouched.
 */
.avh-ew-cat__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--avh-ew-shade) var(--avh-ew-shade-strength), transparent) 0%,
		color-mix(in srgb, var(--avh-ew-shade) calc(var(--avh-ew-shade-strength) * 0.4), transparent) 40%,
		transparent 68%
	);
	pointer-events: none;
}

.avh-ew-cat__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	gap: 0.55rem;
	padding: clamp(1rem, 0.7rem + 1vw, 1.6rem);
}

.avh-ew.avh-ew .avh-ew-cat__name {
	margin: 0;
	padding: 0;
	color: var(--avh-ew-pure);
	font-family: var(--avh-ew-font-heading);
	font-size: clamp(1.2rem, 0.95rem + 0.9vw, 1.7rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-transform: none;
	text-wrap: balance;
}

.avh-ew-cat__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	align-items: center;
	justify-content: space-between;
	color: color-mix(in srgb, var(--avh-ew-pure) 84%, var(--avh-ew-ink));
	font-size: 0.8rem;
	line-height: 1.3;
}

.avh-ew-cat__cta {
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.avh-ew-cat__cta svg {
	transition: transform 300ms var(--avh-ew-ease);
}

.avh-ew .avh-ew-cat:hover .avh-ew-cat__cta svg {
	transform: translateX(3px);
}

/* Small tiles (two on a phone): drop the call to action, the whole tile is the link anyway. */
@media (max-width: 480px) {
	.avh-ew-grid .avh-ew-cat__cta {
		display: none;
	}
}

/* --- Fallback product card (only without the Product Card plugin) ---------------------------- */

.avh-ew .avh-ew-card__link {
	display: grid;
	gap: 0.4rem;
	color: var(--avh-ew-ink);
	text-decoration: none;
}

.avh-ew .avh-ew-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	margin-bottom: 0.5rem;
	border-radius: var(--avh-ew-radius);
	background: var(--avh-ew-nude);
}

.avh-ew.avh-ew .avh-ew-card__media img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 700ms var(--avh-ew-ease);
}

.avh-ew .avh-ew-card__link:hover .avh-ew-card__media img {
	transform: scale(1.05);
}

.avh-ew .avh-ew-card__name {
	font-family: var(--avh-ew-font-heading);
	font-size: 1.05rem;
	line-height: 1.3;
}

.avh-ew .avh-ew-card__price {
	color: var(--avh-ew-muted);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

/* --- The Averion System --------------------------------------------------------------------- */

.avh-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.avh-ew .avh-sys__num {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid color-mix(in srgb, var(--avh-ew-gold) 55%, var(--avh-ew-pure));
	border-radius: 50%;
	background: var(--avh-ew-pure);
	color: var(--avh-ew-bronze);
	font-family: var(--avh-ew-font-heading);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Buttons and links that act as buttons state everything: a bare button here becomes the theme's
   gold pill, and an ajax add-to-cart link is restyled by Blocksy's [class*=add_to_cart_button]. */
.avh-ew.avh-ew .avh-sys__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	margin: 0;
	padding: 0 1.6rem;
	border: 1px solid var(--avh-ew-ink);
	border-radius: 999px;
	background: var(--avh-ew-ink);
	box-shadow: none;
	color: var(--avh-ew-pure);
	font-family: var(--avh-ew-font-body);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 200ms var(--avh-ew-ease), color 200ms var(--avh-ew-ease);
}

.avh-ew.avh-ew .avh-sys__buy:hover,
.avh-ew.avh-ew .avh-sys__buy:focus-visible {
	border-color: var(--avh-ew-gold);
	background: var(--avh-ew-gold);
	color: var(--avh-ew-ink);
}

.avh-ew.avh-ew .avh-sys__buy.loading {
	opacity: 0.6;
}

/*
 * Once added, the button says so itself (WooCommerce sets .added), and the "Added to your bag"
 * toast from the Navbar plugin carries the way to the bag - so WooCommerce's own "View cart" link,
 * which it appends beside the button, would be a third message saying the same thing.
 */
.avh-ew.avh-ew .avh-sys__buy.added::after {
	content: "";
	width: 0.45rem;
	height: 0.8rem;
	margin: -0.2rem 0 0 0.6rem;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.avh-ew .avh-sys__buy + .added_to_cart {
	display: none;
}

/* Intro */
.avh-sys__intro {
	max-width: 46rem;
	margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.5rem);
	text-align: center;
}

.avh-ew.avh-ew .avh-sys__title {
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
}

.avh-sys__lede {
	margin-top: 1.1rem;
	color: var(--avh-ew-muted);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
	line-height: 1.75;
}

.avh-sys__lede p {
	margin: 0;
}

/* The stage: a single column until the stepper takes over. */
.avh-sys__stage {
	display: grid;
	gap: 1rem;
}

.avh-sys.is-tabs .avh-sys__stage {
	grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: start;
}

/* The step list (stepper only) */
.avh-sys__rail {
	position: relative;
	display: grid;
	gap: 0.35rem;
}

.avh-sys__rail::before {
	content: "";
	position: absolute;
	top: 1.6rem;
	bottom: 1.6rem;
	left: calc(0.75rem + 1.2rem - 0.5px);
	width: 1px;
	background: var(--avh-ew-line);
}

.avh-ew.avh-ew .avh-sys__tab {
	position: relative;
	display: flex;
	gap: 0.9rem;
	align-items: center;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0.7rem 0.75rem;
	border: 1px solid transparent;
	border-radius: 1rem;
	background: transparent;
	box-shadow: none;
	color: var(--avh-ew-ink);
	font-family: var(--avh-ew-font-body);
	letter-spacing: 0;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: background-color 200ms var(--avh-ew-ease), border-color 200ms var(--avh-ew-ease);
}

.avh-ew.avh-ew .avh-sys__tab:hover {
	background: color-mix(in srgb, var(--avh-ew-nude) 45%, var(--avh-ew-pure));
}

.avh-ew.avh-ew .avh-sys__tab.is-current {
	border-color: var(--avh-ew-line);
	background: var(--avh-ew-pure);
	box-shadow: 0 2px 10px rgba(25, 20, 16, 0.06);
}

.avh-ew.avh-ew .avh-sys__tab:focus-visible {
	outline: 2px solid var(--avh-ew-gold);
	outline-offset: 2px;
}

.avh-ew .avh-sys__tab.is-current .avh-sys__num {
	border-color: var(--avh-ew-ink);
	background: var(--avh-ew-ink);
	color: var(--avh-ew-pure);
}

.avh-sys__tab-text {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.avh-sys__tab-name {
	font-family: var(--avh-ew-font-heading);
	font-size: 1.02rem;
}

.avh-sys__tab-role {
	color: var(--avh-ew-muted);
	font-size: 0.76rem;
}

/* A step */
.avh-sys__panel {
	border: 1px solid var(--avh-ew-line);
	border-radius: var(--avh-ew-radius);
	background: var(--avh-ew-pure);
}

.avh-sys.is-tabs .avh-sys__panel {
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	box-shadow: 0 18px 40px -24px rgba(25, 20, 16, 0.25);
}

.avh-ew.avh-ew .avh-sys__head {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.avh-ew.avh-ew .avh-sys__toggle {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 1.1rem 1.25rem;
	border: 0;
	border-radius: var(--avh-ew-radius);
	background: transparent;
	box-shadow: none;
	color: var(--avh-ew-ink);
	font-family: var(--avh-ew-font-body);
	letter-spacing: 0;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	opacity: 1;
}

/* Without the script (and in the stepper) the header is a heading, not a control. */
.avh-ew.avh-ew .avh-sys__toggle:disabled {
	cursor: default;
}

.avh-sys.is-acc .avh-sys__toggle {
	cursor: pointer;
}

.avh-ew.avh-ew .avh-sys__toggle:focus-visible {
	outline: 2px solid var(--avh-ew-gold);
	outline-offset: -2px;
}

.avh-sys__head-text {
	display: grid;
	flex: 1 1 auto;
	gap: 0.15rem;
	min-width: 0;
}

.avh-sys__name {
	font-family: var(--avh-ew-font-heading);
	font-size: 1.15rem;
}

.avh-sys__role {
	color: var(--avh-ew-muted);
	font-size: 0.8rem;
}

.avh-ew.avh-ew .avh-sys__chev {
	display: none;
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	transition: transform 250ms var(--avh-ew-ease);
}

.avh-sys.is-acc .avh-sys__chev {
	display: block;
}

.avh-sys.is-acc .avh-sys__toggle[aria-expanded="true"] .avh-sys__chev {
	transform: rotate(180deg);
}

.avh-sys.is-tabs .avh-sys__head {
	display: none;
}

.avh-sys__body {
	padding: 0 1.25rem 1.5rem;
}

.avh-sys.is-tabs .avh-sys__body {
	padding: 0;
}

.avh-sys__grid {
	display: grid;
	gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

@media (min-width: 900px) {
	.avh-sys__grid.has-img {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
		align-items: start;
	}
}

.avh-sys__figure {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: calc(var(--avh-ew-radius) - 0.25rem);
	background: var(--avh-ew-nude);
}

.avh-ew.avh-ew .avh-sys__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.avh-sys__copy {
	display: grid;
	gap: 1rem;
	align-content: start;
}

.avh-ew .avh-sys__copy p {
	margin: 0;
}

.avh-ew .avh-sys__step-label {
	color: var(--avh-ew-bronze);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.avh-ew .avh-sys__panel-name {
	display: none;
	color: var(--avh-ew-ink);
	font-family: var(--avh-ew-font-heading);
	font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.avh-sys.is-tabs .avh-sys__panel-name {
	display: block;
}

.avh-ew .avh-sys__what {
	color: var(--avh-ew-ink);
	font-size: 1.08rem;
	line-height: 1.65;
}

.avh-sys__science {
	display: grid;
	gap: 0.6rem;
	padding: 1.1rem 1.25rem;
	border-left: 2px solid var(--avh-ew-gold);
	border-radius: 0 0.9rem 0.9rem 0;
	background: color-mix(in srgb, var(--avh-ew-nude) 35%, var(--avh-ew-pure));
	color: color-mix(in srgb, var(--avh-ew-ink) 82%, var(--avh-ew-pure));
	font-size: 0.95rem;
	line-height: 1.7;
}

.avh-ew .avh-sys__phase {
	color: var(--avh-ew-bronze);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.avh-ew .avh-sys__result strong {
	color: var(--avh-ew-ink);
	font-weight: 600;
}

.avh-sys__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.5rem;
}

.avh-sys__actions:empty {
	display: none;
}

.avh-sys__pager {
	display: flex;
	gap: 0.5rem;
}

.avh-ew.avh-ew .avh-sys__nav {
	min-height: 2.5rem;
	margin: 0;
	padding: 0 1.1rem;
	border: 1px solid var(--avh-ew-line);
	border-radius: 999px;
	background: var(--avh-ew-pure);
	box-shadow: none;
	color: var(--avh-ew-ink);
	font-family: var(--avh-ew-font-body);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

.avh-ew.avh-ew .avh-sys__nav:hover:not(:disabled),
.avh-ew.avh-ew .avh-sys__nav:focus-visible {
	border-color: var(--avh-ew-ink);
}

.avh-ew.avh-ew .avh-sys__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* The cycle */
.avh-sys__cycle {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: center;
	margin-top: clamp(3rem, 2rem + 3vw, 5rem);
	padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	border-radius: var(--avh-ew-radius);
	background: var(--avh-ew-ink);
	color: var(--avh-ew-pure);
}

@media (min-width: 900px) {
	.avh-sys__cycle {
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
	}
}

.avh-sys__cycle .avh-ew-eyebrow {
	color: var(--avh-ew-gold);
}

.avh-ew .avh-sys__cycle-title {
	margin: 0;
	color: var(--avh-ew-pure);
	font-family: var(--avh-ew-font-heading);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	line-height: 1.15;
}

.avh-ew .avh-sys__cycle-text {
	max-width: 32rem;
	margin: 1rem 0 0;
	color: color-mix(in srgb, var(--avh-ew-pure) 78%, var(--avh-ew-ink));
	line-height: 1.7;
}

/* Jeg Elementor Kit sizes every svg at 1em; the ring states its own size. */
.avh-ew.avh-ew .avh-sys__ring {
	display: block;
	width: 100%;
	max-width: 22rem;
	height: auto;
	margin: 0 auto;
	fill: none;
	overflow: visible;
}

.avh-sys__ring-track {
	fill: none;
	stroke: color-mix(in srgb, var(--avh-ew-gold) 55%, var(--avh-ew-ink));
	stroke-width: 1.5;
	stroke-dasharray: 3 5;
}

.avh-sys__node circle {
	fill: var(--avh-ew-ink);
	stroke: var(--avh-ew-gold);
	stroke-width: 1.5;
	transition: fill 200ms var(--avh-ew-ease);
}

.avh-sys__node text {
	fill: var(--avh-ew-pure);
	font-family: var(--avh-ew-font-heading);
	font-size: 15px;
}

.avh-sys__node.is-release circle {
	stroke-dasharray: 4 3;
}

.avh-sys__node:hover circle,
.avh-sys__node:focus-visible circle,
.avh-sys__node.is-current circle {
	fill: var(--avh-ew-gold);
}

.avh-sys__node:hover text,
.avh-sys__node:focus-visible text,
.avh-sys__node.is-current text {
	fill: var(--avh-ew-ink);
}

.avh-sys__node:focus-visible {
	outline: none;
}

.avh-sys__ring-label {
	fill: color-mix(in srgb, var(--avh-ew-pure) 70%, var(--avh-ew-ink));
	font-family: var(--avh-ew-font-body);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* The kit */
.avh-sys__kit {
	display: grid;
	gap: clamp(1.25rem, 1rem + 2vw, 3rem);
	align-items: center;
	margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--avh-ew-line);
	border-radius: var(--avh-ew-radius);
	background: var(--avh-ew-pure);
}

@media (min-width: 720px) {
	.avh-sys__kit {
		grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr);
	}
}

.avh-sys__kit-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: calc(var(--avh-ew-radius) - 0.25rem);
	background: var(--avh-ew-nude);
}

.avh-ew.avh-ew .avh-sys__kit-media img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.avh-sys__kit-copy {
	display: grid;
	gap: 0.6rem;
	justify-items: start;
}

.avh-ew .avh-sys__kit-copy p {
	margin: 0;
}

.avh-ew .avh-sys__kit-name a {
	color: var(--avh-ew-ink);
	font-family: var(--avh-ew-font-heading);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
	line-height: 1.15;
	text-decoration: none;
}

.avh-ew .avh-sys__kit-price {
	color: var(--avh-ew-ink);
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
}

.avh-sys__kit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	margin-top: 0.6rem;
}

/* The strip (product page) */
.avh-sys-strip {
	margin-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.avh-ew.avh-ew .avh-sys-strip__title {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
}

.avh-ew .avh-sys-strip__list {
	display: grid;
	grid-auto-columns: minmax(13rem, 1fr);
	grid-auto-flow: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0 0 0.5rem;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.avh-ew .avh-sys-strip__list > li {
	margin: 0;
	scroll-snap-align: start;
}

.avh-ew .avh-sys-strip__list > li::before,
.avh-ew .avh-sys-strip__list > li::marker {
	content: none;
}

.avh-ew .avh-sys-strip__card {
	display: grid;
	gap: 0.6rem;
	align-content: start;
	height: 100%;
	padding: 1.1rem;
	border: 1px solid var(--avh-ew-line);
	border-radius: 1rem;
	background: var(--avh-ew-pure);
	color: var(--avh-ew-ink);
	text-decoration: none;
	transition: border-color 200ms var(--avh-ew-ease), transform 300ms var(--avh-ew-ease);
}

.avh-ew a.avh-sys-strip__card:hover {
	border-color: var(--avh-ew-gold);
	transform: translateY(-2px);
}

.avh-ew a.avh-sys-strip__card:focus-visible {
	outline: 2px solid var(--avh-ew-gold);
	outline-offset: 2px;
}

.avh-sys-strip__name {
	font-family: var(--avh-ew-font-heading);
	font-size: 1.05rem;
	line-height: 1.25;
}

.avh-sys-strip__what {
	color: var(--avh-ew-muted);
	font-size: 0.82rem;
	line-height: 1.5;
}

/* The teaser (home page) */
.avh-sys-teaser {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2.5vw, 4rem);
	align-items: center;
}

@media (min-width: 900px) {
	.avh-sys-teaser {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.avh-sys-teaser__copy {
	display: grid;
	gap: 1rem;
	justify-items: start;
}

.avh-ew .avh-sys-teaser__copy .avh-ew-eyebrow {
	margin: 0;
}

.avh-ew .avh-sys-teaser__lede {
	max-width: 34rem;
	margin: 0;
	color: var(--avh-ew-muted);
	font-size: 1.05rem;
	line-height: 1.7;
}

.avh-ew .avh-sys-teaser__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.avh-ew .avh-sys-teaser__list > li {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	margin: 0;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--avh-ew-line);
}

.avh-ew .avh-sys-teaser__list > li::before,
.avh-ew .avh-sys-teaser__list > li::marker {
	content: none;
}

.avh-sys-teaser__name {
	font-family: var(--avh-ew-font-heading);
	font-size: 1.1rem;
}

/* --- Editor-only notice ---------------------------------------------------------------------- */

.avh-ew-empty {
	padding: 1.25rem 1.5rem;
	border: 1px dashed #c29a4f;
	border-radius: 0.75rem;
	background: #f7f1e6;
	color: #191410;
	font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.9rem;
	line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
	.avh-ew .avh-ew-track {
		scroll-behavior: auto;
	}

	.avh-ew *,
	.avh-ew *::before,
	.avh-ew *::after {
		transition: none !important;
	}
}