/**
 * Fooppers Archive Cards — grid layout.
 *
 * The cards themselves are styled by fqp.css. Everything here is wrapper work:
 * turning WooCommerce's float/flex product list into a fixed grid, and undoing
 * the width rules themes put on li.product.
 *
 * --fac-cols, --fac-gap and --fac-radius are printed per request from the
 * resolved settings for the category being viewed.
 */

.fac-active ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--fac-cols, 2), minmax(0, 1fr)) !important;
	gap: var(--fac-gap, 12px);
	margin: 0 0 24px !important;
	padding: 0 12px !important;
	list-style: none !important;
}

.fac-active ul.products::before,
.fac-active ul.products::after {
	content: none !important;
	display: none !important;
}

/* Themes size cards with percentage widths, nth-child margin resets and
   clears. Inside a grid all of that fights the track sizing. */
.fac-active ul.products li.product {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.fac-active ul.products li.product::before,
.fac-active ul.products li.product::after {
	content: none !important;
	display: none !important;
}

/* Equal-height cards: the button lines up across a row even when titles
   wrap to different depths. */
.fac-active ul.products li.product > .fqp-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	border-radius: var(--fac-radius, 16px);
}

.fac-active ul.products li.product .fqp-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* The button sits at the bottom of the body whatever the title length. */
.fac-active ul.products li.product .fqp-card-btn,
.fac-active ul.products li.product .fqp-card-action {
	margin-top: auto !important;
}

/* Quick add control (Quick PDP 2.0+): full width of the card. Themes
   style "li.product button" — the control hardens itself, this only
   undoes list-item spacing on the wrapper. */
.fac-active ul.products li.product .fqp-card-action {
	width: 100%;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

/* Card parts the theme would otherwise repaint. */
.fac-active ul.products li.product .fqp-card-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 100% !important;
	min-height: 0 !important;
	padding: 11px 10px !important;
	border: 1.5px solid var(--fqp-accent, #c0392b) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--fqp-accent, #c0392b) !important;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .02em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

.fac-active ul.products li.product .fqp-card-btn.is-done {
	background: var(--fqp-accent, #c0392b) !important;
	color: #fff !important;
}

.fac-active ul.products li.product .fqp-card-btn--out {
	border-color: var(--fqp-line, #ebe5df) !important;
	color: var(--fqp-muted, #7b7570) !important;
}

/* Narrow cards cannot carry a discount pill and a badge stack side by side. */
@media (max-width: 599px) {
	.fac-active ul.products .fqp-card-badges .fsb-badge:nth-child(n + 2) {
		display: none !important;
	}

	.fac-active ul.products .fqp-card-badge {
		max-width: 48%;
	}

	.fac-active ul.products .fqp-card-title {
		font-size: 15px;
	}

	.fac-active ul.products .fqp-card-meta {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ---- Single-product categories ----------------------------------------
   One card left-aligned in a two-column track reads as a layout bug. These
   two modes make a category of one look deliberate. */

.fac-active ul.products.fac-single-center {
	grid-template-columns: minmax(0, 320px) !important;
	justify-content: center;
}

.fac-active ul.products.fac-single-wide {
	grid-template-columns: minmax(0, 1fr) !important;
	max-width: 520px;
	margin-inline: auto !important;
}

/* A full-bleed card gets a landscape image rather than a tall portrait one. */
@media (max-width: 599px) {
	.fac-active ul.products.fac-single-wide .fqp-card-media img {
		aspect-ratio: 16 / 10;
		object-fit: cover;
		width: 100%;
		height: auto;
	}
}

/* ---- Add-to-cart toast --------------------------------------------------
   Quick PDP's toast element lives inside the product template, so archives
   need their own. Sits above the app's bottom nav. */

.fac-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--fqp-bottomnav, 64px) + 16px);
	z-index: 99999;
	transform: translate(-50%, 12px);
	max-width: min(88vw, 420px);
	padding: 11px 16px;
	border-radius: 12px;
	background: #17161a;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	box-shadow: 0 8px 28px rgba(23, 22, 26, .28);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}

.fac-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.fac-toast {
		transition: none;
	}
}