/* PINAX home page and the region map component (loaded on home, /map/ and region pages).
   Owner: home agent. Kafeneio system: tokens only, flat colour, no gradients, no shadows, no lift. */

.px-home,
.px-mappage,
.px-region { display: block; overflow-x: clip; }

/* ---------- Map component ---------- */
.px-map__grid {
	display: grid;
	grid-template-columns: minmax(17.5rem, 4fr) 8fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.px-map--compact .px-map__grid { display: block; }

.px-map__list { margin: 0; padding: 0; list-style: none; }
.px-map__row {
	display: grid;
	grid-template-columns: 3.25rem 1fr auto;
	align-items: baseline;
	gap: 0.75rem;
	padding-block: 0.5625rem;
	color: var(--px-ink);
	text-decoration: none;
}
.px-map__code {
	color: var(--px-grey);
	font-weight: 700;
	font-size: var(--px-text-sm);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.px-map__name { font-weight: 600; line-height: 1.3; }
.px-map__el { display: block; margin-top: 0.125rem; color: var(--px-grey); font-weight: 400; font-size: var(--px-text-sm); }
.px-map__n {
	color: var(--px-green);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: var(--px-h4);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.px-map__row.is-empty .px-map__name { color: var(--px-grey); }
.px-map__row.is-empty .px-map__n {
	color: var(--px-grey);
	font-family: var(--px-font-text);
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.px-map__row:hover,
.px-map__row.is-hot { color: var(--px-ink); }
.px-map__row:hover .px-map__name,
.px-map__row.is-hot .px-map__name,
.px-map__row[aria-current="page"] .px-map__name { color: var(--px-red); }
.px-map__row:focus-visible { outline-offset: 2px; }

.px-map__figure { min-width: 0; }
.px-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.px-map__region path {
	stroke: var(--px-paper);
	stroke-width: 1.6;
	transition: fill var(--px-dur) var(--px-ease);
}
.px-map__region.is-has path { fill: var(--px-green); }
.px-map__region.is-empty path { fill: var(--px-pale); }
.px-map__region:hover path,
.px-map__region.is-hot path,
.px-map__region:focus-visible path { fill: var(--px-mustard); }
.px-map__region:focus { outline: none; }
.px-map__region:focus-visible path { stroke: var(--px-ink); stroke-width: 3; }

.px-map__pin { pointer-events: none; transform-box: fill-box; transform-origin: center; }
.px-map__pin circle { fill: var(--px-red); }
.px-map__pin text {
	fill: var(--px-paper);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 21px;
	text-anchor: middle;
}

/* Compact: every region pale, the current one green with a red dot */
.px-map--compact .px-map__region path { fill: var(--px-pale); }
.px-map--compact .px-map__region.is-current path { fill: var(--px-green); }
.px-map--compact .px-map__region:hover path,
.px-map--compact .px-map__region:focus-visible path { fill: var(--px-mustard); }
.px-map__dot { fill: var(--px-red); stroke: var(--px-paper); stroke-width: 5; pointer-events: none; }

.px-map__readout {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.625rem;
	min-height: 1.75rem;
	margin-top: 1.125rem;
}
.px-map__readout-name {
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.625rem;
	line-height: 1;
	text-transform: uppercase;
}
.px-map__readout-el,
.px-map__readout-count { color: var(--px-grey); }
.px-map__credit { margin-top: 0.375rem; color: var(--px-grey); font-size: var(--px-text-sm); }

@media (max-width: 60em) {
	.px-map__grid { grid-template-columns: 1fr; }
	.px-map__figure { order: -1; }
}
@media (max-width: 40em) {
	/* Pins stay legible when the map is phone width */
	.px-map--full .px-map__pin { transform: scale(1.7); }
	.px-map__readout-name { font-size: 1.375rem; }
}

/* ---------- Hero: green sign left, photo right ---------- */
.px-hhero {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	min-height: min(78vh, 47.5rem);
}
.px-hhero--solo { grid-template-columns: 1fr; }
.px-hhero__sign {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--px-space-5);
	padding: clamp(1.75rem, 5vw, 4.5rem) var(--px-gutter);
}
.px-hhero__word { color: var(--px-mustard); font-size: clamp(6rem, 22.5vw, 23rem); white-space: nowrap; }
.px-hhero--solo .px-hhero__word { font-size: clamp(6rem, 36vw, 30rem); }
.px-hhero__sub {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-top: 1.375rem;
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.px-hhero__sub i { flex: 1; min-width: 1.5rem; height: 2px; background: currentColor; }
.px-hhero__title { max-width: 12ch; text-wrap: wrap; /* greedy: EVERY OBJECT / HAS AN / ADDRESS. as in the mockup; balance split it EVERY / OBJECT HAS */ font-size: var(--px-h1); line-height: 0.92; }
.px-hhero__lead { max-width: 36ch; margin: 1.125rem 0 1.875rem; font-size: var(--px-text-lg); }
.px-hhero__photo { position: relative; margin: 0; background: var(--px-ink); }
.px-hhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-hhero__cap {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.625rem 1rem;
	background: var(--px-paper);
	color: var(--px-ink);
	font-weight: 600;
	font-size: var(--px-text-sm);
}

@media (max-width: 60em) {
	.px-hhero { grid-template-columns: 1fr; min-height: 0; }
	.px-hhero__word { font-size: 36vw; }
	.px-hhero__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 32.5rem) {
	.px-hhero__word { font-size: 38vw; }
	.px-hhero__sub { gap: 0.625rem; font-size: 0.8125rem; letter-spacing: 0.1em; }
}

/* ---------- Woo notices on home and region pages (px_home_notices) ---------- */
.px-home-notices { padding-block: var(--px-space-3); }
.px-home-notices :where(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
	list-style: none;
	margin: 0;
	padding: var(--px-space-3) var(--px-space-4);
	background: var(--px-pale);
	color: var(--px-ink);
	font-weight: 600;
	line-height: 1.5;
}
.px-home-notices :where(.woocommerce-error, .woocommerce-message, .woocommerce-info) + * { margin-top: var(--px-space-2); }
.px-home-notices .woocommerce-error { background: var(--px-red); color: var(--px-paper); }
.px-home-notices .woocommerce-info { background: var(--px-mustard); }
.px-home-notices a { color: inherit; font-weight: 700; }
.px-home-notices .button { margin-left: var(--px-space-3); }

/* ---------- Shop by region ---------- */
.px-hregions__lede { margin-top: var(--px-space-3); max-width: 34ch; }
.px-hregions .px-section__body { margin-top: 3rem; }

/* ---------- On the shelf ---------- */
.px-hshelf .px-section__body { margin-top: 3rem; }

/* ---------- Proof band ---------- */
.px-hproof__title { max-width: 24ch; }
.px-hproof__title span { display: block; }
.px-hproof__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 4vw, 4rem);
	margin: 3.5rem 0 0;
	padding: 0;
	list-style: none;
}
.px-hproof__num {
	display: block;
	margin-bottom: 1.125rem;
	font-family: var(--px-font-display);
	font-weight: 900;
	font-size: 5.5rem;
	line-height: 0.8;
}
.px-hproof__name {
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1;
	text-transform: uppercase;
}
.px-hproof__item p { max-width: 32ch; margin-top: 0.625rem; }
.px-hproof__more { margin-top: 3rem; font-weight: 700; }
.px-hproof__more a:hover { color: var(--px-ink); text-decoration-thickness: 3px; }

@media (max-width: 60em) {
	.px-hproof__list { grid-template-columns: 1fr; }
}
@media (max-width: 32.5rem) {
	.px-hproof__num { font-size: 4rem; }
}

/* ---------- Region boxes ---------- */
.px-hboxes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
	margin-top: 3rem;
	padding: 0;
	list-style: none;
}
.px-hbox { min-width: 0; }
.px-hbox__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--px-pale); }
.px-hbox__img img { width: 100%; height: 100%; object-fit: cover; }
.px-hbox__code {
	margin-top: 1.125rem;
	color: var(--px-red);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: var(--px-h4);
	line-height: 1;
	letter-spacing: 0.04em;
}
.px-hbox__name {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.25rem 1rem;
	margin-top: 0.375rem;
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 0.95;
	text-transform: uppercase;
}
.px-hbox__name a { text-decoration: none; }
.px-hbox__name a:hover { color: var(--px-red); }
.px-hbox__price { color: var(--px-green); white-space: nowrap; font-variant-numeric: lining-nums; }
.px-hbox__price :where(del) { color: var(--px-grey); font-size: 0.6em; }
.px-hbox__price :where(ins) { text-decoration: none; }
.px-hbox__line { max-width: 36ch; margin-top: 0.5rem; color: var(--px-grey); }
.px-hbox .px-status { margin-top: 0.5rem; }

@media (max-width: 60em) {
	.px-hboxes__grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ---------- Field notes, kitchen, before you order ---------- */
.px-hnotes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--px-space-5) clamp(2rem, 5vw, 5rem);
	padding-top: 3rem;
}
.px-hnotes__title {
	font-size: 2.5rem;
	line-height: 1;
}
.px-hnotes__list { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.px-hnotes__list .px-arrow { font-size: var(--px-text-lg); }
.px-hnotes__all { margin-top: 0.5rem; color: var(--px-grey); font-size: var(--px-text-sm); font-weight: 700; }