/* Variable Product Grid — frontend
   Container display, base grid layout + responsive breakpoints, and the
   empty-state styling all live in the shared `assets/css/grid-base.css`
   (handle: `sia-grid-base`). The widget root carries both `.sia-grid` and
   `.sia-pg`, the inner list carries both `.sia-grid__list` and
   `.sia-pg__list`, so the shared rules apply automatically.

   Owned by THIS file (Variable-Product-Grid-only):
   - The `.sia-pg__item` per-card flex wrapper (extra layer for the equal-
     height-per-row toggle)
   - has-eq-row / has-eq-all class hooks
   - AJAX pagination, load-more, infinite-scroll, loading state */

.sia-pg__item {
	display: flex;
	align-items: flex-start;  /* default: card at its natural height (NOT stretched to grid cell) */
	min-width: 0;
}
.sia-pg__item > .sia-pc {
	width: 100%;
}

/* Equal height per row — cards in the same row match the tallest of that row.
   CSS grid already makes row height = tallest cell; we make the card fill its
   cell height via flex stretch so the card background fills the whole cell. */
.sia-pg.has-eq-row .sia-pg__item {
	align-items: stretch;
}
.sia-pg.has-eq-row .sia-pg__item > .sia-pc {
	height: 100%;
}

/* Equal height across all cards — JS-driven (listing.js). The `.has-eq-all`
   class flags this listing for the sync loop. No CSS needed here (JS sets
   min-height on each card); kept as a selector hook for future tweaks. */

/* Pagination — structural rules only. Colors, size, radius, backgrounds and
   state styles all come from the widget's Pagination Style section. */
.sia-pg-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.sia-pg-pagination a,
.sia-pg-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.sia-pg-pagination .dots { background: transparent !important; }
.sia-pg-pagination a.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* Loading state during AJAX fetch. */
.sia-pg.is-loading .sia-pg__list { opacity: 0.55; pointer-events: none; transition: opacity 0.15s; }

/* Load more button */
.sia-pg-loadmore {
	margin-top: 24px;
	text-align: center;
}
.sia-pg-loadmore__btn {
	appearance: none;
	border: 1px solid var(--sia-color-secondary, #54595F);
	/* Variables: the :hover rule below is (0,2,0) and a control writing the
	   property directly lands at (0,4,0). The background control has a default
	   of #ffffff, so the hover state had never worked. */
	background: var(--sia-pg-lm-bg, var(--sia-color-secondary, #54595F));
	color: var(--sia-pg-lm-color, #fff);
	font: inherit;
	font-weight: 600;
	padding: 12px 28px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sia-pg-loadmore__btn:hover:not(:disabled) {
	background: var(--sia-color-primary, #c5ed3b);
	color: #fff;
	border-color: var(--sia-color-primary, #c5ed3b);
}
.sia-pg-loadmore__btn:disabled { opacity: 0.6; cursor: wait; }
.sia-pg-loadmore__status {
	margin-top: 12px;
	color: #9ca3af;
	font-size: 13px;
}

/* Infinite scroll */
.sia-pg-infinite {
	margin-top: 12px;
	min-height: 1px;
	text-align: center;
}
.sia-pg-infinite__sentinel {
	height: 1px;
	width: 100%;
}
.sia-pg-infinite__status {
	color: #9ca3af;
	font-size: 13px;
	padding: 12px 0;
}

/* Responsive grid breakpoints live in `assets/css/grid-base.css` (target the
   shared `.sia-grid__list` class which the widget renders alongside `.sia-pg__list`). */