/* PINAX single product, Kafeneio: big photo, condensed name, price ticket, buy row, record list, related shelf.
   Owner: shop agent. Tokens only. Flat colour, no shadows, no gradients, no lift.
   Contrast: ink on paper 14.89, red price on paper 5.00, ink on mustard 8.33, grey on paper 6.06, green on paper 7.77, ink on pale 11.56. */

.px-product { background: var(--px-paper); color: var(--px-ink); }
.px-product__top { padding-block: var(--px-space-3) var(--px-section); }
.px-product__top > .px-crumbs { margin-bottom: var(--px-space-4); }

.px-product__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--px-space-5);
	align-items: start;
}
@media (min-width: 60rem) {
	.px-product__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 5rem); }
	.px-product__gallery { position: sticky; top: var(--px-space-4); }
}

/* ---------- Gallery ---------- */
.px-gallery { display: grid; gap: var(--px-space-3); min-width: 0; }
/* The gallery comes after the summary in the source (H1 first for readers and crawlers); show it first. */
.px-product__grid > .px-product__gallery { order: -1; }
.px-gallery__main { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--px-pale); }
.px-gallery__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.px-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--px-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.px-gallery__thumb {
	display: block;
	width: 4.5rem;
	aspect-ratio: 4 / 5;
	padding: 0;
	border: 0;
	background: var(--px-pale);
	overflow: hidden;
}
.px-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.px-gallery__thumb[aria-pressed="true"] { outline: 3px solid var(--px-ink); outline-offset: 2px; }
.px-gallery__thumb:focus-visible { outline: 3px solid var(--px-red); outline-offset: 2px; }
.px-gallery__note { color: var(--px-grey); font-size: var(--px-text-sm); }

/* ---------- Summary ---------- */
.px-product__summary { min-width: 0; }
.px-product__where { display: flex; flex-wrap: wrap; gap: var(--px-space-2) var(--px-space-3); align-items: baseline; }
.px-product__region { display: inline-flex; align-items: baseline; gap: 0.6rem; font-weight: 600; }
.px-product__region a { color: var(--px-ink); text-decoration: none; }
.px-product__region a:hover { color: var(--px-red); text-decoration: underline; }
.px-product__title {
	margin-top: var(--px-space-4);
	font-size: clamp(2.75rem, 1.9rem + 2.6vw, 4.75rem);
	line-height: 0.92;
	text-wrap: balance;
}
.px-product__el { margin-top: 0.625rem; font-size: 1.375rem; line-height: 1.3; }
.px-product__short { max-width: 40ch; margin-top: 1.125rem; line-height: 1.55; }
.px-product__short > * + * { margin-top: var(--px-space-2); }

/* Price ticket: flat mustard plate (.px-ticket--big), ink label and ink price (8.33), no outline, as in the mockup */
.px-product__ticket { margin: var(--px-space-5) 0 0 0.25rem; }
.px-product__ticket .px-ticket__price { font-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem); }
.px-product__ticket .px-ticket__name { color: var(--px-ink); }
.px-product__ticket .px-ticket__price :where(del) { color: var(--px-ink); }

/* ---------- Buy row (Woo form markup, scoped) ---------- */
.px-product__buy { margin-top: var(--px-space-4); }
.px-product__buy form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0;
}
.px-product__buy .quantity { display: flex; align-items: stretch; }
.px-product__buy .quantity input.qty {
	width: 3.25rem;
	min-height: 3.25rem;
	padding: 0;
	border: 0;
	background: var(--px-pale);
	color: var(--px-ink);
	font-weight: 700;
	font-size: 1.125rem;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.px-product__buy .quantity input.qty::-webkit-inner-spin-button,
.px-product__buy .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.px-product__buy .px-qty__btn {
	width: 2.75rem;
	min-height: 3.25rem;
	padding: 0;
	border: 0;
	background: var(--px-pale);
	color: var(--px-ink);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1;
}
.px-product__buy .px-qty__btn:hover { background: var(--px-ink); color: var(--px-paper); }
.px-product__buy :is(.quantity input.qty, .px-qty__btn):focus-visible { outline: 3px solid var(--px-red); outline-offset: 2px; position: relative; }
.px-product__buy .single_add_to_cart_button {
	flex: 1 1 12rem;
	max-width: 20rem;
	min-height: 3.25rem;
	padding: 0.95rem 1.625rem 0.8rem;
	border: 2px solid var(--px-red);
	border-radius: var(--px-radius);
	background: var(--px-red);
	color: var(--px-paper); /* paper on red 5.00 */
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--px-dur) var(--px-ease), color var(--px-dur) var(--px-ease), border-color var(--px-dur) var(--px-ease);
}
.px-product__buy .single_add_to_cart_button:hover { background: var(--px-ink); border-color: var(--px-ink); color: var(--px-paper); }
.px-product__buy .single_add_to_cart_button:focus-visible { outline: 3px solid var(--px-ink); outline-offset: 3px; }
.px-product__buy .single_add_to_cart_button:is(.disabled, :disabled) { cursor: not-allowed; background: transparent; border-color: var(--px-grey); color: var(--px-grey); }
.px-product__buy .stock { width: 100%; margin: 0; color: var(--px-grey); font-size: var(--px-text-sm); }

/* Being verified: status, one sentence, then the waitlist form on plain paper (styled by the commerce sheet) */
.px-product__verify { max-width: 36rem; }
.px-product__verify > * + * { margin-top: var(--px-space-3); }
.px-product__verify > .px-status + .px-product__verify-text { margin-top: 0.25rem; }
.px-product__verify-text { max-width: 44ch; }
.px-product__verify .px-waitlist { margin-top: var(--px-space-4); }

/* VAT and ships-to notes */
.px-product__notes { margin-top: var(--px-space-3); color: var(--px-grey); font-size: var(--px-text-sm); line-height: 1.5; max-width: 44ch; }
.px-product__notes a { color: var(--px-ink); font-weight: 700; white-space: nowrap; }
.px-product__notes a:hover { color: var(--px-red); }
.px-product__noship { color: var(--px-ink); font-weight: 600; }

/* Does not ship: a plate in place of the buy row, with the destination picker (commerce markup, scoped here) */
.px-product__noship-plate { max-width: 36rem; padding: var(--px-space-3) 0 0; border-top: var(--px-rule-heavy); }
.px-product__noship-title {
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--px-red); /* red on paper 5.00, large text */
}
.px-product__noship-note { margin-top: var(--px-space-2); color: var(--px-grey); font-size: var(--px-text-sm); line-height: 1.5; max-width: 44ch; }
.px-product__noship-plate .px-country-picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--px-space-2) 0.75rem; margin-top: var(--px-space-3); }
.px-product__noship-plate .px-country-picker__label { flex: 1 0 100%; font-weight: 700; font-size: var(--px-text-sm); }
.px-product__noship-plate .px-country-picker__select {
	flex: 1 1 12rem;
	max-width: 18rem;
	min-height: 3rem;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-bottom: 2px solid var(--px-ink);
	border-radius: 0;
	background: var(--px-pale);
	color: var(--px-ink);
	font: inherit;
	font-weight: 600;
}
.px-product__noship-plate .px-country-picker__submit {
	min-height: 3rem;
	padding: 0.7rem 1.25rem 0.55rem;
	border: 2px solid var(--px-ink);
	border-radius: var(--px-radius);
	background: var(--px-ink);
	color: var(--px-paper);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.px-product__noship-plate .px-country-picker__submit:hover { background: var(--px-green); border-color: var(--px-green); }
.px-product__noship-plate :is(.px-country-picker__select, .px-country-picker__submit):focus-visible { outline: 3px solid var(--px-red); outline-offset: 2px; }

/* ---------- Box contents ---------- */
.px-product__box { margin-top: var(--px-space-5); }
.px-product__h3 {
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 2.125rem;
	line-height: 1;
	text-transform: uppercase;
}
.px-product__lines { margin: var(--px-space-3) 0 var(--px-space-2); padding: 0; list-style: none; }
.px-product__lines li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--px-space-3);
	padding-block: 0.75rem;
	border-top: var(--px-hairline);
}
.px-product__line-name { display: grid; gap: 0.15rem; min-width: 0; font-weight: 600; }
.px-product__line-name a { color: var(--px-ink); text-decoration: none; }
.px-product__line-name a:hover { color: var(--px-red); text-decoration: underline; }
.px-product__lines .px-num { white-space: nowrap; font-weight: 700; }

/* ---------- Origin record (markup from inc/origin-record.php) ---------- */
.px-record-block { margin-top: var(--px-space-5); scroll-margin-top: var(--px-space-4); }
.px-record-block__title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--px-space-3);
	font-size: 2.125rem;
	line-height: 1;
}
.px-record-block__el { font-family: var(--px-font-text); font-weight: 400; font-size: 1rem; text-transform: none; color: var(--px-grey); }
.px-record-block .px-record { margin-top: 0.875rem; }
.px-record-block .px-record dd { overflow-wrap: break-word; min-width: 0; }
.px-record__note { display: block; margin-top: 0.25rem; color: var(--px-grey); font-size: var(--px-text-sm); }
.px-record__sources { margin: 0; padding: 0; list-style: none; }
.px-record__sources li + li { margin-top: 0.25rem; }
.px-record-more { border-top: var(--px-hairline); border-bottom: var(--px-hairline); }
.px-record-more > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--px-space-3);
	min-height: 3rem;
	padding-block: 0.5rem;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.px-record-more > summary::-webkit-details-marker { display: none; }
.px-record-more > summary::after { content: "+"; color: var(--px-red); font-size: 1.5rem; line-height: 1; font-weight: 700; }
.px-record-more[open] > summary::after { content: "\2212"; }
.px-record-more > summary:hover { color: var(--px-red); }
.px-record-more > summary:focus-visible { outline: 3px solid var(--px-red); outline-offset: 2px; }
.px-record-more .px-record { margin: 0 0 var(--px-space-2); }

/* ---------- The address ---------- */
.px-product__address { padding-block: 0 var(--px-section); }
.px-product__address-grid { display: grid; gap: var(--px-space-5); align-items: center; }
@media (min-width: 60rem) {
	.px-product__address-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); }
}
.px-product__map { max-width: 32.5rem; width: 100%; }
/* Compact map styles live in 30-home.css, which is not loaded on product pages: repeat the few rules, scoped. */
.px-product__map .px-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.px-product__map .px-map__region path { fill: var(--px-pale); stroke: var(--px-paper); stroke-width: 1.6; transition: fill var(--px-dur) var(--px-ease); }
.px-product__map .px-map__region.is-current path { fill: var(--px-green); }
.px-product__map .px-map__region:hover path,
.px-product__map .px-map__region:focus-visible path { fill: var(--px-mustard); }
.px-product__map .px-map__region:focus { outline: none; }
.px-product__map .px-map__region:focus-visible path { stroke: var(--px-ink); stroke-width: 3; }
.px-product__map .px-map__dot { fill: var(--px-red); stroke: var(--px-paper); stroke-width: 5; pointer-events: none; }
@media (max-width: 59.99rem) { .px-product__map { max-width: 78%; } }
.px-product__h2-el { color: var(--px-grey); font-weight: 700; text-transform: none; }
.px-product__address-text .px-product__h2 { margin-top: 0.75rem; }
.px-product__h2.px-product__h2--multi { display: grid; gap: 0.35rem; font-size: var(--px-h3); }
.px-product__addr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.px-product__addr-line a { color: var(--px-ink); text-decoration: none; }
.px-product__addr-line a:hover { color: var(--px-red); text-decoration: underline; }
.px-product__address-lede { max-width: 40ch; margin-top: var(--px-space-3); font-size: var(--px-text-lg); line-height: 1.5; }
.px-product__address-more { margin-top: var(--px-space-4); font-weight: 700; }

/* ---------- About ---------- */
.px-product__about { padding-block: 0 var(--px-section); }
.px-product__about-inner { display: grid; gap: var(--px-space-4); }
@media (min-width: 60rem) {
	.px-product__about-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); }
}
.px-product__h2 { font-size: var(--px-h2); }
.px-product__about .px-prose { max-width: 40rem; }

/* ---------- Related ---------- */
.px-related { padding-block: 0 var(--px-section); }
.px-related .px-section__head > a { font-weight: 700; }