/*
 * Divi DigiMart: the shop archive grid, its selectors, Load more, and the category cards.
 *
 * Scoped under body.qndm-shop-grid, printed on the shop and product-category pages. The
 * grid is WooCommerce's own ul.products, laid out from the --qndm-shop-cols / -gap tokens,
 * which override WooCommerce's float widths (columns-N) and a Divi Shop module's columns.
 * WooCommerce's clearfix pseudo-elements would be grid items, so they are removed.
 */

/* ==========================================================================
   Grid
   ========================================================================== */

body.qndm-shop-grid #et-boc ul.products {
	display: grid;
	grid-template-columns: repeat( var(--qndm-shop-cols), minmax( 0, 1fr ) );
	gap: var(--qndm-shop-gap);
	margin: 0 0 var(--qndm-sp-6);
	padding: 0;
}

body.qndm-shop-grid #et-boc ul.products::before,
body.qndm-shop-grid #et-boc ul.products::after {
	display: none;
}

body.qndm-shop-grid #et-boc ul.products li.product {
	float: none;
	clear: none;
	width: auto;
	min-width: 0;
	margin: 0;
}

/* Even grid: every card in a row the height of the tallest. */
body.qndm-shop-even #et-boc ul.products {
	grid-auto-rows: 1fr;
}

body.qndm-shop-even #et-boc ul.products li.product {
	display: flex;
	flex-direction: column;
}

body.qndm-shop-even #et-boc ul.products li.product .button {
	margin-top: auto;
}

/* Masonry: CSS columns, no script. */
body.qndm-shop-masonry #et-boc ul.products {
	display: block;
	column-count: var(--qndm-shop-cols);
	column-gap: var(--qndm-shop-gap);
}

body.qndm-shop-masonry #et-boc ul.products li.product {
	display: inline-block;
	width: 100%;
	margin: 0 0 var(--qndm-shop-gap);
	break-inside: avoid;
}

/* Different sizes: the first card is a feature, two columns by two rows. */
body.qndm-shop-feature:not(.qndm-shop-masonry) #et-boc ul.products li.product:first-child {
	grid-row: span 2;
	grid-column: span 2;
}

/* ==========================================================================
   Selectors and Load more
   ========================================================================== */

.qndm-shop-tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qndm-sp-4);
	align-items: center;
	margin: 0 0 var(--qndm-sp-5);
}

.qndm-shop-pick {
	display: inline-flex;
	align-items: center;
	gap: var(--qndm-sp-1);
}

.qndm-shop-pick-label {
	margin-right: var(--qndm-sp-1);
	color: var(--qndm-body);
	font-size: var(--qndm-fs-sm);
}

.qndm-shop-pick-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--qndm-sp-8);
	height: var(--qndm-sp-8);
	padding: 0 var(--qndm-sp-2);
	border: 1px solid var(--qndm-border);
	border-radius: var(--qndm-r-sm);
	color: var(--qndm-heading);
	font-size: var(--qndm-fs-sm);
	font-weight: var(--qndm-fw-medium);
	transition: border-color var(--qndm-dur-fast) var(--qndm-ease), color var(--qndm-dur-fast) var(--qndm-ease);
}

.qndm-shop-pick-link:hover,
.qndm-shop-pick-link:focus-visible {
	border-color: var(--qndm-primary);
	color: var(--qndm-primary);
}

.qndm-shop-pick-link.is-active {
	border-color: var(--qndm-primary);
	background: var(--qndm-primary);
	color: var(--qndm-surface);
}

.qndm-shop-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--qndm-sp-2);
	margin: var(--qndm-sp-6) 0;
}

.qndm-shop-js .qndm-shop-more ~ .woocommerce-pagination,
.qndm-shop-js .woocommerce-pagination:has(~ .qndm-shop-more) {
	display: none;
}

.qndm-shop-status {
	color: var(--qndm-body);
	font-size: var(--qndm-fs-sm);
}

/* The AJAX shop's loading state. */
.qndm-shop-loading ul.products {
	opacity: .5;
	pointer-events: none;
	transition: opacity var(--qndm-dur-fast) var(--qndm-ease);
}

/* ==========================================================================
   Category cards
   ========================================================================== */

body.qndm-shop-grid #et-boc ul.products li.product-category .qndm-cat-card {
	position: relative;
	height: 100%;
	padding: var(--qndm-sp-3);
	border: 1px solid var(--qndm-border);
	border-radius: var(--qndm-r-lg);
	background: var(--qndm-cat-bg, var(--qndm-surface));
	transition: border-color var(--qndm-dur-fast) var(--qndm-ease), box-shadow var(--qndm-dur-base) var(--qndm-ease);
}

body.qndm-shop-grid #et-boc ul.products li.product-category .qndm-cat-card:hover {
	border-color: var(--qndm-primary);
	box-shadow: var(--qndm-sh-md);
}

body.qndm-shop-grid #et-boc ul.products li.product-category .qndm-cat-card img {
	margin-bottom: var(--qndm-sp-3);
	border-radius: var(--qndm-r-md);
}

.qndm-cat-label {
	position: absolute;
	top: var(--qndm-sp-5);
	left: var(--qndm-sp-5);
	z-index: var(--qndm-z-overlay);
	padding: 2px var(--qndm-sp-2);
	border-radius: var(--qndm-r-pill);
	background: var(--qndm-cat-label-bg, var(--qndm-primary));
	color: var(--qndm-cat-label-fg, var(--qndm-surface));
	font-size: var(--qndm-fs-xs);
	font-weight: var(--qndm-fw-semibold);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.qndm-cat-tagline {
	display: block;
	margin-top: var(--qndm-sp-1);
	color: var(--qndm-body);
	font-size: var(--qndm-fs-sm);
	line-height: var(--qndm-lh-base);
}

/* ==========================================================================
   Tablet and phone
   ========================================================================== */

@media (max-width: 980px) {
	body.qndm-shop-grid #et-boc ul.products {
		grid-template-columns: repeat( var(--qndm-shop-cols-t), minmax( 0, 1fr ) );
		gap: var(--qndm-shop-gap-t);
	}

	body.qndm-shop-masonry #et-boc ul.products {
		column-count: var(--qndm-shop-cols-t);
		column-gap: var(--qndm-shop-gap-t);
	}
}

@media (max-width: 767px) {
	body.qndm-shop-grid #et-boc ul.products {
		grid-template-columns: repeat( var(--qndm-shop-cols-p), minmax( 0, 1fr ) );
		gap: var(--qndm-shop-gap-p);
	}

	body.qndm-shop-masonry #et-boc ul.products {
		column-count: var(--qndm-shop-cols-p);
		column-gap: var(--qndm-shop-gap-p);
	}

	body.qndm-shop-feature #et-boc ul.products li.product:first-child {
		grid-row: auto;
		grid-column: auto;
	}

	.qndm-shop-tools {
		gap: var(--qndm-sp-2);
	}
}