/* ==========================================================================
   Alice Academy — product card.

   The card from woocommerce/content-product.php: a white, centred tile with a
   hairline border, a square object-contain product shot on white, a category
   eyebrow, the name, an optional variation pill row, the price and a
   full-width add-to-bag button. Built to hold its shape across the grid at
   five, four, three and two across, and to go borderless on rails (that rule
   lives in home.css).

   Colour comes from the --aa-* tokens only.
   ========================================================================== */

/* ------------------------------------------------------------------ shell */

.aa-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: .5rem;
	background: var(--aa-surface);
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius-card);
	text-align: center;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.aa-card:hover { border-color: var(--aa-hairline-strong); }
.aa-card:focus-within { border-color: var(--aa-ink); }

@media (min-width: 700px) { .aa-card { padding: .75rem; } }

/* --------------------------------------------------------------- the image */

/* Square, white-backed, contain — the storefront's cutout treatment. */
.aa-card .aa-card__media {
	position: relative;
	display: block;
	flex: none;
	aspect-ratio: 1 / 1;
	border-radius: var(--aa-radius-card);
	background: var(--aa-surface);
	overflow: hidden;
}

.aa-card .aa-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 6%;
}

/* --------------------------------------------------------------- the badges */

.aa-badge {
	position: absolute;
	inset-block-start: .5rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: .3rem .6rem;
	border-radius: var(--aa-radius-pill, 999px);
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 800;
	font-size: .5625rem;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
	pointer-events: none;
}

/* Merchandising / sale flash — rose by default, top-left. */
.aa-badge {
	inset-inline-start: .5rem;
	background: var(--aa-rose);
	color: var(--aa-surface);
}

/* Sale keeps the dedicated signal colour. */
.aa-badge--sale { background: var(--aa-sale); color: var(--aa-surface); }

/* "Sold out" — soft, top-right. */
.aa-badge--out {
	inset-inline-start: auto;
	inset-inline-end: .5rem;
	background: var(--aa-surface-muted);
	color: var(--aa-muted);
}

/* ------------------------------------------------------------------- body */

.aa-card .aa-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	padding: .75rem .35rem .35rem;
}

.aa-card__eyebrow {
	margin: 0;
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 700;
	font-size: .625rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aa-subtle);
}

.aa-card .aa-card__title {
	margin: 0;
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 700;
	font-size: .78125rem;
	letter-spacing: .02em;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--aa-ink);
}
@media (min-width: 700px) { .aa-card .aa-card__title { font-size: .8125rem; } }

.aa-card .aa-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .2s ease;
}
.aa-card .aa-card__title a:hover { color: var(--aa-rose); }

/* ------------------------------------------------------------------- form */

/* Pinned to the foot so buttons line up across a row whatever the name wraps to. */
.aa-card__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	width: 100%;
	margin: 0;
	margin-top: auto;
	padding-top: .5rem;
}

/* -------------------------------------------------------------- the price */

.aa-card .aa-card__price {
	margin: 0;
	padding: 0;
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 800;
	font-size: .9375rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	color: var(--aa-ink);
}
.aa-card .aa-card__price del { font-weight: 600; font-size: .8125rem; color: var(--aa-subtle); opacity: 1; }
.aa-card .aa-card__price ins { text-decoration: none; }
.aa-card .aa-price__from { font-weight: 600; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--aa-subtle); }

/* Sold-out / link cards have no form to pin, so the price and the button
   take the job of holding the foot of the card. */
.aa-card .aa-card__body > .aa-card__price { margin-top: auto; padding-top: .5rem; }
.aa-card .aa-card__body > .aa-card__add { margin-top: .5rem; width: 100%; }

/* -------------------------------------------------------------- the button */

.aa-card .aa-card__add {
	width: 100%;
	min-height: 2.375rem;
	padding: .6rem .5rem;
	font-size: .625rem;
	letter-spacing: .12em;
}

.aa-card .aa-card__add[disabled],
.aa-card .aa-card__add[aria-disabled="true"] {
	background: var(--aa-surface-muted);
	border-color: var(--aa-surface-muted);
	color: var(--aa-subtle);
	cursor: not-allowed;
}
.aa-card .aa-card__add[disabled]:hover {
	background: var(--aa-surface-muted);
	border-color: var(--aa-surface-muted);
	color: var(--aa-subtle);
}

a.aa-card__add { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.aa-card,
	.aa-card__pill,
	.aa-card .aa-card__title a { transition: none; }
}