/* ==========================================================================
   ARFA KHUSHBOO — product card.

   The card from woocommerce/content-product.php: a bordered white tile with a
   square image, a cash-on-delivery bar, the name, a grey qualifier, size pills
   and a full-width add-to-cart button. Built to survive the .ak-grid at five,
   four, three and two across without the pills dropping below a 32px target.

   Everything here is scoped to .ak-card. Selectors that restate a rule from
   theme.css are written as `.ak-card .ak-card__x` so they win on specificity
   rather than on load order. Colour comes from tokens only — the palette is
   black, white and grey, and this file adds no exceptions.
   ========================================================================== */

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

.ak-card {
	padding: .4rem;
	background: var(--ak-white);
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius-lg);
	transition: border-color .2s var(--ak-ease), box-shadow .2s var(--ak-ease);
}

.ak-card:hover { border-color: var(--ak-gold-soft); }
.ak-card:focus-within { border-color: var(--ak-black); }

@media (min-width: 700px) {
	.ak-card { padding: .5rem; }
	.ak-card:hover { box-shadow: var(--ak-shadow); }
}

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

/* 4:5, matching the source renders exactly.

   The box used to be square while every product image is 600x750. `cover`
   then cropped 20% of the height away, and because the bottle sits at a
   different height in each render, that crop landed somewhere different every
   time — bottles came out at mismatched sizes and heights across a row. At the
   image's own ratio nothing is cropped, so all of them frame identically. */
.ak-card .ak-card__media {
	flex: none;
	aspect-ratio: 4 / 5;
	border-radius: var(--ak-radius);
	background: var(--ak-cream);
}

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

.ak-card .ak-card__body {
	gap: .2rem;
	padding: .6rem .25rem .25rem;
}

@media (min-width: 700px) {
	.ak-card .ak-card__body { padding: .65rem .35rem .3rem; }
}

.ak-card .ak-card__title {
	margin: 0;
	font-size: var(--ak-fs-sm);
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.25;
	text-transform: uppercase;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ak-card .ak-card__sub {
	margin: 0;
	font-size: var(--ak-fs-xs);
	color: var(--ak-muted);
}

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

/* Pushed to the foot of the card so buttons line up across a row whatever the
   name wraps to. */
.ak-card__form {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin: 0;
	margin-top: auto;
	padding-top: .5rem;
}

/* --------------------------------------------------------------- the pills */

.ak-card__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
}

.ak-card__pill {
	flex: 1 1 auto;
	min-width: 3.1rem;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .3rem .35rem;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	background: var(--ak-white);
	color: var(--ak-black);
	font-size: var(--ak-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	transition: background .18s var(--ak-ease), border-color .18s var(--ak-ease), color .18s var(--ak-ease);
}

.ak-card__pill:hover:not([disabled]) { border-color: var(--ak-black); }

.ak-card__pill:focus-visible {
	outline: 2px solid var(--ak-black);
	outline-offset: 2px;
}

.ak-card__pill[aria-pressed="true"] {
	background: var(--ak-black);
	border-color: var(--ak-black);
	color: var(--ak-white);
}

.ak-card__pill--oos,
.ak-card__pill[disabled] {
	color: var(--ak-muted);
	background: var(--ak-cream);
	border-color: var(--ak-line);
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Three pills fit one line down to roughly 250px of card; below that they
   wrap, which is what the reference does too. Height never drops under 36px. */
@media (min-width: 1240px) {
	.ak-card__pill { min-height: 36px; }
}

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

.ak-card .ak-card__price {
	margin: 0;
	padding: 0;
	font-size: var(--ak-fs-base);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ak-black);
}

.ak-card .ak-card__price del { font-size: var(--ak-fs-sm); }

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

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

.ak-card .ak-card__add {
	min-height: 40px;
	padding: .55rem .5rem;
	font-size: var(--ak-fs-xs);
	letter-spacing: 0.04em;
}

.ak-card .ak-card__add[disabled],
.ak-card .ak-card__add[aria-disabled="true"] {
	background: var(--ak-cream-deep);
	border-color: var(--ak-cream-deep);
	color: var(--ak-muted);
	cursor: not-allowed;
}

.ak-card .ak-card__add[disabled]:hover {
	background: var(--ak-cream-deep);
	border-color: var(--ak-cream-deep);
	color: var(--ak-muted);
}

/* Anything the card cannot resolve in place is a link wearing the same button;
   the anchor needs the flex centring the theme's .ak-btn already gives it. */
a.ak-card__add { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.ak-card,
	.ak-card__pill,
	.ak-card .ak-card__media img { transition: none; }
}

/* The reference line reuses .ak-card__sub, so cards stay exactly one line
   tall whichever of the two it is showing. */
.ak-card .ak-card__sub {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}