/**
 * My Account → Saved Designs listing (#219, restyled in #810).
 *
 * The listing's structure is the account surface's shared vocabulary — the
 * theme's `.lj-panel` and `.lj-order-row`, exactly as the dashboard and the
 * orders list use them — so almost nothing about the row is styled here. What
 * is left are the three things a saved design does not share with an order:
 * the preview tile's sizing, the empty-preview placeholder, and the Load /
 * Delete hierarchy (#782: Load is the teal primary, Delete a quiet danger
 * link, because both used to be identical navy buttons pointing at opposite
 * outcomes).
 *
 * Theme tokens only, every one with a fallback mirroring its value in
 * _tokens.scss / _tokens-deferred.scss — this sheet must stand on its own if
 * main.css has not arrived yet.
 */

/* Panel body: the head divider comes from the theme, the rows bring their
   own separators, so the panel only needs its rows not to touch its edges. */
.lje-account-designs .lje-account-design:last-of-type {
	padding-bottom: 0;
}

/* Preview tile. Wider than an order row's thumbnail (a saved design is the
   subject here, not a label for something else) and letterboxed, never
   cropped: the theme's `--design` modifier already sets object-fit: contain,
   this only sizes the box. */
.lje-account-designs .lje-account-design__preview img {
	width: 96px;
	height: 68px;
}

/* No preview on file (legacy vendor saves without an exported image): keep
   the row's alignment with a quiet crossed-out tile rather than a gap. */
.lje-account-design__nopreview {
	display: block;
	width: 96px;
	height: 68px;
	border: 1px solid var(--lj-color-border, #e2e2e2);
	border-radius: 3px;
	background:
		linear-gradient(
			135deg,
			transparent 46%,
			var(--lj-color-border, #e2e2e2) 47%,
			var(--lj-color-border, #e2e2e2) 53%,
			transparent 54%
		);
}

/* Load — the action the card exists for, so it wears the surface's teal
   primary: within tier 2, the affirmative action of a surface is teal and
   everything else is navy, the same rule that leaves Pay teal on an order.

   Metrics match the orders list's row buttons so a design row and an order
   row line up - which is exactly why this moved with them in #970. The
   `0.55rem` it used to carry was not a token but a line-height leftover, and
   it put 12px type in a 30px box on four separate surfaces. */
.lje-account-design__load {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* No border here, so the padding is the plain token: 14 + 2x8 = 30. */
	padding: var(--lj-space-2, 0.5rem) var(--lj-space-4, 1rem);
	border: 0;
	border-radius: var(--lj-radius-sm, 4px);
	background: var(--lj-color-primary, #00a5b2);
	color: var(--lj-color-text-inverse, #ffffff);
	font-family: inherit;
	font-size: var(--lj-text-sm, 0.875rem);
	font-weight: var(--lj-font-weight-bold, 700);
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.lje-account-design__load:hover,
.lje-account-design__load:focus-visible {
	background: var(--lj-color-primary-hover, #008a96);
	color: var(--lj-color-text-inverse, #ffffff);
}

/* Delete — destructive and secondary: a text link in the accent colour, no
   box, so it can never be mistaken for the way forward. A real <button>, so
   the bare UA chrome has to be stripped by hand. */
.lje-account-design__delete {
	padding: 0;
	border: 0;
	background: none;
	color: var(--lj-color-accent, #fb3640);
	font-family: inherit;
	font-size: var(--lj-text-sm, 0.875rem);
	font-weight: var(--lj-font-weight-medium, 500);
	line-height: 1;
	cursor: pointer;
}

.lje-account-design__delete:hover,
.lje-account-design__delete:focus-visible {
	color: var(--lj-color-accent-hover, #d92a33);
	text-decoration: underline;
}

.lje-account-designs__empty {
	margin: 0;
	color: var(--lj-color-text-muted, #6b6b66);
	font-size: var(--lj-text-sm, 0.875rem);
}

@media (max-width: 600px) {
	/* The row already wraps; pull the actions under the meta and left-align
	   them so they do not hang off the preview's right edge. */
	.lje-account-designs .lje-account-design .lj-order-row__actions {
		width: 100%;
		justify-content: flex-start;
	}
}