@charset "UTF-8";
/*
 * athena/product-story
 *
 * Default styles = final story state (no JS, reduced motion, first frame).
 * `.is-animating` + `.reached-<beat>` classes (view.js) stage the sequence.
 * Only opacity, transform, background-size and stroke-dashoffset animate.
 */

.athena-story {
	--story-radius: 24px;
	--story-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--story-success: #0b7a57;
	/* Studio background of the bundled product photos, in both colour schemes. */
	--story-packshot: #ece8e5;
	position: relative;
	display: grid;
	gap: 1rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	min-width: 0;
}

:root[data-color-scheme="dark"] .athena-story {
	--story-success: #5fd8aa;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-color-scheme="light"]) .athena-story {
		--story-success: #5fd8aa;
	}
}

.athena-story p {
	margin: 0;
}

.athena-story ul,
.athena-story ol,
.athena-story dl {
	margin: 0;
	padding: 0;
	list-style: none;
}

.athena-story svg {
	display: block;
	flex: none;
}

/* ── Stage & panel ─────────────────────────────────────────────── */

.athena-story__stage {
	position: relative;
	min-width: 0;
}

.athena-story--hero .athena-story__stage {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0;
	align-items: center;
}

/* The mode rail floats over the panel's left edge. */
.athena-story--hero .athena-story__modes {
	margin-right: -1.6rem;
}

.athena-story--hero .athena-story__panel {
	padding-left: calc(clamp(1rem, 2vw, 1.5rem) + 1.6rem);
}

.athena-story__panel {
	position: relative;
	z-index: 1;
	min-width: 0;
	padding: clamp(1rem, 2vw, 1.5rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--story-radius);
	background: var(--wp--preset--color--raised);
	box-shadow: var(--athena-shadow-float);
}

.athena-story__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.athena-story--hero .athena-story__top {
	margin-bottom: 0.75rem;
}

.athena-story__brand {
	flex: none;
}

.athena-story__brand img {
	display: block;
	width: 110px;
	height: 24px;
}

.athena-story__brand-dark {
	display: none !important;
}

:root[data-color-scheme="dark"] .athena-story__brand-light {
	display: none !important;
}

:root[data-color-scheme="dark"] .athena-story__brand-dark {
	display: block !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-color-scheme="light"]) .athena-story__brand-light {
		display: none !important;
	}

	:root:not([data-color-scheme="light"]) .athena-story__brand-dark {
		display: block !important;
	}
}

.athena-story__tag {
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

/* ── Modes (hero) ──────────────────────────────────────────────── */

.athena-story__modes {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 0.25rem;
	padding: 0.35rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	background: var(--wp--preset--color--raised);
	box-shadow: var(--athena-shadow-raised);
}

.athena-story__mode {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.3rem;
	box-sizing: border-box;
	width: 4.5rem;
	margin: 0;
	padding: calc(0.6rem - 3px) calc(0.3rem - 3px);
	/* The rail has no padding of its own (the list reset wins), so a clear
	   border keeps hover and selected backgrounds inside the rail's outline. */
	border: 3px solid transparent;
	border-radius: 16px;
	background: transparent;
	background-clip: padding-box;
	color: var(--wp--preset--color--muted);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	transition: color 0.25s ease, background-color 0.25s ease;
}

button.athena-story__mode {
	cursor: pointer;
}

/* Hover devices only: on touch, :hover sticks to the last tapped mode, which then
   kept a second rounded box after the demo moved on to the next mode. */
@media (hover: hover) {
	button.athena-story__mode:hover {
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--contrast);
	}
}

/* Inside the clear border: never under the rail's outline or a neighbour. */
button.athena-story__mode:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

.athena-story__mode svg {
	width: 20px;
	height: 20px;
}

.athena-story__mode.is-selected,
button.athena-story__mode.is-selected:hover {
	background-color: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

/* Accent on accent-soft is below 4.5:1 for text in light mode; the icon keeps it. */
.athena-story__mode.is-selected svg {
	color: var(--wp--preset--color--accent);
}

/* ── Mode views (hero) ─────────────────────────────────────────── */

/*
 * Every mode's view shares one grid cell, so the panel has the tallest view's
 * height from the first frame and switching modes never moves anything. Only
 * Search exists without JavaScript; .has-js is set in <head>, before first
 * paint, so the other views reserve their space before view.js runs.
 */
.athena-story__views,
.athena-story__tags {
	display: grid;
	min-width: 0;
}

.athena-story__view,
.athena-story__tags > .athena-story__tag {
	grid-area: 1 / 1;
	min-width: 0;
}

.athena-story__tags > .athena-story__tag {
	justify-self: end;
}

.athena-story__view {
	display: flex;
	flex-direction: column;
}

.athena-story__alt {
	display: none;
}

.has-js .athena-story__alt {
	display: flex;
}

.has-js .athena-story__tags > .athena-story__alt {
	display: inline;
}

.athena-story__view:not(.is-active),
.athena-story__tags > .athena-story__tag:not(.is-active) {
	visibility: hidden;
}

/* An inactive view waits on its rest frame, not its final state. */
.athena-story__view:not(.is-active) .athena-story__card {
	opacity: 0;
}

/* Spare height (a shorter view than the tallest) goes to the mode's opening
   stage; results and the reply stay at the bottom of the panel. */
.athena-story__head {
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
}

.athena-story__view[data-view="search"] > .athena-story__assistant {
	margin-top: auto;
}

.athena-story__view[data-view="search"] > .athena-story__results {
	margin-bottom: 1rem;
}

/* Visual: the shopper's photo, scanned, with what was detected beside it. */
.athena-story__head--visual {
	gap: 1rem;
}

.athena-story__photo {
	position: relative;
	flex: none;
	width: clamp(6rem, 38%, 11rem);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 14px;
	background: var(--tone, var(--story-packshot));
}

.athena-story__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.45s ease, transform 0.6s var(--story-ease);
}

.athena-story__photo-slot {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border: 2px dashed var(--wp--preset--color--border);
	border-radius: inherit;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.athena-story__photo-slot svg {
	width: 28px;
	height: 28px;
}

/* A full-size layer whose bottom edge is the scan line, so translateY(%) sweeps it. */
.athena-story__scan {
	position: absolute;
	inset: 0;
	border-bottom: 2px solid var(--wp--preset--color--brand);
	background: linear-gradient(to bottom, transparent 55%, color-mix(in srgb, var(--wp--preset--color--brand) 28%, transparent));
	opacity: 0;
	transform: translateY(-100%);
}

.athena-story__detected {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.15rem;
	flex: 1;
	min-width: 0;
}

.athena-story__hint {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.athena-story__detected .athena-story__chips {
	margin-top: 0.4rem !important;
}

/* Voice: microphone and waveform, then the spoken words. */
.athena-story__head--voice {
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 0.75rem;
}

.athena-story__head--voice .athena-story__chips {
	margin-top: 0 !important;
}

.athena-story__mic {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.athena-story__mic-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
}

.athena-story__mic-icon svg {
	grid-area: 1 / 1;
	width: 22px;
	height: 22px;
}

.athena-story__wave {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	height: 2.75rem;
	overflow: hidden;
}

.athena-story__wave i {
	flex: none;
	width: 3px;
	height: 100%;
	border-radius: 3px;
	background: var(--wp--preset--color--brand);
	opacity: 0.45;
	/* Quiet, varied bars: the final state after the shopper stops speaking. */
	transform: scaleY(calc(var(--h, 0.5) * 0.25));
}

.athena-story__mic-state {
	display: grid;
	flex: none;
	justify-items: end;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.athena-story__mic-state > span {
	grid-area: 1 / 1;
}

[data-mic="listening"] {
	visibility: hidden;
}

.athena-story__transcript {
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.35;
}

.athena-story__word {
	transition: opacity 0.3s ease;
	transition-delay: calc(var(--w, 0) * 150ms);
}

/* ── Query ─────────────────────────────────────────────────────── */

.athena-story__query {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.35;
	transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.athena-story__query svg {
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--brand);
}

.athena-story__hl {
	padding: 0 0.1em;
	border-radius: 4px;
	background-color: transparent;
	background-image: linear-gradient(var(--wp--preset--color--accent-soft), var(--wp--preset--color--accent-soft));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 100%;
	color: inherit;
	box-decoration-break: clone;
	transition: background-size 0.6s var(--story-ease);
	transition-delay: calc(var(--i, 0) * 120ms);
}

/* ── Constraint chips ──────────────────────────────────────────── */

.athena-story__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.85rem !important;
}

.athena-story__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	padding: 0.35rem 0.7rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 25%, transparent);
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
	font-size: 0.875rem;
	transition: opacity 0.45s ease, transform 0.55s var(--story-ease);
	transition-delay: calc(var(--i, 0) * 110ms);
}

.athena-story__chip-key {
	flex: none;
	color: var(--wp--preset--color--muted);
	font-weight: 550;
}

/* A long value (e.g. Visual Search's "Low-top running shoe" beside the photo at 320 px)
   wraps inside its chip, between words, instead of running past the panel. */
.athena-story__chip {
	flex-wrap: wrap;
	max-width: 100%;
	box-sizing: border-box;
}

.athena-story__chip-value {
	min-width: 0;
	font-weight: 700;
}

@media (max-width: 360px) {
	.athena-story__chip {
		gap: 0.25rem;
		padding: 0.3rem 0.55rem;
		font-size: 0.8125rem;
	}
}

/* ── Product cards ─────────────────────────────────────────────── */

.athena-story__results {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1rem !important;
}

.athena-story__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--raised);
	isolation: isolate;
	/* The whole card enters at once; until then its space is simply empty. */
	transition: opacity 0.5s ease, transform 0.6s var(--story-ease);
	transition-delay: calc(var(--i, 0) * 140ms + 80ms);
}

.athena-story__media {
	aspect-ratio: 16 / 11;
	background: var(--tone, var(--story-packshot));
}

/* The whole photo, never cropped; the box's spare edges match the studio background. */
.athena-story__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.athena-story__card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.65rem 0.75rem 0.8rem;
}

.athena-story__meta {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 550;
}

.athena-story__name {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.athena-story__results:not(.athena-story__results--rows) .athena-story__name {
	min-height: 2.6em;
}

.athena-story__price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 0.5rem;
	margin-top: auto !important;
	padding-top: 0.3rem;
	font-size: 0.9375rem;
	font-weight: 750;
}

.athena-story__match {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	color: var(--story-success);
	font-size: 0.8125rem;
	font-weight: 650;
}

.athena-story__match svg {
	width: 14px;
	height: 14px;
}

/* ── Assistant reply (hero) ────────────────────────────────────── */

.athena-story__assistant {
	position: relative;
	display: flex;
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0.9rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 22%, var(--wp--preset--color--border));
	border-radius: 16px;
	background: var(--wp--preset--color--raised);
	box-shadow: var(--athena-shadow-raised);
	transition: opacity 0.5s ease, transform 0.7s var(--story-ease);
}

.athena-story__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: linear-gradient(135deg, #9431fa 0%, #a238c5 55%, #3fcadd 130%);
	color: #fff;
}

.athena-story__avatar svg {
	width: 18px;
	height: 18px;
}

.athena-story__assistant-body {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

/*
 * The typing indicator and the reply share one grid cell (hero body, chat
 * bubble), so the message has its final height from the first frame and
 * swapping dots for text never pushes the layout.
 */
.athena-story__assistant-body > .athena-story__typing,
.athena-story__assistant-body > .athena-story__reply {
	grid-row: 2;
	grid-column: 1;
}

.athena-story__bubble {
	display: grid;
}

.athena-story__bubble > .athena-story__typing,
.athena-story__bubble > .athena-story__reply {
	grid-area: 1 / 1;
}

.athena-story__assistant-name {
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	font-weight: 700;
}

.athena-story__reply {
	transition: opacity 0.4s ease;
	transition-delay: 0.8s;
}

.athena-story__typing {
	display: inline-flex;
	align-self: start;
	gap: 4px;
	align-items: center;
	height: 1.45em;
	visibility: hidden;
	opacity: 0;
}

.athena-story__typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	opacity: 0.4;
}

/* ── "Why these results" (search) ──────────────────────────────── */

.athena-story__why {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1rem !important;
	padding-top: 1rem;
	border-top: 1px dashed var(--wp--preset--color--border);
}

.athena-story__why-row {
	display: grid;
	align-content: start;
	gap: 0.3rem;
	transition: opacity 0.45s ease, transform 0.55s var(--story-ease);
	transition-delay: calc(var(--i, 0) * 120ms);
}

.athena-story__why dt {
	justify-self: start;
	padding: 0.15rem 0.55rem;
	border-radius: 6px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.athena-story__why dd {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

/* ── Chat (assistant) ──────────────────────────────────────────── */

.athena-story__chat {
	display: grid;
	gap: 0.75rem;
}

.athena-story__msg {
	transition: opacity 0.45s ease, transform 0.6s var(--story-ease);
}

.athena-story__msg--shopper {
	justify-self: end;
	max-width: 80%;
	padding: 0.7rem 0.95rem;
	border-radius: 16px 16px 4px 16px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-weight: 600;
}

.athena-story__msg--assistant {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	column-gap: 0.65rem;
	row-gap: 0.75rem;
	max-width: 92%;
}

.athena-story__bubble {
	padding: 0.7rem 0.95rem;
	border-radius: 4px 16px 16px 16px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}

.athena-story__msg--recommend {
	max-width: 100%;
}

.athena-story__results--rows {
	grid-column: 2;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 0 !important;
}

.athena-story__view .athena-story__results--rows {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Shorter images: the chat already needs the panel's height. min-height: 0, or
   the flex item's automatic minimum (the photo's own height) beats the ratio. */
@media (min-width: 641px) {
	.athena-story__view .athena-story__results--rows .athena-story__media {
		min-height: 0;
		aspect-ratio: 16 / 7;
	}

	/* The hero's Visual mode has room for a larger shopper's photo. */
	.athena-story__view .athena-story__photo {
		width: clamp(6rem, 44%, 14rem);
	}
}

/* Hero Voice mode: a larger microphone and waveform fill the shared cell
   instead of empty bands above and below them. */
.athena-story__view .athena-story__head--voice {
	gap: 1rem;
}

.athena-story__view .athena-story__mic-icon {
	width: 3.25rem;
	height: 3.25rem;
}

.athena-story__view .athena-story__mic-icon svg {
	width: 26px;
	height: 26px;
}

.athena-story__view .athena-story__wave {
	height: 3.25rem;
}

.athena-story__view .athena-story__transcript {
	font-size: 1.125rem;
}

/* Hero Visual mode on phones: the photo above what was detected in it, large
   enough to read, capped so the mode stays within the height Search needs. */
@media (max-width: 640px) {
	.athena-story__view .athena-story__head--visual {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0.75rem;
	}

	.athena-story__view .athena-story__photo {
		width: min(100%, 13rem);
	}

	.athena-story__view .athena-story__detected {
		flex: none;
		width: 100%;
	}
}

/* ── Footer: steps, control, note ──────────────────────────────── */

.athena-story__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	padding-inline: 0.25rem;
}

.athena-story__steps {
	display: flex;
	flex: 1 1 16rem;
	gap: 0.5rem;
}

.athena-story__steps li {
	flex: 1;
	display: grid;
	gap: 0.35rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.3rem;
}

.athena-story__steps li::before {
	content: "";
	grid-column: 1 / -1;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--brand) 0 50%, var(--athena-border-strong) 50% 100%) 100% 0 / 200% 100%;
}

/* Done: filled bar and a check mark, whose space is always reserved. */
.athena-story__steps li::after {
	content: "\2713" / "";
	color: var(--story-success);
	font-size: 0.8125rem;
	font-weight: 750;
	visibility: hidden;
}

.athena-story__steps li.is-done::after {
	visibility: inherit;
}

.athena-story.is-complete .athena-story__steps li::before,
.athena-story__steps li.is-done::before {
	background-position: 0 0;
}

/* Current: a thicker bar and a heavier label (a stroke, so the label's width holds). */
.athena-story__steps li.is-current {
	color: var(--wp--preset--color--contrast);
	-webkit-text-stroke: 0.025em currentColor;
}

.athena-story__steps li.is-current::before {
	transform: scaleY(1.67);
	animation: athena-step-fill var(--beat-ms, 1s) linear forwards;
}

.athena-story.is-complete .athena-story__steps li.is-current::before {
	animation: none;
}

@keyframes athena-step-fill {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: 0 0;
	}
}

.athena-story__control {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.25rem;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 650;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.athena-story__control:hover {
	border-color: var(--wp--preset--color--brand);
}

.athena-story__control[hidden] {
	display: none;
}

.athena-story__control-label {
	display: grid;
}

.athena-story__control-label > span {
	grid-area: 1 / 1;
	visibility: hidden;
}

.athena-story__control[data-mode="replay"] [data-label="replay"],
.athena-story__control[data-mode="pause"] [data-label="pause"],
.athena-story__control[data-mode="play"] [data-label="play"],
.athena-story__control:not([data-mode]) [data-label="replay"] {
	/* inherit, not visible: a child set to visible would show through an
	   inactive (visibility: hidden) tab panel. */
	visibility: inherit;
}

.athena-story__control svg {
	width: 14px;
	height: 14px;
	display: none;
}

.athena-story__control[data-mode="replay"] .athena-story__icon-replay,
.athena-story__control[data-mode="pause"] .athena-story__icon-pause,
.athena-story__control[data-mode="play"] .athena-story__icon-play,
.athena-story__control:not([data-mode]) .athena-story__icon-replay {
	display: block;
}

.athena-story__note {
	flex-basis: 100%;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

.athena-story.is-static .athena-story__steps,
.athena-story:not(.is-ready) .athena-story__steps,
.athena-story:not(.is-ready) .athena-story__control {
	display: none;
}

/*
 * When JS is available (html.has-js is set in <head>, before first paint) and
 * motion is allowed, view.js will show the steps and control. Reserve their
 * space from the first frame so the footer (and the hero around it) doesn't
 * grow when the script starts. Without JS, or with reduced motion, they stay
 * display: none as above.
 */
@media (prefers-reduced-motion: no-preference) {

	.has-js .athena-story:not(.is-ready) .athena-story__steps {
		display: flex;
		visibility: hidden;
	}

	.has-js .athena-story:not(.is-ready) .athena-story__control {
		display: inline-flex;
		visibility: hidden;
	}
}

.athena-story__problems {
	padding: 0.75rem 1rem;
	border: 2px solid #b42318;
	border-radius: 12px;
	background: #fef3f2;
	color: #7a271a;
	font-size: 0.875rem;
}

.athena-story__problems ul {
	margin-top: 0.4rem;
	padding-left: 1.1rem;
	list-style: disc;
}

/* ── Animation: rest frame (is-animating without reached-*) ────── */

.athena-story.is-resetting,
.athena-story.is-resetting * {
	transition: none !important;
}

/* Visual sequence: empty slot, photo lands, scan sweeps. */
.athena-story.is-animating:not(.reached-upload) .athena-story__photo-slot {
	opacity: 1;
}

.athena-story.is-animating:not(.reached-upload) .athena-story__photo img {
	opacity: 0;
	transform: scale(1.08);
}

.athena-story.is-animating[data-beat="scan"] .athena-story__scan {
	opacity: 1;
	animation: athena-scan 0.85s ease-in-out 2 alternate both;
}

/* Voice sequence: listening, then the words arrive one at a time. */
.athena-story.is-animating[data-beat="listen"] .athena-story__mic-icon,
.athena-story.is-animating[data-beat="transcribe"] .athena-story__mic-icon {
	animation: athena-mic 1.1s ease-in-out infinite;
}

.athena-story.is-animating[data-beat="listen"] .athena-story__wave i,
.athena-story.is-animating[data-beat="transcribe"] .athena-story__wave i {
	opacity: 1;
	animation: athena-wave 0.9s ease-in-out var(--d, 0ms) infinite alternate;
}

.athena-story.is-animating[data-beat="listen"] [data-mic="listening"],
.athena-story.is-animating[data-beat="transcribe"] [data-mic="listening"] {
	visibility: inherit;
}

.athena-story.is-animating[data-beat="listen"] [data-mic="heard"],
.athena-story.is-animating[data-beat="transcribe"] [data-mic="heard"],
.athena-story.is-animating:not(.reached-listen) [data-mic="heard"] {
	visibility: hidden;
}

.athena-story.is-animating:not(.reached-transcribe) .athena-story__word {
	opacity: 0;
}

.athena-story.is-animating.reached-intent:not(.reached-discover) .athena-story__query {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--brand) 16%, transparent);
}

.athena-story.is-animating:not(.reached-understand) .athena-story__hl {
	background-size: 0% 100%;
}

.athena-story.is-animating:not(.reached-understand) .athena-story__chip {
	opacity: 0;
	transform: translateY(8px) scale(0.96);
}

.athena-story.is-animating:not(.reached-discover) .athena-story__results:not(.athena-story__results--rows) .athena-story__card {
	opacity: 0;
	transform: translateY(14px);
	transition-delay: 0s;
}

.athena-story.is-animating:not(.reached-assist) .athena-story__assistant {
	opacity: 0;
	transform: translateY(18px) scale(0.98);
}

.athena-story.is-animating:not(.reached-explain) .athena-story__why {
	border-top-color: transparent;
}

.athena-story.is-animating:not(.reached-explain) .athena-story__why-row {
	opacity: 0;
	transform: translateY(10px);
}

/* Typing indicator, then reply (hero assist / assistant recommend). */
.athena-story.is-animating[data-beat="assist"] .athena-story__assistant .athena-story__typing,
.athena-story.is-animating[data-beat="recommend"] .athena-story__msg--recommend .athena-story__typing {
	visibility: inherit;
	opacity: 1;
	animation: athena-typing-out 0.01s linear 0.75s forwards;
}

.athena-story.is-animating[data-beat="assist"] .athena-story__typing i,
.athena-story.is-animating[data-beat="recommend"] .athena-story__typing i {
	animation: athena-typing 0.9s ease-in-out infinite;
}

.athena-story__typing i:nth-child(2) {
	animation-delay: 0.15s !important;
}

.athena-story__typing i:nth-child(3) {
	animation-delay: 0.3s !important;
}

.athena-story.is-animating:not(.reached-assist) .athena-story__assistant .athena-story__reply,
.athena-story.is-animating:not(.reached-recommend) .athena-story__msg--recommend .athena-story__reply {
	opacity: 0;
}

/* Chat sequence. */
.athena-story.is-animating:not(.reached-ask) [data-part="ask"],
.athena-story.is-animating:not(.reached-clarify) [data-part="clarify"],
.athena-story.is-animating:not(.reached-answer) [data-part="answer"],
.athena-story.is-animating:not(.reached-recommend) [data-part="recommend"] {
	opacity: 0;
	transform: translateY(12px);
}

.athena-story--assistant .athena-story__results--rows .athena-story__card,
.athena-story__view[data-view="assistant"] .athena-story__results--rows .athena-story__card {
	transition-delay: calc(var(--i, 0) * 140ms + 1s);
}

.athena-story.is-animating:not(.reached-recommend) .athena-story__results--rows .athena-story__card {
	opacity: 0;
	transform: translateY(12px);
	transition-delay: 0s;
}

.athena-story.is-paused *,
.athena-story.is-paused *::after {
	animation-play-state: paused !important;
}

@keyframes athena-scan {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes athena-mic {
	50% {
		transform: scale(1.1);
	}
}

@keyframes athena-wave {
	from {
		transform: scaleY(0.15);
	}

	to {
		transform: scaleY(var(--h, 0.5));
	}
}

@keyframes athena-typing {
	0%,
	100% {
		opacity: 0.35;
		transform: translateY(0);
	}

	50% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

@keyframes athena-typing-out {
	to {
		visibility: hidden;
		opacity: 0;
	}
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (min-width: 1241px) {
	.athena-story--hero .athena-story__footer {
		margin-left: calc(4.5rem + 0.7rem + 2px - 1.6rem);
	}
}

@media (max-width: 1240px) {
	.athena-story--hero .athena-story__stage {
		grid-template-columns: minmax(0, 1fr);
	}

	.athena-story--hero .athena-story__panel {
		padding-left: clamp(1rem, 2vw, 1.5rem);
	}

	.athena-story--hero .athena-story__modes {
		margin: 0 0 0.75rem;
	}

	.athena-story__modes {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		order: -1;
	}

	.athena-story__modes {
		box-shadow: none;
	}

	.athena-story__mode {
		width: 100%;
		min-height: 2.75rem;
		grid-auto-flow: column;
		justify-content: center;
		align-items: center;
		gap: 0.4rem;
		padding: calc(0.5rem - 3px);
	}
}

@media (min-width: 961px) and (max-width: 1240px) {
	.athena-story--hero .athena-story__results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.athena-story--hero .athena-story__results > .athena-story__card:nth-child(n + 3) {
		display: none;
	}
}

@media (max-width: 640px) {
	/* Icon over label: four labels side by side don't fit a phone. */
	.athena-story__mode {
		grid-auto-flow: row;
		gap: 0.15rem;
		padding: calc(0.4rem - 3px) 0;
		font-size: 0.8125rem;
	}

	.athena-story__results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.athena-story__results:not(.athena-story__results--rows) > .athena-story__card:nth-child(n + 3) {
		display: none;
	}

	.athena-story__results--rows,
	.athena-story__view .athena-story__results--rows {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}

	.athena-story__results--rows .athena-story__card {
		flex-direction: row;
		align-items: stretch;
	}

	.athena-story__results--rows .athena-story__media {
		flex: none;
		width: 5.25rem;
		aspect-ratio: 1;
	}

	.athena-story__why {
		grid-template-columns: minmax(0, 1fr);
	}

	.athena-story__msg--assistant {
		max-width: 100%;
	}

	.athena-story__results--rows {
		grid-column: 1 / -1;
	}

	/* Only the current step is labelled; every step reserves the label line
	   so the footer height is the same during and after playback. */
	.athena-story__steps li {
		align-content: start;
		min-height: calc(3px + 0.35rem + 0.8125rem * 1.45);
		grid-template-columns: minmax(0, 1fr);
		font-size: 0;
	}

	/* Out of the grid, or the current step's label would drop a row and grow the rail. */
	.athena-story__steps li {
		position: relative;
	}

	.athena-story__steps li::after {
		position: absolute;
		top: calc(3px + 0.35rem);
		left: 0;
	}

	.athena-story__steps li.is-current {
		font-size: 0.8125rem;
	}
}

@media (max-width: 380px) {
	.athena-story__panel {
		padding: 0.85rem;
		border-radius: 18px;
	}

	/* Logo and the longest label don't fit one line. A narrower gap keeps a label that only
	   just fits ("Primer podataka" at 320 px) on the logo's line instead of two. */
	.athena-story__top {
		gap: 0.5rem;
	}

	.athena-story__tag {
		white-space: normal;
		text-align: right;
	}

	.athena-story__query {
		font-size: 0.9375rem;
		padding: 0.75rem 0.8rem;
	}
}

/* ── Signature demos (product pages) ───────────────────────────── */

/* WCAG 2.5.8 target size is met from 24 px; the site's touch target is 44 px. */
.athena-story--signature .athena-story__control {
	min-height: 2.75rem;
}

.athena-story__status {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin-bottom: 0.85rem !important;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.athena-story__status li {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	transition: opacity 0.4s ease;
}

.athena-story__status svg {
	width: 14px;
	height: 14px;
	color: var(--story-success);
}

/* Search: the misspelling and its correction. */
.athena-story__typo {
	text-decoration: underline wavy #c4320a;
	text-underline-offset: 0.2em;
}

:root[data-color-scheme="dark"] .athena-story__typo {
	text-decoration-color: #ff9c78;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-color-scheme="light"]) .athena-story__typo {
		text-decoration-color: #ff9c78;
	}
}

.athena-story__correction {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
	margin-top: 0.6rem !important;
	font-size: 0.875rem;
	transition: opacity 0.4s ease, transform 0.5s var(--story-ease);
}

.athena-story__correction-label {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.athena-story__correction s {
	color: var(--wp--preset--color--muted);
}

.athena-story--search.is-animating:not(.reached-connect) [data-status="0"],
.athena-story--search.is-animating:not(.reached-index) [data-status="1"],
.athena-story--assistant.is-animating:not(.reached-ready) [data-status],
.athena-story--signature.is-animating:not(.reached-intent) .athena-story__query-text {
	opacity: 0;
}

.athena-story--signature .athena-story__query-text {
	transition: opacity 0.4s ease;
}

.athena-story.is-animating:not(.reached-correct) .athena-story__correction {
	opacity: 0;
	transform: translateY(6px);
}

.athena-story--search.is-animating:not(.reached-correct) .athena-story__typo {
	text-decoration-color: transparent;
}

.athena-story--signature .athena-story__hint {
	transition: opacity 0.4s ease;
}

.athena-story--signature.is-animating:not(.reached-understand) .athena-story__hint {
	opacity: 0;
}

/* Visual: the photo in a phone-camera frame, a crop frame that tightens. */
.athena-story__phone {
	position: relative;
	flex: none;
	width: clamp(7.5rem, 34%, 10rem);
	padding: 0.4rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 1.35rem;
	background: var(--athena-phone-frame, #16162a);
	box-shadow: var(--athena-shadow-raised);
}

/* The smallest phones (320–360 px): a slightly smaller frame leaves the five "Seen in the
   photo" chips beside it their full width. */
@media (max-width: 360px) {
	.athena-story__phone {
		width: 6rem;
	}
}

.athena-story__phone .athena-story__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 1rem;
	/* A landscape photo on a portrait screen, letterboxed as a phone shows it. */
	background: var(--athena-phone-frame, #16162a);
}

/* Frames the photo, which fills the middle 56% of the portrait screen. */
.athena-story__crop {
	position: absolute;
	inset: 27% 5%;
	box-shadow: 0 0 0 40rem rgb(3 3 41 / 0.24);
	--c: var(--wp--preset--color--brand);
	background:
		linear-gradient(var(--c), var(--c)) 0 0 / 1rem 2px,
		linear-gradient(var(--c), var(--c)) 0 0 / 2px 1rem,
		linear-gradient(var(--c), var(--c)) 100% 0 / 1rem 2px,
		linear-gradient(var(--c), var(--c)) 100% 0 / 2px 1rem,
		linear-gradient(var(--c), var(--c)) 0 100% / 1rem 2px,
		linear-gradient(var(--c), var(--c)) 0 100% / 2px 1rem,
		linear-gradient(var(--c), var(--c)) 100% 100% / 1rem 2px,
		linear-gradient(var(--c), var(--c)) 100% 100% / 2px 1rem;
	background-repeat: no-repeat;
	transition: opacity 0.3s ease, transform 0.9s var(--story-ease);
}

.athena-story.is-animating:not(.reached-upload) .athena-story__crop {
	opacity: 0;
}

.athena-story.is-animating:not(.reached-crop) .athena-story__crop {
	transform: scale(1.5, 1.32);
}

/* Voice: the whole transcript stays readable; words brighten as they are spoken. */
.athena-story--voice.is-animating:not(.reached-transcribe) .athena-story__word {
	opacity: 0.6;
}

.athena-story--voice .athena-story__word {
	transition-delay: calc(var(--w, 0) * 170ms);
}

/* Voice: once the search is done the microphone rests (doneLabel set). */
.athena-story__mic--rests .athena-story__wave i {
	opacity: 0.35;
	transform: scaleY(0.05);
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.athena-story__mic--rests [data-mic="heard"] {
	visibility: hidden;
}

.athena-story.is-animating.reached-transcribe:not(.reached-discover):not([data-beat="transcribe"]) .athena-story__mic--rests [data-mic="heard"] {
	visibility: inherit;
}

.athena-story.is-animating:not(.reached-discover) .athena-story__mic--rests [data-mic="done"],
.athena-story.is-animating:not(.reached-discover) .athena-story__mic--rests .athena-story__mic-icon svg:last-child {
	visibility: hidden;
}

.athena-story:not(.is-animating) .athena-story__mic--rests .athena-story__mic-icon,
.athena-story.reached-discover .athena-story__mic--rests .athena-story__mic-icon {
	background: var(--story-success);
	color: var(--wp--preset--color--base);
}

.athena-story:not(.is-animating) .athena-story__mic--rests .athena-story__mic-icon svg:first-child,
.athena-story.reached-discover .athena-story__mic--rests .athena-story__mic-icon svg:first-child {
	visibility: hidden;
}

/* Assistant: a contained conversation. */
.athena-story__chat--scroll {
	position: relative;
	overflow-y: auto;
	align-content: start;
	height: 30rem;
	scrollbar-width: thin;
	border-radius: 8px;
}

/* Beats the list reset at the top of this file: the gap beside the scrollbar. */
.athena-story .athena-story__chat--scroll {
	padding: 0.25rem 0.8125rem 0.75rem 0.1rem;
}

/* Older messages fade out under the top edge instead of being cut mid-sentence. */
.athena-story__chat--scroll.is-scrolled {
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
	mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
}

.athena-story__chat--scroll .athena-story__meta,
.athena-story__chat--scroll .athena-story__name,
.athena-story__chat--scroll .athena-story__price,
.athena-story__chat--scroll .athena-story__compare,
.athena-story__chat--scroll .athena-story__confirm {
	font-size: 0.9375rem;
}

.athena-story__chat--scroll:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.athena-story--signature .athena-story__results--rows {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.athena-story--signature .athena-story__results--rows .athena-story__media {
	aspect-ratio: 16 / 9;
}

.athena-story--signature .athena-story__results--rows .athena-story__card-body {
	padding: 0.5rem 0.6rem 0.6rem;
}

.athena-story--signature .athena-story__results--rows .athena-story__match {
	display: none;
}

.athena-story__compare,
.athena-story__confirm {
	grid-column: 2;
}

.athena-story__compare {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	font-size: 0.875rem;
}

.athena-story__compare th,
.athena-story__compare td {
	padding: 0.45rem 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}

.athena-story__compare tbody tr:last-child > * {
	border-bottom: 0;
}

.athena-story__compare thead th {
	font-weight: 700;
}

.athena-story__compare tbody th {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.athena-story__confirm {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 0.3rem;
	color: var(--story-success);
	font-size: 0.875rem;
	font-weight: 700;
}

.athena-story__confirm svg {
	width: 16px;
	height: 16px;
}

/* Cart and wishlist in the panel's top bar. */
.athena-story__store {
	display: inline-flex;
	gap: 0.85rem;
	align-items: center;
}

.athena-story__store-item {
	position: relative;
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--wp--preset--color--contrast);
}

.athena-story__store-item svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.athena-story__heart-fill {
	color: #c4246b;
	transition: opacity 0.3s ease, transform 0.5s var(--story-ease);
}

:root[data-color-scheme="dark"] .athena-story__heart-fill {
	color: #ff8ab8;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-color-scheme="light"]) .athena-story__heart-fill {
		color: #ff8ab8;
	}
}

.athena-story__badge {
	position: absolute;
	top: -0.45rem;
	right: -0.55rem;
	display: grid;
	place-items: center;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 750;
	line-height: 1;
}

.athena-story__badge > * {
	grid-area: 1 / 1;
	transition: opacity 0.25s ease, transform 0.45s var(--story-ease);
}

.athena-story__badge-from {
	opacity: 0;
}

.athena-story.is-animating:not(.reached-cartdone) .athena-story__badge-to {
	opacity: 0;
	transform: translateY(0.6rem);
}

.athena-story.is-animating:not(.reached-cartdone) .athena-story__badge-from {
	opacity: 1;
}

.athena-story.is-animating:not(.reached-wishdone) .athena-story__heart-fill {
	opacity: 0;
	transform: scale(0.4);
}

/* Multi-turn sequence (ready, ask, clarify, answer, recommend are shared). */
.athena-story.is-animating:not(.reached-followup) [data-part="followup"],
.athena-story.is-animating:not(.reached-compare) [data-part="compare"],
.athena-story.is-animating:not(.reached-cart) [data-part="cart"],
.athena-story.is-animating:not(.reached-cartdone) [data-part="cartdone"],
.athena-story.is-animating:not(.reached-wish) [data-part="wish"],
.athena-story.is-animating:not(.reached-wishdone) [data-part="wishdone"] {
	opacity: 0;
	transform: translateY(12px);
}

@media (max-width: 640px) {
	/* The current step's label may be wider than its quarter of the rail: it spills
	   over the unlabelled next step, and the bars never change width. */
	.athena-story--signature .athena-story__steps li {
		flex: 1 1 0;
		grid-template-columns: minmax(0, 1fr);
		min-width: 0;
		white-space: nowrap;
	}

	.athena-story--signature .athena-story__head--visual {
		align-items: flex-start;
	}

	.athena-story__chat--scroll {
		height: 27rem;
	}

	.athena-story__compare,
	.athena-story__confirm {
		grid-column: 1 / -1;
	}

	.athena-story--signature .athena-story__results--rows {
		grid-template-columns: minmax(0, 1fr);
	}

	.athena-story--signature .athena-story__results--rows .athena-story__media {
		aspect-ratio: 1;
	}
}

/* ── AI Data Generator: raw row → four agent types ─────────────── */

.athena-story--generator {
	--gen-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.athena-story__source {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: start;
}

.athena-story__source-data {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.athena-story__gen-label {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* One spreadsheet row: column names over values. */
.athena-story__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5.75rem, 1fr));
	border: 1px solid var(--athena-border-strong);
	border-radius: 10px;
	overflow: hidden;
	font-family: var(--gen-mono);
	font-size: 0.8125rem;
}

.athena-story__cell {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	min-width: 0;
	border-right: 1px solid var(--wp--preset--color--border);
}

.athena-story__cell:last-child {
	border-right: 0;
}

.athena-story__cell dt {
	padding: 0.25rem 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
}

.athena-story__cell dd {
	margin: 0;
	padding: 0.35rem 0.5rem;
	overflow-wrap: anywhere;
}

.athena-story__gen-photo {
	position: relative;
	display: grid;
	gap: 0.25rem;
	width: 6.25rem;
	margin: 0;
}

.athena-story__gen-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	background: var(--story-packshot);
}

.athena-story__gen-photo figcaption {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	line-height: 1.3;
}

.athena-story__agents {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin-top: 0.75rem !important;
}

.athena-story__agent {
	display: grid;
	align-content: start;
	gap: 0.45rem;
	min-width: 0;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
}

.athena-story__agent--generate,
.athena-story__agent--translate {
	grid-column: 1 / -1;
}

.athena-story__agent-name {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8125rem;
	font-weight: 700;
}

.athena-story__agent-no {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 0.75rem;
	font-weight: 750;
}

.athena-story__fields {
	display: grid;
	gap: 0.4rem;
}

.athena-story__field {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
	gap: 0.15rem 0.6rem;
	align-items: baseline;
	padding: 0.15rem 0.3rem;
	border-radius: 8px;
}

.athena-story__agent--normalize .athena-story__field {
	grid-template-columns: minmax(0, 4.75rem) minmax(0, 1fr);
}

.athena-story__field dt {
	color: var(--wp--preset--color--muted);
	font-family: var(--gen-mono);
	font-size: 0.75rem;
	overflow-wrap: anywhere;
}

.athena-story__field dd {
	margin: 0;
	min-width: 0;
}

.athena-story__field s {
	color: var(--wp--preset--color--muted);
	font-family: var(--gen-mono);
}

.athena-story__value {
	font-weight: 600;
}

/* Field Awareness: what a field was given as context. */
.athena-story__uses {
	display: block;
	margin-top: 0.1rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--gen-mono);
	font-size: 0.75rem;
	font-weight: 600;
}

.athena-story__attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.athena-story__attr {
	padding: 0.2rem 0.55rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 25%, transparent);
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
	font-size: 0.8125rem;
}

.athena-story__attr-key {
	color: var(--wp--preset--color--muted);
}

.athena-story__attr-value {
	font-weight: 650;
}

/* Rail: the four agent types are long words. */
.athena-story--generator .athena-story__steps li {
	font-size: 0.75rem;
	overflow-wrap: anywhere;
}

/* Sequence: the row lands, then each agent's card; its values follow one by one. */
.athena-story--generator .athena-story__source,
.athena-story__agent {
	transition: opacity 0.45s ease, transform 0.55s var(--story-ease);
}

.athena-story__agent .athena-story__value,
.athena-story__agent .athena-story__uses,
.athena-story__attr {
	transition: opacity 0.4s ease calc(var(--i, 0) * 220ms + 350ms);
}

.athena-story--generator.is-animating:not(.reached-source) .athena-story__source,
.athena-story--generator.is-animating:not(.reached-normalize) .athena-story__agent--normalize,
.athena-story--generator.is-animating:not(.reached-segment) .athena-story__agent--segment,
.athena-story--generator.is-animating:not(.reached-generate) .athena-story__agent--generate,
.athena-story--generator.is-animating:not(.reached-translate) .athena-story__agent--translate {
	opacity: 0;
	transform: translateY(8px);
}

.athena-story--generator.is-animating:not(.reached-normalize) .athena-story__agent--normalize :is(.athena-story__value, .athena-story__uses),
.athena-story--generator.is-animating:not(.reached-segment) .athena-story__agent--segment :is(.athena-story__attr, .athena-story__uses),
.athena-story--generator.is-animating:not(.reached-generate) .athena-story__agent--generate :is(.athena-story__value, .athena-story__uses),
.athena-story--generator.is-animating:not(.reached-translate) .athena-story__agent--translate :is(.athena-story__value, .athena-story__uses) {
	opacity: 0;
}

/* What feeds the running agent is ringed: a pseudo-element, so nothing reflows. */
.athena-story__cell::after,
.athena-story__field::after,
.athena-story__gen-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.athena-story__gen-photo::after {
	bottom: auto;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
}

.athena-story--generator.is-animating[data-beat="normalize"] .feeds-normalize::after,
.athena-story--generator.is-animating[data-beat="segment"] .feeds-segment::after,
.athena-story--generator.is-animating[data-beat="generate"] .feeds-generate::after,
.athena-story--generator.is-animating[data-beat="translate"] .feeds-translate::after {
	opacity: 1;
}

@media (max-width: 640px) {
	.athena-story__agents {
		grid-template-columns: minmax(0, 1fr);
	}

	.athena-story__field {
		grid-template-columns: minmax(0, 1fr);
	}

	.athena-story__gen-photo {
		width: 4.75rem;
	}
}

/* ── Category Navigation: an interactive category page ─────────── */

/*
 * One panel, part of the page: the results never scroll on their own (no scroll trap),
 * the page does, and its end loads the next page. Phones and tablets: store bar, path,
 * filters, toolbar, the merchandiser's switches right above the results they change,
 * then the results. Wide screens: the merchandiser's controls are a right column that
 * stays in view while the results grow. Without JavaScript the controls are hidden and
 * every product shows.
 */
.athena-cat {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	align-content: start;
}

.athena-cat > * {
	min-width: 0;
	margin: 0 !important;
}

@media (min-width: 961px) {
	.athena-story--category.has-merchant .athena-cat {
		grid-template-columns: minmax(0, 1fr) 17.5rem;
		column-gap: 1.25rem;
	}

	.athena-story--category.has-merchant .athena-cat__bar {
		grid-column: 1 / -1;
	}

	.athena-story--category.has-merchant :is(.athena-cat__head, .athena-cat__controls, .athena-cat__toolbar, .athena-cat__results) {
		grid-column: 1;
	}

	.athena-story--category.has-merchant .athena-cat__results {
		grid-row: 5;
	}

	/* Beside every row of the shopper's side, and sticky: it follows the results down,
	   so no blank column grows under it. */
	.athena-story--category.has-merchant .athena-cat__merchant {
		position: sticky;
		top: 6.5rem;
		grid-column: 2;
		grid-row: 2 / span 4;
		align-self: start;
	}
}

.athena-story--category .athena-story__tag {
	font-size: 0.875rem;
}

.athena-story--category .athena-story__note {
	font-size: 0.875rem;
}

.athena-cat__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
}

.athena-cat__side {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.athena-cat__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

.athena-cat__crumbs li + li::before {
	content: "\203A" / "";
	margin-right: 0.4rem;
}

.athena-cat__crumbs [aria-current] {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/* The example store's category title, under its trail. */
.athena-cat__title {
	flex-basis: 100%;
	color: var(--wp--preset--color--contrast);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* Controls exist only with JavaScript; nothing dead without it. */
.athena-cat__controls,
.athena-cat__clear,
.athena-cat__sort,
.athena-cat__switch,
.athena-cat__more-button {
	display: none;
}

.has-js .athena-cat__controls {
	display: grid;
	gap: 0.5rem;
}

.athena-cat__facet {
	display: grid;
	grid-template-columns: 4.25rem minmax(0, 1fr);
	gap: 0.5rem;
	align-items: center;
}

.athena-cat__facet-label {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 700;
}

/* One row per filter that scrolls sideways when it doesn't fit, faded at the end. */
.athena-cat__options {
	display: flex;
	gap: 0.4rem;
	padding: 3px 1.5rem 3px 3px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}

.athena-cat__options::-webkit-scrollbar {
	display: none;
}

/* Colours and prices are short: they wrap onto as many lines as they need, so nothing is
   cut or hidden. Their height is set at load; a tap only recolours an option, so the
   toolbar below never moves. Style tiles keep their sideways row on phones and tablets. */
.athena-cat__facet:not(.athena-cat__facet--tile) .athena-cat__options {
	flex-wrap: wrap;
	padding-right: 3px;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}

/* Wide screens: the six style tiles share the row, photo over label, none under a fade. */
@media (min-width: 961px) {
	.athena-cat__facet--tile .athena-cat__options {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		padding-right: 3px;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.athena-cat__facet--tile .athena-cat__option {
		flex-direction: column;
		justify-content: flex-start;
		gap: 0.3rem;
		min-width: 0;
		padding: 0.3rem 0.3rem 0.45rem;
		text-align: center;
		white-space: normal;
	}
}

.athena-cat__option {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.75rem;
	padding: 0.3rem 0.5rem 0.3rem 0.8rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 650;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.athena-cat__option:hover:not(:disabled) {
	border-color: var(--wp--preset--color--brand);
}

/* Chosen: the selected-tab colours, readable in both schemes. */
.athena-cat__option[aria-pressed="true"] {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.athena-cat__option:disabled {
	border-style: dashed;
	color: var(--wp--preset--color--muted);
	cursor: not-allowed;
}

.athena-cat__option:disabled :is(.athena-cat__tile, .athena-cat__swatch) {
	opacity: 0.4;
}

.athena-cat__option-count {
	min-width: 1.75em;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.athena-cat__option[aria-pressed="true"] .athena-cat__option-count {
	background: color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
	color: inherit;
}

/* Visual filters: a photo or a colour beside the label. */
.athena-cat__facet--tile .athena-cat__option {
	padding-left: 0.3rem;
	border-radius: 14px;
}

.athena-cat__tile {
	display: block;
	width: 3rem;
	height: 2.25rem;
	border-radius: 9px;
	background: var(--story-packshot);
	object-fit: contain;
}

.athena-cat__swatch {
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	margin-left: -0.35rem;
	border-radius: 50%;
	background: var(--swatch);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25), 0 0 0 2px var(--wp--preset--color--raised);
}

/* Dark swatches (black, navy) keep an edge on a dark panel. */
@media (prefers-color-scheme: dark) {
	.athena-cat__swatch {
		box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4), 0 0 0 2px var(--wp--preset--color--raised);
	}
}

.athena-cat__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.athena-cat__count {
	margin-right: auto !important;
	font-size: 0.9375rem;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
}

/* Shown (and its space kept) only while a filter is chosen. */
.has-js .athena-cat__clear {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
	visibility: hidden;
}

.has-js .athena-cat__clear.is-active,
.has-js .athena-cat__clear--inline {
	visibility: visible;
}

/* A combination that leaves nothing: one line and the way back. */
.athena-cat__empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px dashed var(--athena-border-strong);
	border-radius: 12px;
	font-size: 0.9375rem;
	font-weight: 650;
}

.athena-cat__empty > * {
	margin: 0 !important;
}

.athena-cat__empty[hidden] {
	display: none;
}

.has-js .athena-cat__sort {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 650;
}

.athena-cat__sort select {
	min-height: 2.75rem;
	max-width: 12rem;
	padding: 0 0.6rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 10px;
	background: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* The merchandiser's side: a card of its own colour. */
.athena-cat__merchant {
	display: grid;
	gap: 0.75rem;
	padding: 1rem !important;
	border: 1px solid var(--athena-border-strong);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.athena-cat__merchant > *,
.athena-cat__tool > *,
.athena-cat__top > * {
	margin: 0 !important;
}

.athena-cat__tool {
	position: relative;
	display: grid;
	gap: 0.3rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.athena-cat__tool-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

/* The whole row (name and effect) answers a tap on the switch: one large target. */
.has-js .athena-cat__switch::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
}

.has-js .athena-cat__tool:hover .athena-cat__track {
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent-soft);
}

.athena-cat__tool-name {
	font-size: 0.9375rem;
	font-weight: 750;
	line-height: 1.3;
}

.has-js .athena-cat__switch {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.5rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.25rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
}

.athena-cat__track {
	position: relative;
	display: block;
	width: 2.75rem;
	height: 1.5rem;
	border-radius: 999px;
	background: var(--athena-border-strong);
	transition: background-color 0.2s ease;
}

.athena-cat__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
	transition: transform 0.25s var(--story-ease);
}

.athena-cat__switch[aria-checked="true"] .athena-cat__track {
	background: var(--wp--preset--color--accent);
}

.athena-cat__switch[aria-checked="true"] .athena-cat__thumb {
	transform: translateX(1.25rem);
}

/* Both labels share one cell, so the switch keeps its width. */
.athena-cat__state {
	display: grid;
	min-width: 1.75rem;
}

.athena-cat__state > span {
	grid-area: 1 / 1;
	visibility: hidden;
}

.athena-cat__switch[aria-checked="false"] [data-state="off"],
.athena-cat__switch[aria-checked="true"] [data-state="on"] {
	visibility: inherit;
}

.athena-cat__tool-text {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}
.athena-cat__path {
	justify-self: start;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	font-weight: 600;
}

.athena-cat__top {
	display: grid;
	gap: 0.4rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.athena-cat__top-label {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 700;
}

.athena-cat__top-list {
	display: grid;
	gap: 0.35rem;
	counter-reset: athena-top;
}

/* One line each, always three lines: the card never changes height. */
.athena-cat__top-list li {
	min-height: 1.5rem;
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 650;
	line-height: 1.5rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	counter-increment: athena-top;
}

.athena-cat__top-list li::before {
	content: counter(athena-top);
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	font-weight: 750;
	line-height: 1;
	vertical-align: top;
}

/* Results: part of the page (no scroll box). */
.athena-cat__results {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	min-height: 0;
	container-type: inline-size;
	border-radius: 12px;
}

.athena-cat__results > * {
	margin: 0 !important;
}

/* "Try it" moves focus here; it is not a tab stop. */
.athena-cat__results:focus {
	outline: none;
}

.athena-cat__controls,
.athena-cat__toolbar,
.athena-cat__more {
	scroll-margin-top: 6.5rem;
}

.athena-cat :is(button, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.athena-cat__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@container (min-width: 34rem) {
	.athena-cat__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.athena-cat__product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	padding: 0.5rem 0.5rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--raised);
}

.athena-cat__product[hidden],
.has-js .athena-cat__product.is-later {
	display: none;
}

.athena-cat__product.is-pinned {
	border-color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

.athena-cat__media {
	position: relative;
	margin-bottom: 0.35rem;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 4 / 3;
	background: var(--story-packshot);
}

.athena-cat__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* On the photo, so pinning moves nothing. */
.athena-cat__pin {
	position: absolute;
	top: 0.4rem;
	left: 0.4rem;
	display: none;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.875rem;
	font-weight: 700;
}

.athena-cat__product.is-pinned .athena-cat__pin {
	display: block;
}

.athena-cat__name {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.athena-cat__price {
	margin-top: auto !important;
	font-size: 0.9375rem;
	font-weight: 750;
}

/* The category banner: what shoppers see when the merchandiser switches it on. */
.athena-cat__banner {
	display: grid;
	gap: 0.2rem;
	padding: 0.9rem 1.1rem;
	border-left: 5px solid var(--wp--preset--color--accent);
	border-radius: 14px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.athena-cat__banner[hidden] {
	display: none;
}

.athena-cat__banner-title {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.25;
}

.athena-cat__banner-text {
	font-size: 0.9375rem;
}

/* Infinite scroll: the end of the list loads the next page; how many are shown, and the
   button for those who'd rather press it. */
.athena-cat__more {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0 0.25rem;
}

.athena-cat__more > * {
	margin: 0 !important;
}

.athena-cat__showing {
	display: none;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.has-js .athena-cat__more:not(.is-done) .athena-cat__showing {
	display: block;
}

.has-js .athena-cat__more.is-empty {
	display: none;
}

.has-js .athena-cat__more:not(.is-done) .athena-cat__more-button {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.2rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 650;
	cursor: pointer;
}

.athena-cat__more-button[aria-busy="true"] {
	cursor: progress;
}

.athena-cat__end {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

.has-js .athena-cat__more:not(.is-done) .athena-cat__end {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.athena-cat__product.is-changed,
	.athena-cat__banner.is-changed {
		animation: athena-cat-changed 1.1s var(--story-ease);
	}

	.athena-cat__product.is-arriving {
		animation: athena-cat-arrive 0.5s var(--story-ease) both;
	}
}

@keyframes athena-cat-changed {
	0%,
	100% {
		box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent), 0 0 0 0 var(--wp--preset--color--accent-soft);
	}

	35% {
		box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent), 0 0 0 6px var(--wp--preset--color--accent-soft);
	}
}

@keyframes athena-cat-arrive {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Tablets and phones: a compact panel right above the results it changes, the two tools
   side by side when they fit; the results show what leads the category, so the "first"
   list steps aside. */
@media (max-width: 960px) {
	.athena-cat__merchant {
		/* min(): one track never grows wider than the panel on a 320 px phone. */
		grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
		column-gap: 1.25rem;
		padding: 0.75rem 1rem !important;
	}

	.athena-cat__merchant > .athena-cat__side {
		grid-column: 1 / -1;
	}

	.athena-cat__top {
		display: none;
	}
}

/* Phones: each tool is one row, its name and one-line effect beside its switch, the whole
   row the tap target; the dashboard path is in the walkthrough below. */
@media (max-width: 640px) {
	/* Two fixed rows, so choosing a filter never changes the toolbar's height (nothing
	   under the shopper's finger moves): the count with "Clear filters" (its room always
	   kept, shown while a filter is chosen), then the sort, full width. */
	.has-js .athena-cat__toolbar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.25rem 0.75rem;
	}

	.has-js .athena-cat__toolbar .athena-cat__count {
		margin-right: 0 !important;
	}

	.has-js .athena-cat__sort {
		grid-column: 1 / -1;
	}

	.athena-cat__sort select {
		flex: 1;
		max-width: none;
	}

	.athena-cat__sort label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.athena-cat__merchant {
		gap: 0;
		padding: 0.5rem 0.85rem !important;
	}

	.athena-cat__merchant > .athena-cat__side {
		padding-bottom: 0.25rem;
	}

	/* Name over its effect, the switch beside both. */
	.has-js .athena-cat__tool {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 0.75rem;
		row-gap: 0;
		padding-block: 0.4rem;
	}

	.has-js .athena-cat__tool-head {
		display: contents;
	}

	.has-js .athena-cat__tool-name {
		grid-column: 1;
		grid-row: 1;
	}

	.has-js .athena-cat__switch {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.has-js .athena-cat__tool-text {
		grid-column: 1;
		grid-row: 2;
	}

	.has-js .athena-cat__path {
		display: none;
	}

	.athena-cat__facet {
		grid-template-columns: 3.75rem minmax(0, 1fr);
	}

	.athena-cat__sort select {
		font-size: 1rem;
	}
}

/* Phones: each filter's name sits above its options, so the options get the full width
   and Colour and Price need fewer lines. */
@media (max-width: 600px) {
	.athena-cat__facet {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.1rem;
	}

	.athena-cat__facet-label {
		line-height: 1.2;
	}

	.athena-cat__options {
		gap: 0.3rem;
	}

	/* The tile row at the 44 px minimum. */
	.athena-cat__facet--tile .athena-cat__option {
		padding-block: 0.2rem;
	}

	/* A smaller dot and snugger padding: four colours to a line from 390 px. */
	.athena-cat__facet--swatch .athena-cat__option {
		gap: 0.35rem;
		padding-right: 0.45rem;
		padding-left: 0.7rem;
	}

	.athena-cat__facet--swatch .athena-cat__swatch {
		width: 1.125rem;
		height: 1.125rem;
	}

	/* The price ranges share one row; a label wraps inside its button when it must. */
	.athena-cat__facet--price .athena-cat__options {
		display: grid;
		grid-auto-columns: minmax(0, max-content);
		grid-auto-flow: column;
	}

	.athena-cat__facet--price .athena-cat__option {
		justify-content: center;
		padding-inline: 0.4rem;
		border-radius: 14px;
		text-align: center;
		white-space: normal;
	}
}

/* ── Search Merchandising: results and the rules console ──────── */

/*
 * One panel: the merchandiser's console beside the shopper's results on wide screens, a
 * compact panel above them on phones and tablets. Every result row has the same height and
 * the list always shows one page, so re-ranking never changes the list's height; a redirect
 * takes the list's place in the same cell. Without JavaScript the console lists the active
 * rules and the results show the merchandised order. All text 0.875rem or larger.
 */
.athena-merch {
	--merch-row: 4.25rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	align-content: start;
}

.athena-merch > *,
.athena-merch__console > *,
.athena-merch__rule > *,
.athena-merch__shop > * {
	min-width: 0;
	margin: 0 !important;
}

@media (min-width: 961px) {
	.athena-merch {
		grid-template-columns: 22rem minmax(0, 1fr);
		column-gap: 1.25rem;
	}

	.athena-merch__bar {
		grid-column: 1 / -1;
	}
}

.athena-story--merch .athena-story__tag,
.athena-story--merch .athena-story__note {
	font-size: 0.875rem;
}

.athena-merch :is(button):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* The merchandiser's side: a card of its own colour, as in the category demo. */
.athena-merch__console {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding: 1rem !important;
	border: 1px solid var(--athena-border-strong);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.athena-merch__rules {
	display: grid;
}

.athena-merch__rule {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.2rem 0.75rem;
	padding-block: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.athena-merch__rule-name {
	grid-column: 1;
	font-size: 0.9375rem;
	font-weight: 750;
	line-height: 1.3;
}

.athena-merch__rule-sub {
	font-weight: 600;
}

.athena-merch__switch,
.athena-merch__static {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.athena-merch__static {
	font-size: 0.875rem;
	font-weight: 750;
}

.has-js .athena-merch__static {
	display: none;
}

/* The whole row answers a tap on its switch (the switch's ::after covers the row). */
.has-js .athena-merch__rule:hover .athena-cat__track {
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent-soft);
}

.athena-merch__rule-body {
	display: grid;
	gap: 0.35rem;
	grid-column: 1;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.4;
}

.athena-merch__rule-body > * {
	margin: 0 !important;
}

.athena-merch__tag {
	display: inline-block;
	margin-left: 0.25rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

/* A rule's fields, as the dashboard's columns name them. */
.athena-merch__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.athena-merch__fields > div {
	display: inline-flex;
	gap: 0.3rem;
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--raised);
}

.athena-merch__fields dd {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/* Phones only (below): the one-line effect and the "Rule details" toggle. */
.athena-merch__effect,
.athena-merch__more {
	display: none;
}

/* The console's title, and the way back to the opening state (only with JavaScript). Where
   both do not fit on one line (a longer translation on a 320 px phone), the button wraps
   under the title and stays right-aligned. */
.athena-merch__console-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	/* Reset is pushed right by its auto margin, so the column gap is only the minimum
	   space between the two. Kept small so they share a line on 390px phones. */
	gap: 0.25rem 0.5rem;
	min-height: 2.75rem;
}

.athena-merch__console-head > .athena-merch__reset {
	margin-left: auto !important;
}

.athena-merch__console-head > * {
	margin: 0 !important;
}

/* What the last switch changed. Only with JavaScript: it talks about switching. Its height
   is reserved for the longest message, so nothing under it moves. */
.athena-merch__console-foot {
	display: none;
}

.has-js .athena-merch__console-foot {
	display: block;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--border);
	scroll-margin-top: 6.5rem;
}

.athena-merch__changed {
	min-height: 5.6em;
	margin: 0 !important;
	font-size: 0.9375rem;
	font-weight: 650;
	line-height: 1.4;
}

/* "Search “down jacket”": the rule's own search, when the switch's rule works elsewhere.
   A link-like button in the line; its 44 px target reaches into the line's spacing. */
.athena-merch__offer {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-block: -0.7rem;
	padding: 0 0.15rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 750;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	vertical-align: middle;
	cursor: pointer;
}

.athena-merch__offer[hidden] {
	display: none;
}

.athena-merch__offer::after {
	content: " \2192" / "";
	white-space: pre;
}

.athena-merch__reset {
	display: none;
}

.has-js .athena-merch__reset {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.4rem 1.1rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 650;
	white-space: nowrap;
	cursor: pointer;
}

.athena-merch__reset:hover {
	border-color: var(--wp--preset--color--brand);
}

/* The shopper's side. */
.athena-merch__shop {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	scroll-margin-top: 6.5rem;
}

/* Wide screens: the rules column is the taller one; the results stay in view beside it
   (sticky below the site header, as the category demo's merchant column), so no blank
   column grows under them. The panel's grid bounds it: it never reaches the footer. */
@media (min-width: 961px) {
	.athena-merch__shop {
		position: sticky;
		top: 6.5rem;
		align-self: start;
	}
}

.athena-merch__shop:focus {
	outline: none;
}

.athena-merch__search {
	display: grid;
	gap: 0.5rem;
}

.athena-merch__search > * {
	margin: 0 !important;
}

.athena-merch__box {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	font-weight: 650;
}

.athena-merch__box svg {
	color: var(--wp--preset--color--muted);
}

.athena-merch__queries {
	display: none;
}

.has-js .athena-merch__queries {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.athena-merch__queries-label {
	margin-right: 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 700;
}

.athena-merch__pick {
	padding-inline: 0.9rem;
}

.athena-merch__shop-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.15rem 1rem;
}

.athena-merch__shop-head > * {
	margin: 0 !important;
}

/* The count; a search with no match puts its note here, on a line of its own. */
.athena-merch__count {
	min-height: 1.4em;
	font-size: 0.9375rem;
	font-weight: 750;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.athena-merch__banner {
	scroll-margin-top: 6.5rem;
}

/* "Hidden by a rule: …": a quiet line under the results; one line kept for it. */
.athena-merch__hidden {
	min-height: 1.4em;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

/* The list and a redirect share one cell: the stage keeps the list's height. */
.athena-merch__stage {
	display: grid;
}

.athena-merch__stage > * {
	grid-area: 1 / 1;
	min-width: 0;
	margin: 0 !important;
}

.athena-merch__list {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	counter-reset: athena-merch;
}

.athena-merch__list.is-away {
	visibility: hidden;
}

/* One result: the photo with its rank, then the name (two lines at most), the price and the
   merchandiser's mark. Every row the same height. */
.athena-merch__item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
	height: var(--merch-row);
	padding: 0.35rem 0.75rem 0.35rem 0.35rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--raised);
	counter-increment: athena-merch;
}

.athena-merch__item[hidden] {
	display: none;
}

.athena-merch__item.is-pinned {
	border-color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

.athena-merch__thumb {
	position: relative;
	display: block;
	width: calc((var(--merch-row) - 0.7rem - 2px) * 4 / 3);
	height: calc(var(--merch-row) - 0.7rem - 2px);
	overflow: hidden;
	border-radius: 9px;
	background: var(--story-packshot);
}

.athena-merch__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The rank, on the photo's corner. */
.athena-merch__item::before {
	content: counter(athena-merch);
	position: absolute;
	z-index: 1;
	top: 0.2rem;
	left: 0.2rem;
	display: grid;
	place-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.875rem;
	font-weight: 750;
	line-height: 1;
}

.athena-merch__info {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.15rem 0.6rem;
}

/* "↑ from #8" / "New in top 6": what a rule did to this result, beside its price. The
   line is there when empty, so a cue never changes the row. */
.athena-merch__move {
	grid-column: 2;
	grid-row: 2;
	min-height: 1.3em;
	overflow: hidden;
	color: var(--athena-success);
	font-size: 0.875rem;
	font-weight: 750;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.athena-merch__name {
	grid-column: 1 / -1;
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.athena-merch__price {
	grid-column: 1;
	grid-row: 2;
	font-size: 0.9375rem;
	font-weight: 650;
}

.athena-merch__mark {
	display: none;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

.athena-merch__item.is-pinned .athena-merch__mark--pinned {
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.athena-merch__item.is-boosted .athena-merch__mark--boosted {
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

/* Room for the mark beside the name, so a marked row keeps its height. */
.athena-merch__item:is(.is-pinned, .is-boosted) .athena-merch__info {
	padding-right: 5.5rem;
}

/* A keyword redirect: the page the shopper lands on, in the list's place. */
.athena-merch__redirect {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 14px;
	background: var(--wp--preset--color--raised);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

.athena-merch__redirect[hidden] {
	display: none;
}

.athena-merch__redirect > * {
	margin: 0 !important;
}

.athena-merch__redirect-label {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 700;
}

.athena-merch__url {
	justify-self: start;
	max-width: 100%;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	font-size: 0.9375rem;
	font-weight: 650;
	overflow-wrap: anywhere;
}

.athena-merch__redirect-title {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
}

.athena-merch__redirect-text {
	font-size: 0.9375rem;
}

/* Tablets and phones: the console is a compact panel above the results, its rules side by
   side where two fit. */
@media (max-width: 960px) {
	.athena-merch__rules {
		/* min(): one track never grows wider than the console on a 320 px phone. */
		grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
		column-gap: 1.25rem;
	}
}

/* Phones: the results need the room. Rows hold the name (two lines at most), the price
   and the merchandiser's mark, then the rule's cue on a line of its own. */
@media (max-width: 640px) {
	.athena-merch {
		--merch-row: 6rem;
		gap: 0.5rem;
	}

	.athena-merch__console {
		gap: 0.25rem;
		padding: 0.35rem 0.85rem 0.5rem !important;
	}

	.athena-merch__rule {
		padding-block: 0.45rem;
	}

	.athena-merch__shop {
		gap: 0.5rem;
	}

	.athena-merch__item {
		gap: 0.6rem;
		padding-right: 0.6rem;
	}

	.athena-merch__info {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	/* The mark moves under the name, beside the price; the cue goes under them. */
	.athena-merch__item:is(.is-pinned, .is-boosted) .athena-merch__info {
		padding-right: 0;
	}

	.athena-merch__item.is-pinned .athena-merch__mark--pinned,
	.athena-merch__item.is-boosted .athena-merch__mark--boosted {
		position: static;
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		transform: none;
	}

	.athena-merch__move {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

/* Phones: each rule is one compact row: the dashboard screen's name, what the rule does in
   one line, and the switch; the whole row (but its "Rule details" toggle) is the switch's
   target. The rest (search terms, schedule, booster fields, redirect target, banner
   position, dashboard path) folds away under "Rule details". The search examples' label is
   for screen readers: the buttons under the search box speak for themselves. */
@media (max-width: 600px) {
	.has-js .athena-merch__rule {
		grid-template-columns: minmax(0, 1fr) 1.5rem auto;
		align-content: center;
		gap: 0 0.3rem;
		min-height: 2.75rem;
		padding-block: 0;
	}

	.has-js .athena-merch__rule-name {
		grid-column: 1;
		grid-row: 1;
		font-size: 0.875rem;
		line-height: 1.25;
	}

	/* "products to boost / exclude": in the switch's name, out of the row. */
	.has-js .athena-merch__rule-sub,
	.has-js .athena-merch__queries-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.has-js .athena-merch__effect {
		display: block;
		grid-column: 1;
		grid-row: 2;
		overflow: hidden;
		color: var(--wp--preset--color--muted);
		font-size: 0.875rem;
		line-height: 1.3;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* A narrow chevron column; the button is a 44 × 44 px square reaching over the column's
	   spacing on both sides. */
	.has-js .athena-merch__more {
		position: relative;
		z-index: 1;
		display: grid;
		grid-column: 2;
		grid-row: 1 / span 2;
		place-items: center;
		align-self: center;
		width: 2.75rem;
		height: 2.75rem;
		margin-inline: -0.625rem;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
	}

	.has-js .athena-merch__more svg {
		border-radius: 999px;
	}

	.has-js .athena-merch__more:hover svg {
		background: var(--wp--preset--color--raised);
	}

	.athena-merch__box {
		min-height: 2.5rem;
	}

	/* The example searches: one row of equal buttons, a long search on two lines. */
	.has-js .athena-merch__queries {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.athena-merch__pick {
		justify-content: center;
		padding-inline: 0.5rem;
		border-radius: 14px;
		line-height: 1.2;
		text-align: center;
		white-space: normal;
	}

	.athena-merch__count {
		font-size: 0.875rem;
	}

	.athena-merch__more svg {
		transition: transform 0.2s ease;
	}

	.athena-merch__more[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.has-js .athena-merch__switch {
		grid-column: 3;
		gap: 0;
		padding-inline: 0.15rem 0;
	}

	/* The track shows the state on phones; the words stay for wider screens. */
	.has-js .athena-merch__switch .athena-cat__state {
		display: none;
	}

	/* The details open under the row and are not part of the switch's target. */
	.has-js .athena-merch__rule-body {
		position: relative;
		z-index: 1;
		grid-column: 1 / -1;
		grid-row: 3;
		padding-block: 0.35rem 0.2rem;
	}

	.has-js .athena-merch__rule:not(.is-open) .athena-merch__rule-body {
		display: none;
	}

	.athena-merch__changed {
		min-height: 5.6em;
		font-size: 0.875rem;
	}

	.has-js .athena-merch__console-foot {
		padding-top: 0.45rem;
	}

	.athena-merch__console {
		padding-bottom: 0.35rem !important;
	}
}

/* Narrow phones: the longest message takes a fifth line. */
@media (max-width: 379px) {
	.athena-merch__changed {
		min-height: 7em;
	}
}

/* ── Demo kit: parts the interactive demos share (inc/demos/kit.php) ── */

/*
 * A recreated store search box. With JavaScript it is a real search field; without it, the
 * same box shows the opening search as text (no dead control). The field and the text share
 * one cell, so nothing moves when the script starts. 16 px text: phones don't zoom on focus.
 */
.athena-kit-search {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.55rem;
	min-height: 3rem;
	padding: 0 0.5rem 0 1rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--contrast);
}

.athena-kit-search:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent-soft);
}

.athena-kit-search__icon {
	color: var(--wp--preset--color--muted);
}

.athena-kit-search__input,
.athena-kit-search__static {
	grid-area: 1 / 2;
	min-width: 0;
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.4;
}

.athena-kit-search__input {
	visibility: hidden;
	width: 100%;
	min-height: 2.75rem;
	padding: 0 0.25rem;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: inherit;
	outline: none;
	appearance: none;
}

.athena-kit-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	opacity: 1;
}

.has-js .athena-kit-search__input {
	visibility: visible;
}

.has-js .athena-kit-search__static {
	visibility: hidden;
}

.athena-kit-search__static {
	overflow: hidden;
	padding: 0 0.25rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Example searches: a caption and buttons (only with JavaScript: they set the search). */
.athena-kit-picks {
	display: none;
}

.has-js .athena-kit-picks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.athena-kit-picks__label {
	margin-right: 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 700;
}

.athena-kit-picks__pick {
	padding-inline: 0.9rem;
}

/* A results list outside the merchandising demo uses its rows (kit.php result_item()). */
.athena-kit-results {
	--merch-row: 4.25rem;
	display: grid;
	gap: 0.5rem;
}

.athena-kit-results > * {
	min-width: 0;
	margin: 0 !important;
}

/* The field's focus shows on its box (:focus-within above), visible in both schemes. */
.athena-kit-search__input:focus-visible {
	outline: none;
}

.athena-kit-search:has(.athena-kit-search__input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ── Search Analytics: an example analytics dashboard ──────────── */

/*
 * Two views, as tabs: Analytics (date range and channel, the Search Funnel, KPI cards) and
 * Poor Results (searches that found nothing, each with its fix). Without JavaScript both
 * views are listed with their current values and the fixes as text. Every line a change
 * writes keeps its space, and the fix panels share one cell, so nothing moves when the
 * visitor acts. All text 0.875rem or larger.
 */
.athena-ana {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	align-content: start;
}

.athena-ana > *,
.athena-ana__view > *,
.athena-ana__poor > *,
.athena-ana__fix > * {
	min-width: 0;
	margin: 0 !important;
}

.athena-story--ana .athena-story__tag,
.athena-story--ana .athena-story__note {
	font-size: 0.875rem;
}

.athena-ana :is(button, a):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* The views' tabs: a segmented control, as the filters' selected colours. */
.athena-ana__tabs {
	display: none;
}

.has-js .athena-ana__tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem;
	justify-self: start;
	padding: 0.25rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
}

.athena-ana__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.25rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

@media (hover: hover) {
	.athena-ana__tab:hover {
		background: var(--wp--preset--color--raised);
	}
}

.athena-ana__tab[aria-selected="true"] {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Searches left to fix. */
.athena-ana__badge {
	display: inline-grid;
	place-items: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.athena-ana__tab[aria-selected="true"] .athena-ana__badge {
	background: color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
	color: inherit;
}

.athena-ana__view {
	display: grid;
	gap: 0.75rem;
	align-content: start;
}

/* Without JavaScript both views are listed; the second one starts under a line. */
.athena-ana__view + .athena-ana__view {
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.has-js .athena-ana__view + .athena-ana__view {
	padding-top: 0;
	border-top: 0;
}

.has-js .athena-ana__view:not(.is-current) {
	display: none;
}

.athena-ana__view-title {
	font-size: 1rem;
	font-weight: 800;
}

.has-js .athena-ana__view-title {
	display: none;
}

/* Date range and channel: the label above its options. */
.athena-ana__filters {
	display: grid;
	gap: 0.75rem 1.5rem;
}

@media (min-width: 601px) {
	.athena-ana__filters {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

.athena-ana__filter {
	display: grid;
	gap: 0.35rem;
	align-content: start;
}

.athena-ana__filter > * {
	margin: 0 !important;
}

.athena-ana__filter-label {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 700;
}

.athena-ana__options {
	display: none;
}

.has-js .athena-ana__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.athena-ana__option {
	justify-content: center;
	padding-inline: 0.9rem;
}

.athena-ana__static {
	font-size: 0.9375rem;
	font-weight: 700;
}

.has-js .athena-ana__static {
	display: none;
}

/* What the last change showed. Only with JavaScript: it talks about changing. Its lines are
   kept for the longest message, so nothing under it moves. */
.athena-ana__changed {
	display: none;
}

.has-js .athena-ana__changed {
	display: block;
	min-height: 2.8em;
	font-size: 0.9375rem;
	font-weight: 650;
	line-height: 1.4;
}

.athena-ana__body {
	display: grid;
	gap: 0.75rem;
	align-items: start;
}

@media (min-width: 601px) {
	.athena-ana__body {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 1rem;
	}
}

.athena-ana__body > *,
.athena-ana__funnel > * {
	min-width: 0;
	margin: 0 !important;
}

.athena-ana__card-title {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The Search Funnel: one row per stage, its figure, the figure it was, and a bar whose fill
   is the stage's share of the searches. */
.athena-ana__funnel {
	display: grid;
	gap: 0.6rem;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--raised);
}

.athena-ana__stages {
	display: grid;
	gap: 0.75rem;
}

.athena-ana__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.15rem 0.75rem;
}

.athena-ana__stage-name {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.athena-ana__value {
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* Beside a label, a figure keeps the width of the longest one ("26,050"), so a new figure
   never re-wraps the label and the view keeps its height. */
.athena-ana__stage .athena-ana__value {
	min-width: 6.5ch;
}

/* "was 6,240": the figure before the visitor's change. The line is there when empty. */
.athena-ana__was {
	grid-column: 1 / -1;
	min-height: 1.3em;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 650;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.athena-ana__stage .athena-ana__was {
	grid-row: 3;
}

.athena-ana__track {
	grid-column: 1 / -1;
	grid-row: 2;
	display: block;
	height: 0.625rem;
	overflow: hidden;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
}

.athena-ana__fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--accent);
	transform: scaleX(var(--fill, 1));
	transform-origin: left center;
	transition: transform 0.45s var(--story-ease);
}

/* KPI cards: the added-to-cart value leads. */
.athena-ana__kpis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}

.athena-ana__kpi {
	display: grid;
	align-content: start;
	gap: 0.15rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--raised);
}

.athena-ana__kpi > * {
	margin: 0 !important;
}

.athena-ana__kpi .athena-ana__value,
.athena-ana__kpi .athena-ana__was {
	text-align: start;
}

.athena-ana__kpi-name {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
}

.athena-ana__kpi--lead {
	grid-column: 1 / -1;
	border-color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

.athena-ana__kpi--lead .athena-ana__value {
	font-size: 1.75rem;
}

.athena-ana__kpi-text {
	font-size: 0.875rem;
	line-height: 1.4;
}

/* Poor Results: what is left to fix (with Reset), the searches, and the picked one's fix. */
.athena-ana__poor-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.athena-ana__poor-head > * {
	margin: 0 !important;
}

.athena-ana__poor {
	display: grid;
	gap: 0.75rem;
	align-items: start;
}

@media (min-width: 601px) {
	.athena-ana__poor {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 1rem;
	}
}

.athena-ana__list {
	display: grid;
	gap: 0.4rem;
}

.athena-ana__list > * {
	margin: 0 !important;
}

.athena-ana__list-title {
	font-size: 0.9375rem;
	font-weight: 800;
}

.athena-ana__list-range {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.athena-ana__terms {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.2rem !important;
}

/* One search: its words and the searches it had, and what it finds (nothing, until fixed).
   The row's button covers it. */
.athena-ana__term {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.1rem 0.75rem;
	min-height: 3.75rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--raised);
}

.athena-ana__term:has(.athena-ana__pick[aria-pressed="true"]) {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
}

.athena-ana__term-name {
	font-size: 1rem;
	font-weight: 750;
	line-height: 1.3;
}

.athena-ana__term-count {
	grid-row: 2;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.athena-ana__term-result {
	grid-column: 2;
	grid-row: 1 / span 2;
	padding: 0.15rem 0.6rem;
	border: 1px dashed var(--athena-border-strong);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

.athena-ana__term.is-fixed .athena-ana__term-result {
	border-style: solid;
	border-color: currentcolor;
	color: var(--athena-success);
}

.athena-ana__term.is-fixed .athena-ana__term-result::before {
	content: "\2713\00a0" / "";
}

.athena-ana__pick {
	display: none;
}

.has-js .athena-ana__pick {
	position: absolute;
	inset: -1px;
	display: block;
	width: calc(100% + 2px);
	border: 0;
	border-radius: 12px;
	background: transparent;
	cursor: pointer;
}

.has-js .athena-ana__term:not(:has(.athena-ana__pick[aria-pressed="true"])):hover {
	border-color: var(--wp--preset--color--brand);
}

/* One panel per search; with JavaScript they share one cell and only the picked one shows,
   and the fix and its outcome share a cell too. */
.athena-ana__fixes {
	display: grid;
	gap: 0.75rem;
}

.has-js .athena-ana__fixes > * {
	grid-area: 1 / 1;
}

.has-js .athena-ana__fix:not(.is-current) {
	visibility: hidden;
}

.athena-ana__fix {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding: 1rem !important;
	border: 1px solid var(--athena-border-strong);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.athena-ana__fix-term {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.25;
}

.athena-ana__fix-text {
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* A search no rule fixes: what the team can do instead. */
.athena-ana__next {
	padding: 0.6rem 0.8rem;
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 8px;
	background: var(--wp--preset--color--raised);
	font-size: 0.9375rem;
	font-weight: 650;
	line-height: 1.45;
}

.athena-ana__fix-cell {
	display: grid;
	min-width: 0;
}

.has-js .athena-ana__fix-cell > * {
	grid-area: 1 / 1;
}

.athena-ana__before,
.athena-ana__after {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	min-width: 0;
}

.athena-ana__before > *,
.athena-ana__after > * {
	margin: 0 !important;
}

.athena-ana__after {
	display: none;
}

.has-js .athena-ana__after {
	display: grid;
}

.has-js .athena-ana__fix:not(.is-fixed) .athena-ana__after,
.has-js .athena-ana__fix.is-fixed .athena-ana__before {
	visibility: hidden;
}

.athena-ana__where {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.athena-ana__where .athena-merch__tag {
	margin-left: 0;
}

.athena-ana__apply {
	display: none;
}

.has-js .athena-ana__apply {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	min-height: 2.75rem;
	padding: 0.4rem 1.25rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: start;
	cursor: pointer;
}

.athena-ana__apply:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, var(--wp--preset--color--base));
}

.athena-ana__outcome {
	font-size: 0.9375rem;
	font-weight: 750;
	line-height: 1.4;
}

.athena-ana__outcome::before {
	content: "\2713\00a0" / "";
	color: var(--athena-success);
}

.athena-ana__outcome:focus {
	outline: none;
}

/* What the fixed search now finds: the products, or the page it opens. */
.athena-ana__found {
	display: grid;
	gap: 0.4rem;
}

.athena-ana__found li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.6rem;
	padding: 0.3rem 0.75rem 0.3rem 0.3rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--raised);
}

.athena-ana__thumb {
	display: block;
	width: 3.5rem;
	height: 2.625rem;
	overflow: hidden;
	border-radius: 8px;
	background: var(--story-packshot);
}

.athena-ana__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.athena-ana__found-name {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.athena-ana__found-price {
	font-size: 0.9375rem;
	font-weight: 650;
}

.athena-ana__after .athena-merch__url {
	justify-self: start;
}

.athena-ana__page-title {
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.3;
}

/* The way to the merchandising tools behind the fixes. */
.athena-ana__learn a {
	display: inline-block;
	padding-block: 0.7rem;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.athena-ana__learn a::after {
	content: "\00a0\2192" / "";
}

/* Phones: everything in one column; the filters' options share the row in equal cells, the
   small KPI cards become rows (name, figure). */
@media (max-width: 600px) {
	.has-js .athena-ana__tabs {
		justify-self: stretch;
	}

	.athena-ana__tab {
		padding-inline: 0.75rem;
	}

	.has-js .athena-ana__options {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.athena-ana__option {
		padding-inline: 0.6rem;
		white-space: normal;
		text-align: center;
	}

	.has-js .athena-ana__changed {
		min-height: 4.2em;
	}

	.athena-ana__funnel {
		padding: 0.85rem;
	}

	.athena-ana__kpis {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}

	.athena-ana__kpi:not(.athena-ana__kpi--lead) {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
		column-gap: 0.75rem;
	}

	.athena-ana__kpi:not(.athena-ana__kpi--lead) .athena-ana__value {
		min-width: 6.5ch;
		font-size: 1.25rem;
		text-align: end;
	}

	.athena-ana__kpi:not(.athena-ana__kpi--lead) .athena-ana__was {
		text-align: end;
	}

	.athena-ana__fix {
		padding: 0.85rem !important;
	}
}

/* ── Product-page demos on phones: no text under 14 px ─────────── */

/* Labels, product names, prices, notes and the generator's data are read on a phone,
   not glanced at: 0.875rem at least. Wider screens keep the composition above. */
@media (max-width: 640px) {
	.athena-story--signature :is(
		.athena-story__tag,
		.athena-story__note,
		.athena-story__status,
		.athena-story__hint,
		.athena-story__meta,
		.athena-story__match,
		.athena-story__mic-state,
		.athena-story__gen-label,
		.athena-story__row,
		.athena-story__cell dt,
		.athena-story__gen-photo figcaption,
		.athena-story__agent-name,
		.athena-story__field dt,
		.athena-story__uses,
		.athena-story__attr
	) {
		font-size: 0.875rem;
	}

	.athena-story--signature .athena-story__why dt {
		font-size: 0.875rem;
		letter-spacing: 0.02em;
	}

	/* The chat's product rows are already larger. */
	.athena-story--signature .athena-story__chat--scroll .athena-story__meta {
		font-size: 0.9375rem;
	}

	.athena-story--signature .athena-story__agent-no {
		width: 1.5rem;
		height: 1.5rem;
		font-size: 0.875rem;
	}

	/* The generator's source row: always two columns of two, as wider text would
	   otherwise leave one cell alone on a second row. */
	.athena-story--generator .athena-story__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.athena-story--generator .athena-story__cell:nth-child(2n) {
		border-right: 0;
	}

	.athena-story--generator .athena-story__cell:nth-child(n + 3) {
		border-top: 1px solid var(--wp--preset--color--border);
	}
}

@media (prefers-reduced-motion: reduce) {
	.athena-story *,
	.athena-story *::after {
		transition: none !important;
		animation: none !important;
	}
}