/* PINAX chrome, Kafeneio: notice strip, paper header with the red plate, drawer, title band, result rows, search, 404, green footer.
   Owner: foundation agent. Tokens only. */

/* ---------- Notice strip (ink, slim) ---------- */
.px-announce {
	background: var(--px-ink);
	color: var(--px-paper);
	font-size: var(--px-text-sm);
	line-height: 1.4;
}
.px-announce__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.125rem var(--px-space-4);
	padding-block: 0.45rem;
}
.px-announce__text { flex: 1 1 20rem; }
.px-announce__link { color: var(--px-mustard); font-weight: 600; white-space: nowrap; }
.px-announce__link:hover { color: var(--px-mustard); text-decoration-thickness: 2px; }
.px-announce :focus-visible { outline-color: var(--px-mustard); }

/* ---------- Header bar (paper) ---------- */
.px-header { background: var(--px-paper); color: var(--px-ink); }
.px-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--px-space-3);
	min-height: 4.25rem;
	padding-block: 0.75rem;
}

/* Logo: plate inside the home link */
.px-lockup { display: inline-flex; flex: none; margin-right: auto; color: var(--px-ink); text-decoration: none; line-height: 0; }
.px-lockup .px-plate { font-size: 1.5rem; }
@media (min-width: 62rem) { .px-lockup .px-plate { font-size: 1.75rem; } }
.px-lockup:hover .px-plate { background: var(--px-ink); }

/* Tools: cart + menu toggle */
.px-header__tools { display: flex; align-items: center; gap: var(--px-space-3); }

/* Header cart link. Class is px-headcart, never px-cart: the cart page template owns .px-cart. */
.px-headcart {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.75rem;
	color: var(--px-ink);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
.px-headcart:hover { color: var(--px-red); }
.px-headcart__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0.1em 0.4rem 0;
	border-radius: 0.75rem;
	background: var(--px-ink);
	color: var(--px-paper);
	font-size: var(--px-text-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--px-dur) var(--px-ease);
}
.px-headcart--filled .px-headcart__count { background: var(--px-red); }
.px-headcart:hover .px-headcart__count { background: var(--px-red); }

/* Menu button (mobile) */
.px-header__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0 0.125rem;
	border: 0;
	background: transparent;
	color: var(--px-ink);
	font-weight: 700;
	font-size: 1rem;
}
.px-header__toggle-label { min-width: 3.1rem; text-align: right; }
.px-header__toggle-bars { position: relative; width: 1.25rem; height: 2px; background: currentColor; }
.px-header__toggle-bars::before,
.px-header__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform var(--px-dur) var(--px-ease);
}
.px-header__toggle-bars::before { transform: translateY(-6px); }
.px-header__toggle-bars::after { transform: translateY(6px); }
.px-header__toggle[aria-expanded="true"] .px-header__toggle-bars { background: transparent; }
.px-header__toggle[aria-expanded="true"] .px-header__toggle-bars::before { transform: rotate(45deg); }
.px-header__toggle[aria-expanded="true"] .px-header__toggle-bars::after { transform: rotate(-45deg); }
.px-header__toggle:hover { color: var(--px-red); }
.no-js .px-header__toggle { display: none; }

/* Drawer (mobile): full-width disclosure under the bar. Without JS it is always open. */
.px-header__panel {
	order: 3;
	flex: 1 0 100%;
	padding-block: var(--px-space-3) var(--px-space-5);
}
.px-js .px-header__panel:not(.is-open) { display: none; }

.px-nav__list { list-style: none; margin: 0; padding: 0; }
.px-nav__list > li > a {
	display: flex;
	align-items: center;
	min-height: 3.5rem;
	padding-top: 0.2em;
	border-top: var(--px-hairline);
	color: var(--px-ink);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
}
.px-nav__list > li:last-child > a { border-bottom: var(--px-hairline); }
.px-nav__list > li > a:hover,
.px-nav__list > li:where(.current-menu-item, .current-menu-ancestor, .current_page_item) > a { color: var(--px-red); }

/* Ship to picker (markup by commerce px_country_picker). One line, never wraps. */
.px-header__country { padding-top: var(--px-space-4); }
.px-header .px-country-picker {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}
.px-header .px-country-picker__label {
	flex: none;
	color: var(--px-grey);
	font-weight: 400;
	font-size: 0.9375rem;
	white-space: nowrap;
}
.px-header .px-country-picker__select {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: 16rem;
	min-height: 2.75rem;
	padding: 0.25rem 1.75rem 0.15rem 0.25rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background-color: transparent;
	background-position: right 0.35rem center;
	color: var(--px-ink);
	font-weight: 600;
	font-size: 0.9375rem;
	text-overflow: ellipsis;
	field-sizing: content;
}
.px-header .px-country-picker__select:hover { border-bottom-color: var(--px-ink); }
.px-header .px-country-picker__submit {
	flex: none;
	min-height: 2rem;
	padding: 0.2rem 0.55rem 0.1rem;
	border: 1px solid var(--px-grey);
	border-radius: var(--px-radius);
	background: transparent;
	color: var(--px-ink);
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.px-header .px-country-picker__submit:hover { background: var(--px-ink); border-color: var(--px-ink); color: var(--px-paper); }
/* With JS a pointer choice submits at once (commerce.js). The Set button stays out of sight until a keyboard
   change marks the form dirty, or until it receives focus, so keyboard users still confirm on purpose. */
.px-js .px-header .px-country-picker:not(.is-dirty) .px-country-picker__submit:not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.px-header .px-country-picker.is-dirty .px-country-picker__submit { background: var(--px-mustard); border-color: var(--px-mustard); color: var(--px-ink); }
.px-header .px-country-picker.is-dirty .px-country-picker__submit:not(:focus-visible) { outline: 0; }
.px-header .px-country-picker.is-dirty .px-country-picker__submit:focus-visible { outline: 3px solid var(--px-red); outline-offset: 2px; }

/* Desktop */
@media (min-width: 62rem) {
	.px-header__bar { flex-wrap: nowrap; gap: var(--px-space-5); min-height: 5rem; padding-block: 1.125rem; }
	.px-lockup { margin-right: 0; }
	.px-header__toggle { display: none; }
	.px-header__panel,
	.px-js .px-header__panel:not(.is-open) {
		order: 0;
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		gap: var(--px-space-4);
		min-width: 0;
		padding: 0;
	}
	.px-nav { margin-right: auto; }
	.px-nav__list { display: flex; align-items: center; gap: 0 1.75rem; }
	.px-nav__list > li > a,
	.px-nav__list > li:last-child > a {
		min-height: 2.75rem;
		padding: 0;
		border: 0;
		font-family: var(--px-font-text);
		font-weight: 600;
		font-size: 1rem;
		letter-spacing: 0;
		text-transform: none;
		white-space: nowrap;
	}
	.px-nav__list > li:where(.current-menu-item, .current-menu-ancestor, .current_page_item) > a { color: var(--px-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; text-decoration-color: var(--px-red); }
	.px-nav__list > li > a:hover { color: var(--px-red); }
	.px-header__country { flex: 0 1 auto; min-width: 0; padding: 0; }
	.px-header .px-country-picker__select { max-width: 11rem; }
	.px-header__tools { gap: var(--px-space-4); }
}
@media (min-width: 62rem) and (max-width: 74.99rem) {
	.px-nav__list { gap: 0 1.125rem; }
	.px-header .px-country-picker__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 24rem) {
	.px-lockup .px-plate { font-size: 1.5rem; }
	.px-header__tools { gap: var(--px-space-2); }
	.px-header__toggle-label { min-width: 0; }
}

/* ---------- Main ---------- */
.px-main { display: block; }
.px-main:focus { outline: none; }

/* ---------- Title band (paper): red eyebrow + big condensed heading ---------- */
.px-titleband { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.px-titleband .px-eyebrow { margin-bottom: 0.75rem; }
.px-titleband__title { max-width: 16ch; font-size: var(--px-h1); }
.px-titleband__query { color: var(--px-red); }
.px-titleband__lede { max-width: 44ch; margin-top: var(--px-space-3); color: var(--px-grey); font-size: var(--px-text-lg); line-height: 1.5; }
.px-titleband__lede :where(p + p) { margin-top: 0.8em; }
.px-titleband__search { max-width: 36rem; margin-top: var(--px-space-5); }
/* Legacy coloured title bands render as calm paper in Kafeneio */
.px-titleband.px-field--violet,
.px-titleband.px-field--green { background: var(--px-paper); color: var(--px-ink); }
.px-titleband.px-field--violet .px-eyebrow,
.px-titleband.px-field--green .px-eyebrow { color: var(--px-red); }
.px-titleband.px-field--violet :focus-visible { outline-color: var(--px-red); }
.px-titleband.px-field--violet .px-titleband__lede { color: var(--px-grey); }

/* ---------- Page body ---------- */
.px-page__body { padding-block: var(--px-space-4) var(--px-section); }
.px-page__content--wide { max-width: 100%; }

/* ---------- Result rows (index, search). Class is px-results, never px-ledger: the map page owns .px-ledger ---------- */
.px-results { list-style: none; margin: 0; padding: 0; border-top: var(--px-rule); }
.px-results__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem;
	padding-block: var(--px-space-4);
	border-bottom: var(--px-hairline);
}
.px-results__no { color: var(--px-red); font-family: var(--px-font-display); font-weight: 800; font-size: 1.25rem; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.px-results__title { font-family: var(--px-font-display); font-weight: 800; font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem); line-height: 0.95; text-transform: none; letter-spacing: 0.005em; }
.px-results__title a { color: inherit; text-decoration: none; }
.px-results__title a:hover { color: var(--px-red); }
.px-results__excerpt { margin-top: 0.375rem; max-width: 44rem; color: var(--px-grey); }
.px-results__meta { color: var(--px-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-results__meta :where(del) { color: var(--px-grey); font-weight: 400; }
.px-results__meta :where(ins) { text-decoration: none; }
@media (min-width: 48rem) {
	.px-results__row { grid-template-columns: 8rem 1fr auto; gap: var(--px-space-4); align-items: baseline; }
}

/* ---------- Empty state ---------- */
.px-empty { max-width: 40rem; }
.px-empty > * + * { margin-top: var(--px-space-3); }
.px-empty__lede { font-family: var(--px-font-display); font-weight: 800; font-size: var(--px-h3); line-height: 0.95; text-transform: uppercase; }
.px-empty__actions { display: flex; flex-wrap: wrap; gap: var(--px-space-3); padding-top: var(--px-space-2); }

/* ---------- Search form ---------- */
.px-searchform__label { display: block; margin-bottom: var(--px-space-2); color: var(--px-grey); font-weight: 700; font-size: var(--px-text-sm); letter-spacing: 0.12em; text-transform: uppercase; }
.px-searchform__row { display: flex; flex-wrap: wrap; gap: var(--px-space-2); }
.px-searchform__input { flex: 1 1 14rem; width: auto; }
.px-searchform__submit { flex: none; }

/* ---------- 404 ---------- */
.px-404 { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) var(--px-section); }
.px-404__grid { display: grid; gap: var(--px-space-5); align-items: center; }
.px-404__sign { display: grid; justify-items: start; gap: var(--px-space-3); }
.px-404__num { color: var(--px-red); font-family: var(--px-font-display); font-weight: 900; font-size: clamp(8rem, 4rem + 18vw, 18rem); line-height: 0.78; letter-spacing: 0.02em; }
.px-404__title { max-width: 14ch; font-size: var(--px-h1); }
.px-404__lede { max-width: 36ch; margin-top: var(--px-space-3); color: var(--px-grey); font-size: var(--px-text-lg); line-height: 1.5; }
.px-404__actions { display: flex; flex-wrap: wrap; gap: var(--px-space-3); margin-top: var(--px-space-5); }
.px-404__search { max-width: 34rem; margin-top: var(--px-space-6); }
@media (min-width: 56rem) {
	.px-404__grid { grid-template-columns: 5fr 7fr; gap: var(--px-space-6); }
}

/* ---------- Footer (shutter green) ---------- */
.px-footer {
	background: var(--px-green);
	color: var(--px-paper);
	font-size: 1rem;
	line-height: 1.5;
	padding-block: var(--px-space-6) var(--px-space-5);
}
.px-footer a { color: var(--px-paper); text-decoration: none; }
.px-footer a:hover { color: var(--px-paper); text-decoration: underline; text-decoration-thickness: 2px; }
.px-footer :focus-visible { outline-color: var(--px-mustard); }
.px-footer :where(ul) { list-style: none; margin: 0; padding: 0; }

.px-footer__word {
	color: var(--px-mustard);
	font-family: var(--px-font-display);
	font-weight: 900;
	font-size: clamp(6rem, 3rem + 13vw, 13.75rem);
	line-height: 0.78;
	letter-spacing: 0.02em;
	margin-left: -0.04em;
}
.px-footer__tagline { max-width: 34ch; margin-top: var(--px-space-4); font-size: var(--px-text-lg); }

.px-footer__label {
	margin-bottom: 0.75rem;
	color: var(--px-paper);
	font-family: var(--px-font-text);
	font-weight: 700;
	font-size: var(--px-text-sm);
	line-height: 1.5rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.px-footer__grid {
	display: grid;
	gap: var(--px-space-5) var(--px-space-4);
	margin-top: var(--px-space-6);
}
.px-footer__about p { max-width: 36ch; }
.px-footer__about p + p { margin-top: 0.75rem; }
.px-footer__about a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; font-weight: 600; }

.px-footer__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--px-space-5) var(--px-space-4); }
.px-footer__menu > li > a {
	display: inline-block;
	margin-bottom: 0.75rem;
	font-weight: 700;
	font-size: var(--px-text-sm);
	line-height: 1.5rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.px-footer__menu .sub-menu li + li,
.px-footer__legal li + li { margin-top: 0.375rem; }
.px-footer__menu .sub-menu a,
.px-footer__legal a { display: inline-block; padding-block: 0.125rem; }
.px-footer__menu a[aria-current="page"],
.px-footer__legal a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--px-mustard); }

.px-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--px-space-2) var(--px-space-4);
	margin-top: var(--px-space-6);
	font-size: var(--px-text-sm);
}

@media (min-width: 48rem) {
	.px-footer__menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.px-footer__grid { grid-template-columns: 1fr 1fr; }
	.px-footer__nav:not(.px-footer__nav--legal) { grid-column: 1 / -1; }
}
@media (min-width: 62rem) {
	.px-footer__grid { grid-template-columns: 2fr 5fr 1.35fr; gap: var(--px-space-4); }
	.px-footer__nav:not(.px-footer__nav--legal) { grid-column: auto; }
	.px-footer__menu { gap: var(--px-space-4); }
}
@media (max-width: 47.99rem) {
	.px-footer__about { grid-column: 1 / -1; }
}