/* ==========================================================================
   My List

   No export covers this page — showroom-floor.css has no saved-list screen —
   so it is built from theme.json's own scale rather than converted. Two
   geometry decisions are worth stating because neither invents a value:

   The thumbnail column is `spacing--80`. A row needs a fixed image width and
   the scale's largest step is exactly the size a list thumbnail wants, so the
   column is a spacing step used as a track rather than a new token.

   The page is capped at the `62ch` measure the enquiry dialog already uses.
   A row spanning the full 1320px content width puts the piece's name and its
   Remove control at opposite ends of the screen, which is a long way to look
   to confirm you are deleting the right thing. The cap sits on the whole
   column rather than on the list, so the heading, any intro copy an editor
   adds, and the rows all line up on the same left edge.
   ========================================================================== */

.tfs-my-list-page {
	max-width: min(62ch, 100%);
	margin-inline: auto;
}

.tfs-my-list-page > :first-child {
	margin-top: 0;
}

.tfs-my-list {
	margin-top: var(--wp--preset--spacing--40);
}

/* Loading, error, and empty all sit in the same place in the flow. */
.tfs-my-list__state {
	margin: 0;
	padding-block: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}

.tfs-my-list__empty-lead {
	margin: 0 0 var(--wp--custom--step--12);
	font-size: var(--wp--preset--font-size--sub);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--ink);
}

.tfs-my-list__empty-body {
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: 48ch;
}

/* ---------- Rows ---------- */

.tfs-my-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--wp--custom--hairline);
}

/*
 * Two columns under 600px: the image spans both rows of the text column, so a
 * Remove control that will not fit beside the name drops beneath it rather
 * than squeezing the name to nothing at 360px.
 */
.tfs-my-list__row {
	display: grid;
	grid-template-columns: var(--wp--preset--spacing--80) minmax(0, 1fr);
	gap: var(--wp--custom--step--12) var(--wp--preset--spacing--20);
	align-items: start;
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: var(--wp--custom--hairline);
}

.tfs-my-list__media {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--wp--custom--aspect--tile);
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--hairline);
	border-radius: var(--wp--custom--radius);
}

.tfs-my-list__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: var(--wp--preset--color--placeholder);
}

.tfs-my-list__body {
	grid-column: 2;
	display: grid;
	gap: var(--wp--custom--step--4);
	min-width: 0;
}

.tfs-my-list__collection,
.tfs-my-list__name,
.tfs-my-list__price {
	margin: 0;
}

.tfs-my-list__collection {
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.tfs-my-list__collection-link {
	color: inherit;
	text-decoration: none;
}

.tfs-my-list__collection-link:hover {
	color: var(--wp--preset--color--ink);
}

.tfs-my-list__collection-link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/*
 * Body face at `sub`, matching the product tile. The display face is reserved
 * for H1 and H2 and floors at 28px; this is an h2 by document structure, not
 * by type treatment.
 */
.tfs-my-list__name {
	font-size: var(--wp--preset--font-size--sub);
	font-family: var(--wp--preset--font-family--body);
	line-height: var(--wp--custom--line-height--body);
	font-weight: 400;
}

.tfs-my-list__link {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tfs-my-list__link:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

.tfs-my-list__link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.tfs-my-list__price {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.tfs-my-list__floors {
	display: grid;
	gap: var(--wp--custom--step--4);
	margin: var(--wp--custom--step--4) 0 0;
	padding: 0;
	list-style: none;
}

.tfs-my-list__remove {
	grid-column: 2;
	justify-self: start;
}

@media (min-width: 600px) {
	.tfs-my-list__row {
		grid-template-columns: var(--wp--preset--spacing--80) minmax(0, 1fr) max-content;
	}

	.tfs-my-list__media {
		grid-row: 1;
	}

	.tfs-my-list__remove {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
}

/* ---------- Actions ---------- */

/*
 * Order is the brief's, and it is load-bearing: getting a buyer into a
 * showroom is the point of the site, mailing yourself a list is a convenience,
 * and printing is a fallback. The DOM order is the priority order, so the
 * keyboard meets them in the same order the eye does.
 */
.tfs-my-list__actions {
	display: grid;
	gap: var(--wp--custom--step--12);
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * An author `display` outranks the user agent's [hidden] rule, so anything
 * given one here has to opt back in to hiding. Without this the three actions
 * sit under an empty list offering to send it.
 */
.tfs-my-list__actions[hidden] {
	display: none;
}

@media (min-width: 600px) {
	.tfs-my-list__actions {
		grid-auto-flow: column;
		justify-content: start;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.tfs-my-list__remove,
	.tfs-my-list__action {
		transition: none;
	}
}