/* =========================================================================
   Voley PLT — WooCommerce shop and category archives

   The product tiles themselves are the shared .voley-product card in base.css;
   everything here is the furniture around them, plus the handful of overrides
   needed to make WooCommerce's own markup (sort dropdown, pagination, notices)
   look like the rest of the site.
   ========================================================================= */

/* Archive hero ------------------------------------------------------------ */
.voley-shophero {
	padding-block: 62px 54px;
	background: var(--v-ink);
	color: var(--v-white);
}

.voley-shophero__inner {
	max-width: var(--v-max);
}

.voley-shophero .voley-eyebrow {
	color: var(--v-accent);
}

.voley-root.voley-root .voley-shophero__title {
	margin-bottom: 14px;
	color: var(--v-white);
}

.voley-shophero__text {
	max-width: 62ch;
	color: rgba(255, 255, 255, 0.66);
}

.voley-shophero__text p {
	margin: 0 0 8px;
}

.voley-shophero__text p:last-child {
	margin-bottom: 0;
}

.voley-shophero__count {
	margin-top: 18px;
	font-size: var(--v-fs-sm);
	color: rgba(255, 255, 255, 0.5);
}

.voley-shophero__count b {
	color: var(--v-white);
	font-weight: 700;
}

/* Category chips ----------------------------------------------------------
   The sideways move between categories, so the shop is browsable without
   going back up to the menu every time. */
.voley-shopchips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-block: 26px 0;
}

.voley-shopchip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-pill);
	background: var(--v-white);
	font-size: var(--v-fs-sm);
	font-weight: 600;
	color: var(--v-ink);
	transition: border-color 0.2s var(--v-ease), background-color 0.2s var(--v-ease), color 0.2s var(--v-ease);
}

.voley-shopchip b {
	font-size: var(--v-fs-xs);
	font-weight: 600;
	color: var(--v-grey-500);
	transition: color 0.2s var(--v-ease);
}

.voley-shopchip:hover {
	border-color: var(--v-ink);
}

.voley-shopchip.is-active {
	border-color: var(--v-accent);
	background: var(--v-accent);
	color: var(--v-white);
}

.voley-shopchip.is-active b {
	color: rgba(255, 255, 255, 0.75);
}

/* Listing ----------------------------------------------------------------- */
.voley-shop {
	padding-block: 30px 84px;
}

/* Toolbar: result count left, sort dropdown right. --------------------------
   WooCommerce prints both as blocks with their own margins, so the resets are
   deliberate rather than defensive. */
.voley-shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding: 18px 0 20px;
	border-bottom: 1px solid var(--v-line-soft);
	margin-bottom: 30px;
}

.voley-shop .woocommerce-result-count {
	margin: 0;
	font-size: var(--v-fs-sm);
	color: var(--v-grey-600);
}

.voley-shop .woocommerce-ordering {
	margin: 0;
}

.voley-shop .woocommerce-ordering select,
.voley-shop select.orderby {
	height: 42px;
	padding: 0 38px 0 16px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-pill);
	background-color: var(--v-white);
	/* Inline chevron: no image request, and it recolours with the tokens. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111213' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	font-family: var(--v-font-body);
	font-size: var(--v-fs-sm);
	font-weight: 600;
	color: var(--v-ink);
	appearance: none;
	cursor: pointer;
}

.voley-shop select.orderby:focus {
	outline: none;
	border-color: var(--v-accent);
}

/* Grid -------------------------------------------------------------------- */
/* Not scoped to .voley-shop — the related-products row on a single product
   page uses this same grid. */
.voley-shop__grid {
	display: grid;
	grid-template-columns: repeat(var(--v-shop-cols, 4), minmax(0, 1fr));
	gap: 34px var(--v-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce closes its product list with clearfix pseudo-elements:

       .woocommerce ul.products::before,
       .woocommerce ul.products::after { content: " "; display: table }

   Harmless around a float layout, and not harmless around a grid — `display:
   table` blockifies them into grid items, so they take the first and last cells
   and every product shifts one column along. A shop with one product showed it
   sitting in column two with nothing beside it.

   `.voley-root` is carried so this lands at (0,3,1) and beats WooCommerce's
   (0,2,1) outright, rather than tying and winning on load order. */
.voley-root ul.products.voley-shop__grid::before,
.voley-root ul.products.voley-shop__grid::after {
	content: none;
	display: none;
}

/* WooCommerce ships float-based column widths on li.product; the grid owns
   placement now, so they have to go. */
.voley-shop__grid > li.product {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
	clear: none;
}

.voley-shop__grid > li.product::before,
.voley-shop__grid > li.product::after {
	content: none;
}

/* Empty state ------------------------------------------------------------- */
.voley-shop .woocommerce-info,
.voley-shop .woocommerce-no-products-found > .woocommerce-info {
	padding: 26px 24px;
	border: 1px solid var(--v-line);
	border-left: 3px solid var(--v-accent);
	border-radius: var(--v-r-card);
	background: var(--v-grey-50);
	font-size: var(--v-fs-body);
	color: var(--v-ink);
}

/* Pagination -------------------------------------------------------------- */
.voley-shop .woocommerce-pagination {
	margin-top: 54px;
}

.voley-shop .woocommerce-pagination ul,
.voley-shop .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.voley-shop .woocommerce-pagination li {
	margin: 0;
	border: 0;
	overflow: visible;
}

.voley-shop .woocommerce-pagination a.page-numbers,
.voley-shop .woocommerce-pagination span.page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-pill);
	background: var(--v-white);
	font-size: var(--v-fs-sm);
	font-weight: 600;
	color: var(--v-ink);
	transition: border-color 0.2s var(--v-ease), background-color 0.2s var(--v-ease), color 0.2s var(--v-ease);
}

.voley-shop .woocommerce-pagination a.page-numbers:hover {
	border-color: var(--v-ink);
	background: var(--v-ink);
	color: var(--v-white);
}

.voley-shop .woocommerce-pagination span.page-numbers.current {
	border-color: var(--v-accent);
	background: var(--v-accent);
	color: var(--v-white);
}

.voley-shop .woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--v-grey-500);
}

/* WooCommerce notices ------------------------------------------------------ */
.voley-shop-root .woocommerce-message,
.voley-shop-root .woocommerce-error {
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 0;
	border-left: 3px solid var(--v-accent);
	border-radius: var(--v-r-sm);
	background: var(--v-grey-50);
	font-size: var(--v-fs-sm);
	color: var(--v-ink);
	list-style: none;
}

.voley-shop-root .woocommerce-message .button,
.voley-shop-root .woocommerce-error .button {
	float: right;
	height: 34px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--v-r-pill);
	background: var(--v-ink);
	color: var(--v-white);
	font-family: var(--v-font-display);
	font-size: var(--v-fs-xs);
	font-style: italic;
	font-weight: 800;
	line-height: 34px;
	text-transform: uppercase;
}

/* Responsive -------------------------------------------------------------- */
/*
 * The column count is set on the grid itself, not only on .voley-shop, because
 * the related-products row on a product page uses this same grid and is not
 * inside .voley-shop. Set on the ancestor alone, that row stayed four across at
 * every width — four 79px tiles on a phone. Same reasoning as the gap override
 * further down, which already carried this note.
 */
@media (max-width: 1100px) {
	.voley-shop,
	.voley-shop__grid {
		--v-shop-cols: 3;
	}
}

@media (max-width: 900px) {
	.voley-shophero {
		padding-block: 44px 38px;
	}

	.voley-shop,
	.voley-shop__grid {
		--v-shop-cols: 2;
	}

	.voley-shop {
		padding-block: 24px 60px;
	}

	.voley-shop__toolbar {
		margin-bottom: 24px;
	}

	.voley-shopchips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		/* Bleed the strip so chips scroll to the screen edge, not the gutter. */
		margin-inline: calc(var(--v-gutter) * -1);
		padding-inline: var(--v-gutter);
	}

	.voley-shopchips::-webkit-scrollbar {
		display: none;
	}

	.voley-shopchip {
		flex: none;
	}
}

@media (max-width: 560px) {
	/* Not scoped to .voley-shop — the related-products row on a single product
   page uses this same grid. */
.voley-shop__grid {
		gap: 26px 12px;
	}
}