/*
 * WooCommerce Product Grid stylesheet — mirrors inc/woocommerce/archive.php.
 *
 * Enqueued by just2euro_product_grid_assets() only when a Woo product grid can
 * render: shop/category archives, product search, the coded front-page grid,
 * single-product related/upsell loops, or cart cross-sells. Shared Woo button,
 * price, notice, form, and table primitives stay in assets/css/woocommerce.css.
 * See tasks/woo-shop-archive.md and tasks/woo-homepage-featured.md.
 */

/* ---------------------------------------------------------------------------
   Product grid + cards. The grid is CSS Grid on Woo's existing `ul.products`;
   the per-breakpoint column counts come from the Customizer as inline CSS
   (just2euro_archive_grid_css). generate-child loads after Woo's CSS, so these
   same-specificity rules win by source order — no !important.
   --------------------------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

/* Neutralize Woo's float layout so the grid governs placement. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0.75rem;
	float: none;
	clear: none;
	box-sizing: border-box;
	justify-self: stretch;
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--j2e-bg);
	border: 1px solid var(--j2e-border);
	border-radius: 6px;
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--j2e-purple);
	box-shadow: var(--j2e-shadow-product-card);
}

.woocommerce ul.products li.product a img {
	margin: 0 auto 0.75rem;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	min-height: 2.7em;
	max-height: 2.7em;
	overflow: hidden;
	padding: 0;
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--j2e-heading-3);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Push the price + button to the bottom so cards align on a row. */
.woocommerce ul.products li.product .price {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 1rem;
}

.woocommerce ul.products li.product .button {
	margin-top: 0;
}

/* Sale badge in brand purple (display only — no stock logic). */
.woocommerce ul.products li.product .onsale {
	background-color: var(--j2e-purple);
	color: var(--j2e-nav-text);
	border-radius: 3px;
	min-height: auto;
	min-width: auto;
	padding: 0.15rem 0.5rem;
	line-height: 1.4;
}

.woocommerce ul.products li.product.status-private {
	border-color: var(--j2e-purple-border-soft);
}

.j2e-product-status-badge {
	position: absolute;
	z-index: 2;
	top: 0.75rem;
	left: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.45rem;
	color: var(--j2e-nav-text);
	background-color: var(--j2e-purple-overlay);
	border-radius: 4px;
	box-shadow: var(--j2e-shadow-badge);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	pointer-events: none;
}

.j2e-product-status-badge__icon {
	flex: 0 0 auto;
}

.woocommerce .stock.out-of-stock {
	color: var(--j2e-muted);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Shop toolbar — result count + items-per-page switch + ordering, one flex row.
   --------------------------------------------------------------------------- */

.j2e-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--j2e-border);
}

.woocommerce .j2e-shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--j2e-muted);
	font-size: 0.9rem;
}

/* Items-per-page: inline clickable sizes — "Show per page: 24 | 48 | 72". */
.j2e-per-page {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.woocommerce .j2e-shop-toolbar .j2e-per-page {
	margin-left: auto;
}

/* Ordering follows the per-page switch at the right edge. */
.woocommerce .j2e-shop-toolbar .woocommerce-ordering {
	margin: 0;
}

.j2e-per-page__label {
	color: var(--j2e-muted);
	font-size: 0.9rem;
}

.j2e-per-page__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.j2e-per-page__item {
	font-size: 0.9rem;
	line-height: 1;
}

/* Pipe separators between the sizes. */
.j2e-per-page__item + .j2e-per-page__item::before {
	content: "|";
	margin: 0 0.5rem;
	color: var(--j2e-border);
}

.j2e-per-page__item a {
	color: var(--j2e-link);
	text-decoration: none;
}

.j2e-per-page__item a:hover,
.j2e-per-page__item a:focus {
	color: var(--j2e-purple);
	text-decoration: none;
}

.j2e-per-page__item.is-current > span {
	color: var(--j2e-purple);
	font-weight: 700;
}

/* Ordering select keeps a compact boxed look. */
.woocommerce .j2e-shop-toolbar .woocommerce-ordering select {
	padding: 0.3rem 0.5rem;
	font-size: 0.9rem;
	color: var(--j2e-text);
	background-color: var(--j2e-surface);
	border: 1px solid var(--j2e-border);
	border-radius: 5px;
}

/* ---------------------------------------------------------------------------
   Pagination — numbered, brand colours, adequate touch targets.
   --------------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 2.75rem;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.6rem;
	color: var(--j2e-purple);
	background-color: var(--j2e-surface);
	border: 1px solid var(--j2e-border);
	border-radius: 5px;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li span.current {
	color: var(--j2e-nav-text);
	background-color: var(--j2e-purple);
	border-color: var(--j2e-purple);
}