/*
 * WooCommerce product loop — [product_category] listings.
 *
 * THE ONE RULE THIS FILE FOLLOWS
 *
 *   li.product is the card. The theme never draws a second one.
 *
 * 98 pages embed these listings and every one of them already styles `li.product`
 * as the card — background, radius, padding, shadow, border, hover — with
 * !important, tuned per page. Production does the same through Avada. If the theme
 * also draws a box, you get two nested boxes offset by the outer one's padding,
 * which is exactly the overlap this file was written to remove.
 *
 * So the split is:
 *
 *   li.product        the card box            → page CSS owns it; this file only
 *                                               provides a sane default for pages
 *                                               that style nothing, at low
 *                                               specificity, with no !important
 *   .ff-loop-card     layout only             → transparent, no box, ever
 *   .product-title    typography              → default only; pages override
 *   .price            typography              → default only; pages override
 *
 * Markup comes from woocommerce/content-product.php in this theme.
 *
 * @package Fixfactor
 */

/* =============================================================================
   1. GRID
   auto-fill + minmax so a row can never overlap, whatever columns="N" a page
   declares. Pages that set their own grid-template-columns win.
   ========================================================================== */

ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: var(--space-6);
	margin: var(--space-8) 0;
	padding: 0;
	list-style: none;
}

ul.products::before,
ul.products::after {
	content: none;
	display: none;
}

/* =============================================================================
   2. THE CARD — li.product
   Default only. Every declaration here is expected to lose to a page that has
   an opinion, which is why there is not one !important in this block.
   ========================================================================== */

ul.products li.product {
	display: flex;
	position: relative;          /* anchor for the stretched card link */
	float: none;
	width: auto;
	margin: 0;
	padding: var(--space-6) var(--space-5);
	background: var(--surface);
	border: 1px solid var(--border-neutral);
	border-radius: 12px;
	list-style: none;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

/*
 * Hover — one coordinated state change, no movement.
 *
 * The design system is explicit: cards change border colour, nothing lifts, nothing
 * scales, no shadow appears. So the card deepens its border, warms its background a
 * step, and the title takes the action colour. Three properties, one intent, and
 * nothing reflows.
 */
ul.products li.product:hover,
ul.products li.product:focus-within {
	border-color: var(--accent);
	background: var(--surface-alt);
}

ul.products li.product:hover .product-title,
ul.products li.product:focus-within .product-title {
	color: var(--action);
}

/* =============================================================================
   3. LAYOUT WRAPPER — never a box
   Pages set `li.product { display: flex }` with the default row direction, so the
   card contents need their own column context. This element exists only for that.
   It must stay transparent: no background, no border, no padding, no radius.
   ========================================================================== */

.ff-loop-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);         /* breathing room between the icon and the name */
	width: 100%;
	min-width: 0;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: center;
}

/* =============================================================================
   4. MEDIA
   Pages cap the image at 120px desktop / 72-80px mobile via `.product img` and
   `.attachment-woocommerce_thumbnail`. Those rules already match this markup, so
   nothing here fights them.
   ========================================================================== */

.ff-loop-card__media {
	display: block;
	line-height: 0;
	max-width: 120px;
	margin: 0 auto;
}

.ff-loop-card__media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
}

/* A placeholder image on a services catalogue carries no information. */
.ff-loop-card__media img.woocommerce-placeholder {
	display: none;
}

/* =============================================================================
   5. BODY
   ========================================================================== */

.ff-loop-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
	width: 100%;
	min-width: 0;
}

.ff-loop-card .product-title {
	margin: 0;
	padding: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--content-strong);
	overflow-wrap: break-word;
}

.ff-loop-card .product-title a {
	color: inherit;
	text-decoration: none;
}

/*
 * Stretched link: the whole card is the click target, while the markup keeps a
 * single anchor in the heading. ::after covers the card rather than the anchor, so
 * the text itself stays selectable.
 */
.ff-loop-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.ff-loop-card .product-title a:focus-visible {
	outline: 2px solid var(--action);
	outline-offset: 3px;
	border-radius: 4px;
}

.ff-loop-card .product-title a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ff-loop-card__price {
	margin-top: auto;
	padding-top: var(--space-2);
}

/*
 * Price in --action rather than --accent: #00aac4 on white is about 2.8:1 and
 * fails AA at this size. Pages that set their own price colour override this.
 */
.ff-loop-card .price {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--action);
}

.ff-loop-card .price del {
	color: var(--content-secondary);
	font-weight: 400;
	opacity: 1;
	margin-right: var(--space-1);
}

.ff-loop-card .price ins {
	text-decoration: none;
	font-weight: 700;
}

/* =============================================================================
   6. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	ul.products {
		gap: var(--space-4);
		margin: var(--space-6) 0;
	}

	ul.products li.product {
		padding: var(--space-4);
	}

	.ff-loop-card__media {
		max-width: 80px;
	}
}

@media (max-width: 480px) {
	ul.products {
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	}

	.ff-loop-card .product-title {
		font-size: 0.9375rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	ul.products li.product {
		transition: none;
	}
}

/* =============================================================================
   7. PAGE-LEVEL HOVER — deliberate override
   The 98 listing pages hover their cards with `transform: translateY(-6px)` and a
   shadow. The design system rules both out: no lift, no scale, no hover shadow on
   cards. This is the one place in this file that overrides a page on purpose, and
   it is here rather than in 98 pages. Delete this block to hand the lift back.
   ========================================================================== */

ul.products li.product:hover,
ul.products li.product:focus-within {
	transform: none; /* design system: cards do not move on hover */
	box-shadow: none;
}