/**
 * 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-card-media-gap, var(--af-space-sm));
	min-width: 0;
	background: var(--af-card);
}

/*
 * Listing tiles never show add-to-cart or quick view (product page only).
 * Hides theme controls and any plugin loop buttons that leak into the grid.
 */
.af-card__cart,
.af-card__action--quick-view,
.af-listing .add_to_cart_button,
.af-listing .ajax_add_to_cart,
.af-products .add_to_cart_button,
.af-products .ajax_add_to_cart,
.woocommerce ul.products li.product a.button.add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_simple,
.woocommerce ul.products li.product a.button.product_type_variable,
.woocommerce ul.products li.product a.button.product_type_grouped,
.woocommerce ul.products li.product a.button.product_type_external {
	display: none !important;
}

.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: var(--af-card-media-gap, 6px);
	font-size: var(--af-fs-caption);
}

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

.af-card__media {
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: var(--af-radius-image, 6px);
	background: var(--af-surface);
	/*
	 * Fashion 5:7 matches LAAM category cards (their product shots are 1500×2100
	 * and the PLP media box uses aspect-[5/7]). Same four-column width rhythm.
	 */
	aspect-ratio: var(--af-card-aspect, 5 / 7);
}

.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-5-7 { --af-card-aspect: 5 / 7; }
.af-card--ratio-2-3 { --af-card-aspect: 2 / 3; }
.af-card--ratio-4-3 { --af-card-aspect: 4 / 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 {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--af-card-fit, cover);
	/*
	 * Bias toward the top so faces and necklines stay in frame when cover
	 * crops a taller photograph into the 3:4 slot.
	 */
	object-position: 50% 0%;
	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: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
	transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.af-card__action:hover,
.af-card__action:focus-visible {
	background: transparent;
	border-color: transparent;
	color: #fff;
	transform: scale(1.06);
}

.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
 * ---------------------------------------------------------------------- */

/*
 * The gap is only half the story. Each line here inherits the body line-height,
 * which is set for reading paragraphs, so a 12px brand label sits in a 20px
 * line box and carries several pixels of air above and below it before the gap
 * is even applied. Tightening the line-height of these one-line labels is what
 * actually closes the space; the gap then does what it looks like it does.
 */
.af-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--af-card-line-gap, 2px);
}

.af-card__info {
	display: flex;
	flex-direction: column;
	gap: var(--af-card-line-gap, 2px);
	min-width: 0;
	flex: 1 1 auto;
}

/*
 * The body owns the spacing between its lines, nothing else. Headings and
 * paragraphs arrive with margins of their own, and WooCommerce extensions drop
 * further markup in here through the loop hooks, so without this the gap is
 * only ever a lower bound on the space you actually see.
 */
.af-card__body > *,
.af-card__info > * {
	margin-block: 0;
}

/*
 * Marketplace meta line: brand · title share one row, one face, one size.
 */
.af-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.35em;
	row-gap: 0;
	margin: 0;
	color: var(--af-muted);
	font-family: var(--af-font-body);
	font-size: max(10px, calc(var(--af-fs-caption) - 1px));
	font-weight: 400;
	line-height: 1.3;
}

.af-card__brand,
.af-card__category {
	display: inline;
	margin: 0;
	color: inherit;
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.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__sep {
	flex: 0 0 auto;
	color: inherit;
	opacity: 0.7;
}

.af-card__title {
	display: inline;
	margin: 0;
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.af-card__link {
	color: inherit;
	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-direction: column;
	align-items: flex-start;
	gap: 1px;
	font-family: var(--af-font-price);
	font-size: var(--af-fs-small);
	font-weight: 700;
	line-height: 1.15;
}

/*
 * WooCommerce prints <del> then <ins>. Column-reverse puts the live price on
 * top and the struck original underneath, which is the catalogue convention.
 */
.af-card__price .price {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 1px;
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: inherit;
}

.af-card__price del {
	order: 0;
	color: var(--af-muted);
	font-size: max(10px, calc(var(--af-fs-caption) - 1px));
	font-weight: 400;
	line-height: 1.2;
	text-decoration-thickness: 1px;
}

.af-card__price ins {
	order: 0;
	color: var(--af-sale);
	font-size: inherit;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
}

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

/*
 * Price first. The price grows; brand · title stay caption-sized. Half-leading
 * on the price is kept tight so the Gap setting reads as the pixels it shows.
 */
.af-card--price-first .af-card__price {
	font-size: var(--af-fs-body);
	font-weight: 700;
	line-height: 1.05;
}

.af-card--price-first .af-card__price ins {
	font-size: 1em;
	line-height: 1.05;
}

.af-card--price-first .af-card__meta {
	font-size: max(10px, calc(var(--af-fs-caption) - 1px));
	line-height: 1.25;
}

/*
 * Circular bag beside the details — the marketplace default.
 */
.af-card--actions-inline .af-card__body {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.af-card__cart--inline {
	flex: 0 0 auto;
	align-self: center;
}

.af-card__atc--icon {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--af-border);
	border-radius: 50%;
	background: var(--af-background, #fff);
	color: var(--af-heading, #171a20);
	text-decoration: none;
	box-shadow: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

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

.af-card__atc--icon.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

.af-card__atc--icon .af-icon {
	display: block;
}

.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:not(.af-card__atc--icon) {
	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;
}

.af-card__atc--icon.is-added::after {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	border-radius: 50%;
	background: var(--af-background, #fff);
	font-size: 14px;
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * 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;
	max-width: 100%;
}

.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;
}

@media (max-width: 781px) {
	.af-carousel-nav {
		gap: 4px;
	}

	.af-carousel-nav__btn {
		width: 28px;
		height: 28px;
	}

	.af-carousel-nav__btn .af-icon {
		width: 14px;
		height: 14px;
	}

	.af-products--carousel {
		max-width: 100%;
		overflow: hidden;
	}

	.af-products__track,
	.af-carousel__track {
		max-width: 100%;
	}
}

/* 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 {
	flex-direction: row;
	align-items: center;
	gap: var(--af-space-sm);
}

.af-products--list .af-card__info,
.af-listing--list .af-card__info,
.af-shop.is-list-view .af-card__info {
	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;
}