/* Product listings (shop, product search). WooCommerce's float layout and button
   colours are overridden here, hence the few !important declarations. */

/* Toolbar: result summary and sorting (dropdown styled like the pagination below). */
.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.75rem;
}

.shop-toolbar__count {
	margin: 0;
	color: var(--leguma-muted);
}

.shop-toolbar__count strong {
	color: var(--leguma-text);
}

.shop-toolbar .woocommerce-ordering {
	margin: 0 !important;
}

.shop-toolbar .orderby {
	height: 3rem;
	padding: 0 2.6rem 0 15px;
	color: var(--leguma-text, #222222);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9.1 6.2 5.9 12 11.7l5.8-5.8L21 9.1l-9 9z'/%3E%3C/svg%3E") no-repeat right 15px center / 0.75rem;
	border: 1px solid var(--leguma-border, #e4e4e4);
	border-radius: 10px;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	appearance: none;
	transition: border-color var(--leguma-transition);
}

/* Same as the pagination's current page. */
.shop-toolbar .orderby:hover,
.shop-toolbar .orderby:focus-visible {
	border-color: var(--leguma-secondary, #9dbe00);
	outline: none;
}

/* Product grid: 4 across on desktop, 2 on phones. */
.shop-archive ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(45%, 15rem), 1fr));
	gap: clamp(0.75rem, 2vw, 1.5rem);
	margin: 0 0 2.5rem !important;
}

.shop-archive ul.products::before,
.shop-archive ul.products::after {
	display: none !important;
}

.shop-archive ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 1rem;
	background: var(--leguma-surface);
	border: 1px solid var(--leguma-border);
	border-radius: 1rem;
	transition: transform var(--leguma-transition), box-shadow var(--leguma-transition), border-color var(--leguma-transition);
}

.shop-archive ul.products li.product:hover {
	border-color: transparent;
	box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 12%);
	transform: translateY(-4px);
}

.shop-archive ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.shop-archive ul.products li.product img {
	width: 100%;
	aspect-ratio: 1;
	margin: 0 0 1rem !important;
	object-fit: contain;
	border-radius: 0.75rem;
}

.shop-archive ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	margin: 0 0 0.75rem;
	padding: 0 !important;
	overflow: hidden;
	color: var(--leguma-text);
	font-size: 0.9375rem !important;
	font-weight: 600;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.shop-archive ul.products li.product .price {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.15rem 0.5rem;
	align-items: baseline;
	margin: auto 0 0 !important;
	color: var(--leguma-secondary-dark) !important;
	font-size: 1.25rem !important;
	font-weight: 800;
}

.shop-archive ul.products li.product .price del {
	color: var(--leguma-muted);
	font-size: 0.875rem;
	font-weight: 400;
	opacity: 1;
}

.shop-archive ul.products li.product .price ins {
	text-decoration: none;
}

/* Add to cart. */
.shop-archive ul.products li.product .button {
	display: flex !important;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	margin: 1rem 0 0 !important;
	padding: 0.7rem 1rem !important;
	color: var(--leguma-on-accent) !important;
	background: var(--leguma-secondary) !important;
	border-radius: 999px !important;
	font-size: 0.875rem !important;
	font-weight: 700;
	transition: background-color var(--leguma-transition);
}

.shop-archive ul.products li.product .button .button-icon {
	margin-right: 0; /* The flex gap spaces it. */
}

.shop-archive ul.products li.product .button:hover {
	background: var(--leguma-secondary-hover) !important;
}

.shop-archive ul.products li.product .added_to_cart {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	text-align: center;
}

/* Sale badge. */
.shop-archive ul.products li.product .onsale {
	top: 1.5rem !important;
	right: auto !important;
	left: 1.5rem !important;
	z-index: 1;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0.2rem 0.75rem !important;
	color: var(--leguma-on-accent) !important;
	background: var(--leguma-secondary) !important;
	border-radius: 999px !important;
	font-size: 0.8125rem !important;
	font-weight: 700;
	line-height: 1.5 !important;
}

/* Pagination: same look as the leguma-custom category product list pagination
   (uses that plugin's colour variables, with its values as fallbacks). */
.shop-archive .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	border: 0;
}

.shop-archive .woocommerce-pagination ul.page-numbers li {
	border: 0;
}

.shop-archive .woocommerce-pagination ul.page-numbers li :is(a, span) {
	display: block;
	min-width: 0;
	padding: 10px 15px;
	color: var(--leguma-text, #222222);
	background: none;
	border: 1px solid var(--leguma-border, #e4e4e4);
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
}

.shop-archive .woocommerce-pagination ul.page-numbers li .current,
.shop-archive .woocommerce-pagination ul.page-numbers li a:hover {
	color: var(--leguma-text, #222222);
	background: none;
	border-color: var(--leguma-secondary, #9dbe00);
}

/* No results. */
.shop-empty {
	max-width: 32rem;
	margin: 1rem auto 0;
	padding: 3rem 1.5rem;
	text-align: center;
	background: var(--leguma-surface-hover);
	border-radius: 1.25rem;
}

.shop-empty__icon {
	display: inline-grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: 1.25rem;
	color: var(--leguma-accent);
	background: var(--leguma-surface);
	border-radius: 50%;
}

.shop-empty__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.shop-empty__title {
	font-size: 1.375rem;
}

.shop-empty__text {
	margin-bottom: 1.5rem;
	color: var(--leguma-muted);
}

.shop-empty__button {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.75rem 1.5rem;
	color: var(--leguma-on-accent);
	background: var(--leguma-accent);
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

.shop-empty__button:hover {
	background: var(--leguma-accent-hover);
}

.shop-empty__button svg {
	width: 1rem;
	height: 1rem;
}