/* =========================================================================
   Handknitted — Product Overview pages (Men / Women / …)
   -------------------------------------------------------------------------
   Layout from the Figma "Product Overview Lopapeysa" frame (139:313):
   hero with cyan label + 64px display heading left and image right (flush
   under the header, bleeding to the right edge), grid label + Filter select
   left / price sort right, 4-column product grid (cards from wc-cards.css).
   ========================================================================= */

.page-template-product-overview .site-content { padding-block: 0; }

/* ---- Hero ------------------------------------------------------------------
   Per the overview frames (Patterns mask 615 -> 1440, Lopi 605 -> 1430): the
   hero spans the FULL viewport width. The title's left edge stays on the
   1310px content band (lines up with the filter/cards below), but the image
   bleeds all the way to the right viewport edge. At 1440 the design splits
   615 / 825, i.e. text 42.7% / image 57.3%. */
.hk-po-hero {
	display: grid;
	grid-template-columns: minmax(0, 42.7%) minmax(0, 57.3%);
	align-items: stretch;
}
.hk-po-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* left edge = the 1310px band edge, like the grid below */
	padding: 2rem clamp(1rem, 3vw, 40px) 2rem
	         max(var(--hk-gutter), calc((100vw - 1310px) / 2));
}
.hk-po-hero__label {
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: 1.75rem;          /* cyan "Men" */
	color: var(--hk-brand);
	line-height: 1.2;
	margin: 0 0 0.25rem;
}
.hk-po-hero__heading {
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: clamp(2.5rem, 4.45vw, 4rem);   /* 64px */
	line-height: 1.08;
	color: var(--hk-ink);
	margin: 0;
	max-width: 480px;
}
.hk-po-hero__image img {
	display: block;
	width: 100%;
	height: clamp(320px, 41.7vw, 600px); /* 600px at the design's 1440 width */
	/* contain, not cover: show the whole photo (faces!) — anchored to the
	   right viewport edge like the design; any spare space sits on the left
	   against the white page background. */
	object-fit: contain;
	object-position: right center;
}

/* ---- Toolbar: grid label + filter (left), sort (right) -------------------- */
.hk-po-catalog {
	max-width: calc(1310px + 2 * var(--hk-gutter));
	margin-inline: auto;
	padding: clamp(3rem, 6.5vw, 5.9rem) var(--hk-gutter) 4rem;
}
.hk-po-toolbar {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin: 0 0 1.5rem;
}
.hk-po-toolbar__label {
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--hk-brand);
}
.hk-po-select {
	width: 230px;
	height: 40px;
	border-radius: 3px;
	padding: 0 2.4rem 0 0.9rem;
	font-family: "Nexa", var(--hk-font);
	font-size: 0.9375rem;
	color: var(--hk-brand);
	background-color: #fff;
	/* custom cyan caret */
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300a5ce' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	cursor: pointer;
}
.hk-po-select--filter { border: 1px solid var(--hk-line); }
.hk-po-select--sort {
	border: 1px solid var(--hk-brand);
	margin-left: auto;
}
.hk-po-select:focus {
	outline: none;
	border-color: var(--hk-brand);
	box-shadow: 0 0 0 1px var(--hk-brand);
}

/* ---- Product grid ---------------------------------------------------------- */
/* Cards come from wc-cards.css; the overview grid breathes more vertically. */
.hk-po .hk-products ul.products { row-gap: clamp(2.5rem, 5vw, 4.5rem); }

.hk-po-empty {
	padding: 3rem 0 1rem;
	font-family: "Nexa", var(--hk-font);
	font-size: 1.125rem;
	color: var(--hk-muted);
}

/* ---- Pagination ------------------------------------------------------------- */
.hk-po-pagination { margin-top: 3rem; }
.hk-po-pagination ul {
	list-style: none;
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	justify-content: center;
}
.hk-po-pagination li { margin: 0; }
/* The UL itself is class="page-numbers" too — target only the items inside
   the li's, or this rule out-specifies the ul's flex and the pages stack. */
.hk-po-pagination li > .page-numbers {
	display: inline-block;
	min-width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	border: 1px solid var(--hk-line);
	border-radius: 3px;
	color: var(--hk-ink);
	text-decoration: none;
	font-family: "Nexa", var(--hk-font);
	font-size: 0.9375rem;
	padding-inline: 0.5rem;
}
.hk-po-pagination li > .page-numbers.current {
	background: var(--hk-brand);
	border-color: var(--hk-brand);
	color: #fff;
}
.hk-po-pagination li > a.page-numbers:hover {
	border-color: var(--hk-brand);
	color: var(--hk-brand);
}

/* ---- Responsive -------------------------------------------------------------- */
@media (max-width: 860px) {
	.hk-po-hero { grid-template-columns: 1fr; }
	.hk-po-hero__text { padding-block: 2rem 1.5rem; }
	.hk-po-toolbar { flex-wrap: wrap; }
	.hk-po-select--sort { margin-left: 0; }
}