/*
Collection / archive pages (Κεφ. 11). Loaded only on product category and
shop archives.
*/

.pph-collection-hero {
	aspect-ratio: 21 / 9;
	width: 100%;
	border-radius: 0;
}

@media (max-width: 767px) {
	.pph-collection-hero {
		aspect-ratio: 4 / 3;
	}
}

/* .pph-collection__intro/__title/__description moved to global.css —
   reused by Blog index and Contact/Wishlist page titles too. */

/* ---------- Filters bar (Papier-style redesign) ----------
   Replaces the old 260px sidebar: "Όλα τα φίλτρα" + one pill per group on
   the left (all opening the shared drawer, assets/js/collection-filters.js),
   result count + sort on the right. Products run full-width below. */

.pph-collection__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--30); /* tighter filter bar */
	border-bottom: 1px solid var(--wp--preset--color--pph-border);
	margin-bottom: var(--wp--preset--spacing--40);
}

.pph-collection__bar-groups {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.pph-collection__bar-meta {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.pph-collection__count {
	color: var(--wp--preset--color--pph-text-muted);
	font-size: var(--wp--preset--font-size--body);
	white-space: nowrap;
}

/* Colors/chevron/radius/focus come from the global "Form controls" select
   rule (global.css) — just the touch-target height set here. */
.pph-collection__sort select {
	min-height: 44px;
}

/* "Secondary pills" — same border/hover language as the site's Secondary
   buttons (global.css "Buttons — unified system"), just pill-sized and with
   room for an optional count badge. */
.pph-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 30px; /* even more compact, Papier-style */
	padding-inline: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--pph-brown); /* filled teal — site brand colour */
	border: 1px solid var(--wp--preset--color--pph-brown);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--pph-white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption); /* 0.8125rem */
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-filter-pill svg {
	width: 13px;
	height: 13px;
}

.pph-filter-pill:hover,
.pph-filter-pill:focus-visible,
.pph-filter-pill[aria-expanded="true"] {
	background: var(--wp--preset--color--pph-brown-dark);
	border-color: var(--wp--preset--color--pph-brown-dark);
}

.pph-filter-pill__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 6px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--pph-white); /* white on the filled teal pill so the count stays legible */
	color: var(--wp--preset--color--pph-brown);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1;
}

.pph-filter-pill__badge[hidden] {
	display: none;
}

/* ---------- Active filter chips ---------- */

.pph-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
}

.pph-active-filters[hidden] {
	display: none;
}

.pph-filter-chip a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--pph-border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--pph-beige);
	color: var(--wp--preset--color--pph-text);
	font-size: var(--wp--preset--font-size--caption);
	text-decoration: none;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-filter-chip a:hover,
.pph-filter-chip a:focus-visible {
	background: var(--wp--preset--color--pph-sand);
}

.pph-filter-chip--clear-all a {
	background: none;
	border-color: transparent;
	color: var(--wp--preset--color--pph-text-muted);
	text-decoration: underline;
}

.pph-filter-chip--clear-all a:hover,
.pph-filter-chip--clear-all a:focus-visible {
	background: none;
	color: var(--wp--preset--color--pph-brown);
}

/* The results column no longer sits in a CSS grid track (full-width now),
   but nowrap product names still need somewhere to shrink to instead of
   forcing horizontal overflow. */
.pph-collection__results {
	min-width: 0;
}

/* ---------- Filters drawer ----------
   Fixed off-canvas dialog, opened from any filter-bar pill. Positioned via
   CSS classes only (never the `hidden` attribute) so there's no
   flash-of-unstyled-drawer before JS runs: closed state is simply
   off-screen + invisible. See the <noscript> override in
   inc/collection.php for the no-JS fallback (a plain in-flow block). */

.pph-filters-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
}

.pph-filters-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(23, 48, 46, 0.4);
	opacity: 0;
	transition: opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-filters-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 100%;
	background: var(--wp--preset--color--pph-ivory);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-filters-drawer.is-open {
	visibility: visible;
}

.pph-filters-drawer.is-open .pph-filters-drawer__overlay {
	opacity: 1;
}

.pph-filters-drawer.is-open .pph-filters-drawer__panel {
	transform: translateX(0);
}

.pph-filters-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--pph-border);
}

.pph-filters-drawer__back {
	background: none;
	border: none;
	color: var(--wp--preset--color--pph-brown);
	font-size: var(--wp--preset--font-size--body);
	cursor: pointer;
	padding: 0;
}

.pph-filters-drawer__back[hidden] {
	display: none;
}

.pph-filters-drawer__header h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-3);
	color: var(--wp--preset--color--pph-brown);
	margin: 0;
}

.pph-filters-drawer__form {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.pph-filters-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--40);
}

.pph-filters-drawer__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--pph-border);
}

@media (max-width: 600px) {
	.pph-filters-drawer__panel {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pph-filters-drawer__overlay,
	.pph-filters-drawer__panel {
		transition: none;
	}
}

/* ---------- Filter groups (inside the drawer) ---------- */

.pph-filter-group {
	border: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--60);
}

.pph-filter-group[hidden] {
	display: none;
}

.pph-filter-group legend {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--body-large);
	color: var(--wp--preset--color--pph-brown);
	margin-bottom: var(--wp--preset--spacing--20);
}

.pph-filter-checkbox {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--nav); /* 0.9375rem — smaller filter labels */
	padding-block: var(--wp--preset--spacing--10);
	cursor: pointer;
}

.pph-filter-checkbox__label {
	flex: 1;
}

.pph-filter-checkbox__count {
	color: var(--wp--preset--color--pph-text-muted);
	font-size: var(--wp--preset--font-size--caption);
}

.pph-filter-price {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

/* Border/radius/focus come from the global "Form controls" text-input rule
   (global.css) — just this row's own layout/sizing here. */
.pph-filter-price input {
	width: 0;
	flex: 1;
	min-height: 48px;
	padding: 0 var(--wp--preset--spacing--30);
}

/* Box model/colors come from "Buttons — unified system" (Secondary) in
   global.css — nothing left to add here. */

/* ---------- Empty state (Κεφ. 11.8) ----------
   .pph-collection__empty/__empty-message moved to global.css — reused by
   Blog index and Wishlist empty states. __empty-suggestions* below is
   collection-page-only (related categories list), stays here. */

.pph-collection__empty-suggestions-title {
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--pph-text-muted);
}

.pph-collection__empty-suggestions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
}

.pph-collection__empty-suggestions a {
	color: var(--wp--preset--color--pph-brown);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* ---------- Editorial insert (Κεφ. 11.9) ---------- */

.pph-collection__editorial-insert {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	background: var(--wp--preset--color--pph-beige);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--40);
}

.pph-collection__editorial-insert .pph-placeholder-media {
	aspect-ratio: 4 / 5;
}

.pph-collection__editorial-insert p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-3);
	color: var(--wp--preset--color--pph-brown);
	margin: 0;
}

@media (max-width: 767px) {
	.pph-collection__editorial-insert {
		grid-template-columns: 1fr;
	}
}

/* Pagination moved to global.css — used by the Blog index too (content.css
   page), not just collection pages. See global.css "Shared layout utilities". */

@media (max-width: 767px) {
	.pph-collection__bar {
		align-items: flex-start;
	}

	.pph-collection__bar-meta {
		width: 100%;
		justify-content: space-between;
	}
}