/**
 * The short rows and their sub-tabs (AIEO_Favourites): the side cart's Favourites and Recently viewed tabs and the
 * «Favourites» section of My Account. One sheet for both; loaded only where one of them is shown (the account's
 * section, the side cart at its first opening).
 *
 * The theme's tokens only. No colour of our own, not as a fallback either: where a theme has no such token the
 * declaration falls away and the part keeps the colour around it (a line takes the text's colour). Lengths and
 * sizes carry the tokens' own values as fallbacks, so the rows keep their shape on any theme.
 *
 * The containers' rules are defaults at zero specificity (:where). The links, the buttons and the picture carry
 * the component's own class twice, enough to stand against a reset written for elements (button, a, img) and no
 * more.
 */

/* ---- The section ------------------------------------------------------------------------------------------- */

:where(.aieo-favs) {
	display: grid;
	gap: var(--wp--preset--spacing--3, 0.75rem);
	min-width: 0;
}
:where(.aieo-favs__panel) {
	min-width: 0;
}

/* ---- The sub-tabs: text tabs, quiet counts, a 2px underline on the chosen one ------------------------------ */

:where(.aieo-subtabs) {
	display: flex;
	margin: 0;
	padding: 4px 4px 0;
	/* The hairline under the row, inside it: the chosen tab's underline lies on it. */
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--line);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-padding-inline: 4px;
}
:where(.aieo-subtabs)::-webkit-scrollbar {
	display: none;
}
/* More tabs follow: the row fades out at its end. The mask's colour is never painted. */
.aieo-subtabs.is-more {
	-webkit-mask-image: linear-gradient(to right, CanvasText calc(100% - 40px), transparent);
	mask-image: linear-gradient(to right, CanvasText calc(100% - 40px), transparent);
}
.aieo-subtabs.is-more:dir(rtl) {
	-webkit-mask-image: linear-gradient(to left, CanvasText calc(100% - 40px), transparent);
	mask-image: linear-gradient(to left, CanvasText calc(100% - 40px), transparent);
}
.aieo-subtabs .aieo-subtabs__tab {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 44px;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	font-stretch: 105%;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 160ms;
}
.aieo-subtabs .aieo-subtabs__tab:first-child {
	padding-inline-start: 0;
}
.aieo-subtabs .aieo-subtabs__tab::after {
	content: "";
	position: absolute;
	inset-inline: 8px;
	bottom: 0;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.aieo-subtabs .aieo-subtabs__tab:first-child::after {
	inset-inline-start: 0;
}
.aieo-subtabs .aieo-subtabs__tab:hover,
.aieo-subtabs .aieo-subtabs__tab[aria-selected="true"] {
	color: var(--wp--preset--color--fg);
}
.aieo-subtabs .aieo-subtabs__tab[aria-selected="true"]::after {
	transform: scaleX(1);
}
.aieo-subtabs .aieo-subtabs__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
	box-shadow: none;
}
:where(.aieo-subtabs__count) {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

/* ---- The rows ---------------------------------------------------------------------------------------------- */

ul.aieo-mini {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}
:where(.aieo-mini__row) {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--3, 0.75rem);
	align-items: center;
	margin: 0;
	padding: var(--wp--preset--spacing--3, 0.75rem) 0;
	/* The line takes the token's colour; without the token, the text's. */
	border-bottom: 1px solid;
	border-bottom-color: var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}
/* A row taken out waits hidden for the server's answer. */
.aieo-mini__row[hidden] {
	display: none;
}
:where(.aieo-mini__empty) {
	margin: 0;
	padding: var(--wp--preset--spacing--3, 0.75rem) 0;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

/* The picture: 56px, 4:5, on the theme's quiet ground while it loads. */
.aieo-mini .aieo-mini__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--wp--preset--color--subtle);
	color: inherit;
	text-decoration: none;
}
.aieo-mini .aieo-mini__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.aieo-mini .aieo-mini__media--logo .aieo-mini__img {
	object-fit: contain;
}
/* No picture: the name's two letters in a frame of the text's colour. */
.aieo-mini .aieo-mini__media--mark {
	display: grid;
	place-items: center;
	border: 1px solid;
	background: var(--wp--preset--color--bg);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* The name, a small line, the price: three lines of one block. The name stays an inline link and states its whole
 * look (its ground and padding too): a theme's styles for the links of a page's content reach the account page and
 * not the drawer, and the rows are the same in both. Its line on hover is drawn by the link itself in the text's
 * colour, under the words of every line; the Rooster theme's link motion holds text-decoration from a layer. */
:where(.aieo-mini__text) {
	min-width: 0;
}
:where(.aieo-mini__meta, .aieo-mini__price) {
	display: block;
	margin-top: 2px;
}
/* The name's line is its own, in the text's colour, drawn from the start to the end; it grows where the theme's links
 * do (its Design setting, the class on the body), else it is there at once (the owner, 12 Nov 2026: "It has to be the
 * gradual line from left to right!"). */
.aieo-mini .aieo-mini__name {
	padding: 0;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	color: inherit;
	font-weight: 600;
	font-stretch: 105%;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.aieo-mini .aieo-mini__name:hover,
.aieo-mini .aieo-mini__name:focus-visible {
	background-size: 100% 1px;
}
@media (prefers-reduced-motion: no-preference) {
	.rooster-link-motion--underline .aieo-mini .aieo-mini__name {
		transition: background-size 220ms cubic-bezier(.2, .7, .2, 1);
	}
}
:where(.aieo-mini__meta) {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
}
:where(.aieo-mini__warn) {
	color: var(--wp--preset--color--warning-ink);
	font-weight: 600;
}
:where(.aieo-mini__price) {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
:where(.aieo-mini__price) s {
	margin-inline-start: 4px;
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

/* The button (the theme's outline button, shorter) and the heart. */
:where(.aieo-mini__actions) {
	display: flex;
	align-items: center;
	gap: 2px;
}
.aieo-mini .aieo-mini__btn.wp-element-button.is-style-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--3, 0.75rem);
	white-space: nowrap;
	text-decoration: none;
}
/* The side cart puts a quantity stepper in the button's place: the theme's display would keep it shown. */
.aieo-mini .aieo-mini__btn.wp-element-button[hidden] {
	display: none;
}
.aieo-mini .aieo-mini__btn.is-done,
.aieo-mini .aieo-mini__btn.is-busy {
	pointer-events: none;
}
.aieo-mini .aieo-mini__heart {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--fg);
	cursor: pointer;
}
:where(.aieo-mini__heart) svg {
	display: block;
	width: 18px;
	height: 18px;
	transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.aieo-mini .aieo-mini__heart:hover svg {
	transform: scale(1.12);
}
.aieo-mini .aieo-mini__heart:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	box-shadow: none;
}

/* The rows after the first twenty. */
.aieo-mini__more.wp-element-button.is-style-outline {
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin-block-start: var(--wp--preset--spacing--3, 0.75rem);
}

/* ---- The foot under Recently viewed: where the list is kept, and the button that empties it ---------------- */

:where(.aieo-mini-foot) {
	display: grid;
	gap: var(--wp--preset--spacing--3, 0.75rem);
	padding-block: var(--wp--preset--spacing--4, 1rem);
}
:where(.aieo-mini-foot__note) {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
}
.aieo-mini-foot__btn.wp-element-button.is-style-outline {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
}
:where(.aieo-mini__empty):focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.aieo-subtabs .aieo-subtabs__tab,
	.aieo-subtabs .aieo-subtabs__tab::after,
	:where(.aieo-mini__heart) svg {
		transition: none;
	}
}
@media (forced-colors: active) {
	.aieo-subtabs .aieo-subtabs__tab[aria-selected="true"]::after {
		background: Highlight;
	}
}