/**
 * AF Commerce — product card and product listings.
 *
 * The card is the single most repeated component in the theme, so its rules are
 * written to be cheap: one aspect-ratio box that reserves image space before
 * decode, transforms rather than layout properties for hover, and no shadows on
 * the default style. Everything else is a modifier.
 */

/* -------------------------------------------------------------------------
 * 1. Card shell
 * ---------------------------------------------------------------------- */

.af-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--af-space-sm);
	min-width: 0;
	background: var(--af-card);
}

.af-card--align-center {
	text-align: center;
}

.af-card--align-center .af-card__swatches,
.af-card--align-center .af-card__sizes {
	justify-content: center;
}

.af-card--bordered {
	padding: var(--af-space-sm);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-card);
}

.af-card--shadow {
	padding: var(--af-space-sm);
	border-radius: var(--af-radius-card);
	box-shadow: var(--af-shadow-1);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.af-card--shadow:hover {
	box-shadow: var(--af-shadow-2);
}

.af-card--compact {
	gap: 6px;
	font-size: var(--af-fs-caption);
}

/* -------------------------------------------------------------------------
 * 2. Media
 * ---------------------------------------------------------------------- */

.af-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--af-radius-image);
	background: var(--af-surface);
	aspect-ratio: var(--af-card-aspect, 3 / 4);
}

.af-card--ratio-1-1 { --af-card-aspect: 1 / 1; }
.af-card--ratio-3-4 { --af-card-aspect: 3 / 4; }
.af-card--ratio-4-5 { --af-card-aspect: 4 / 5; }
.af-card--ratio-2-3 { --af-card-aspect: 2 / 3; }
.af-card--ratio-16-9 { --af-card-aspect: 16 / 9; }
.af-card--ratio-auto { --af-card-aspect: auto; }

.af-card__image-link {
	display: block;
	width: 100%;
	height: 100%;
}

.af-card__image {
	width: 100%;
	height: 100%;
	object-fit: var(--af-card-fit, cover);
	object-position: center;
	transition: opacity 0.3s ease, transform 0.6s ease;
}

.af-card__image--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

@media (hover: hover) {
	.af-card:hover .af-card__image--hover {
		opacity: 1;
	}

	.af-card--zoom:hover .af-card__image {
		transform: scale(1.04);
	}
}

.af-card__image--placeholder {
	object-fit: contain;
	padding: 12%;
	opacity: 0.55;
}

.af-card--out-of-stock .af-card__image {
	opacity: 0.62;
	filter: saturate(0.65);
}

/* -------------------------------------------------------------------------
 * 3. Badges and floating actions
 * ---------------------------------------------------------------------- */

.af-badges {
	position: absolute;
	inset-block-start: var(--af-space-sm);
	inset-inline-start: var(--af-space-sm);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.af-card__actions {
	position: absolute;
	inset-block-start: var(--af-space-sm);
	inset-inline-end: var(--af-space-sm);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.af-card__action {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--af-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--af-background) 92%, transparent);
	color: var(--af-primary);
	backdrop-filter: blur(4px);
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.af-card__action:hover,
.af-card__action:focus-visible {
	background: var(--af-primary);
	border-color: var(--af-primary);
	color: #fff;
}

.af-card__action.is-active,
.af-wishlist-btn.is-active {
	color: var(--af-sale);
}

/*
 * Floating actions fade in on hover for pointer users but stay permanently
 * visible for touch and keyboard, where "hover" never happens.
 */
@media (hover: hover) and (min-width: 782px) {
	.af-card__actions .af-card__action {
		opacity: 0;
		transform: translateY(-4px);
	}

	.af-card:hover .af-card__action,
	.af-card:focus-within .af-card__action,
	.af-card__action.is-active {
		opacity: 1;
		transform: none;
	}
}

.af-card__cart--overlay {
	position: absolute;
	inset-block-end: var(--af-space-sm);
	inset-inline: var(--af-space-sm);
	z-index: 2;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) and (min-width: 782px) {
	.af-card:hover .af-card__cart--overlay,
	.af-card:focus-within .af-card__cart--overlay {
		opacity: 1;
		transform: none;
	}
}

@media (hover: none), (max-width: 781px) {
	.af-card__cart--overlay {
		position: static;
		opacity: 1;
		transform: none;
		margin-top: var(--af-space-sm);
	}
}

/* -------------------------------------------------------------------------
 * 4. Body
 * ---------------------------------------------------------------------- */

.af-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.af-card__brand,
.af-card__category {
	margin: 0;
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.af-card__brand a,
.af-card__category a {
	position: relative;
	z-index: 2;
	color: inherit;
	text-decoration: none;
}

.af-card__brand a:hover,
.af-card__category a:hover {
	color: var(--af-accent);
}

.af-card__title {
	margin: 0;
	font-family: var(--af-font-product);
	font-size: var(--af-fs-small);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
}

.af-card__link {
	color: var(--af-heading);
	text-decoration: none;
}

/*
 * One stretched link makes the whole card clickable while keeping a single
 * link in the accessibility tree. Controls above it raise their own z-index.
 */
.af-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.af-card__link:hover {
	color: var(--af-accent);
}

.af-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--af-space-xs);
	font-family: var(--af-font-price);
	font-size: var(--af-fs-small);
	font-weight: 600;
}

.af-card__price del {
	color: var(--af-muted);
	font-weight: 400;
	text-decoration-thickness: 1px;
}

.af-card__price ins {
	color: var(--af-sale);
	text-decoration: none;
}

.af-card__discount {
	color: var(--af-sale);
	font-size: var(--af-fs-caption);
	font-weight: 600;
}

.af-card__swatches,
.af-card__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.af-card__swatch {
	width: 16px;
	height: 16px;
	border: 1px solid var(--af-border);
	border-radius: 50%;
	background-size: cover;
	background-position: center;
}

.af-card__size {
	padding: 2px 7px;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-sm);
	color: var(--af-secondary);
	font-size: 11px;
	line-height: 1.5;
}

.af-card__stock {
	margin: 0;
	font-size: var(--af-fs-caption);
}

.af-card__stock--in {
	color: var(--af-success);
}

.af-card__stock--out {
	color: var(--af-muted);
}

.af-card__cart .af-btn,
.af-card__atc {
	position: relative;
	z-index: 2;
	width: 100%;
}

.af-card__atc.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.af-card__atc.is-added::after {
	content: "✓";
	margin-inline-start: 6px;
}

/* -------------------------------------------------------------------------
 * 5. Listings
 * ---------------------------------------------------------------------- */

.af-products {
	position: relative;
}

.af-products__item {
	min-width: 0;
}

/* Carousel: a scroll-snapping track, not a JavaScript slider. */
.af-products__track,
.af-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--af-cols-mobile, 2) - 1) * var(--af-grid-gap)) / var(--af-cols-mobile, 2)
	);
	gap: var(--af-grid-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	padding-block-end: var(--af-space-sm);
	scrollbar-width: thin;
}

.af-products__track > *,
.af-carousel__track > * {
	scroll-snap-align: start;
}

@media (min-width: 782px) {
	.af-products__track,
	.af-carousel__track {
		grid-auto-columns: calc(
			(100% - (var(--af-cols-tablet, 3) - 1) * var(--af-grid-gap)) / var(--af-cols-tablet, 3)
		);
	}
}

@media (min-width: 1100px) {
	.af-products__track,
	.af-carousel__track {
		grid-auto-columns: calc(
			(100% - (var(--af-cols, 5) - 1) * var(--af-grid-gap)) / var(--af-cols, 5)
		);
	}
}

/*
 * The arrows sit above the track, aligned with the section heading, so the
 * wrapper is their positioning context.
 */
.af-carousel {
	position: relative;
	min-width: 0;
}

.af-carousel-nav {
	position: absolute;
	inset-block-start: calc(var(--af-space-xxl) * -1);
	inset-inline-end: 0;
	display: flex;
	gap: var(--af-space-xs);
}

.af-carousel-nav[hidden] {
	display: none;
}

.af-carousel-nav__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--af-border);
	border-radius: 50%;
	background: var(--af-background);
	color: var(--af-primary);
}

.af-carousel-nav__btn:hover:not([disabled]) {
	border-color: var(--af-primary);
}

.af-carousel-nav__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* List view on archives: image beside the details. */
.af-products--list .af-products__grid {
	grid-template-columns: minmax(0, 1fr);
}

.af-products--list .af-card,
.af-listing--list .af-card,
.af-shop.is-list-view .af-card {
	display: grid;
	grid-template-columns: minmax(120px, 220px) minmax(0, 1fr);
	gap: var(--af-space-lg);
	align-items: start;
	padding-bottom: var(--af-space-lg);
	border-bottom: 1px solid var(--af-border);
}

.af-products--list .af-card__body,
.af-listing--list .af-card__body,
.af-shop.is-list-view .af-card__body {
	gap: var(--af-space-sm);
}

/* -------------------------------------------------------------------------
 * 6. Wishlist button variants
 * ---------------------------------------------------------------------- */

.af-wishlist-btn__label {
	font-size: var(--af-fs-small);
}

.af-wishlist-btn--inline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}