/**
 * Pastry App - components.
 *
 * Mobile first. Everything is sized for thumbs: 44px minimum tap targets,
 * bottom navigation, bottom sheets, and a single 640px column that stays
 * centred on desktop so the app never looks stretched.
 *
 * WooCommerce's own stylesheets are dequeued, so shop, cart, checkout and
 * account styles live here too.
 *
 * @package PastryApp
 */

/* =====================================================================
 * 1. Layout shell
 * ================================================================== */

.pa-viewport {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--pa-canvas);
}

.pa-main {
	flex: 1 1 auto;
	width: 100%;
	max-width: var(--pa-max-w);
	margin-inline: auto;
	padding: 12px 16px calc(var(--pa-tabbar-h) + var(--pa-safe-bottom) + 24px);
}

body.pa-has-cartbar .pa-main {
	padding-bottom: calc(var(--pa-tabbar-h) + var(--pa-cartbar-h) + var(--pa-safe-bottom) + 24px);
}

.pa-main--bare {
	max-width: none;
	padding: 0;
}

body.pa-locked {
	overflow: hidden;
}

.pa-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--pa-z-skip);
	padding: 12px 16px;
	background: var(--pa-surface);
	border-radius: var(--pa-r);
	box-shadow: var(--pa-shadow-sm);
}

.pa-skip:focus {
	left: 12px;
	top: 12px;
}

.pa-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pa-icon {
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: middle;
}

/* =====================================================================
 * 2. Top bar
 * ================================================================== */

.pa-topbar {
	position: sticky;
	top: 0;
	z-index: var(--pa-z-header);
	background: color-mix(in srgb, var(--pa-surface) 88%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	padding-top: var(--pa-safe-top);
	transition: box-shadow 0.2s var(--pa-ease);
}

.pa-topbar.is-stuck {
	box-shadow: 0 1px 0 var(--pa-line), 0 8px 24px -20px rgba(0, 0, 0, 0.4);
}

.pa-topbar__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: var(--pa-max-w);
	min-height: var(--pa-topbar-h);
	margin-inline: auto;
	padding: 0 8px 0 12px;
}

.pa-topbar__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: var(--pa-brand);
	text-decoration: none;
	font-family: var(--pa-font-display, inherit);
}

.pa-topbar__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: var(--pa-brand);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.pa-topbar__title {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pa-topbar__actions {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}

.pa-iconbtn {
	display: grid;
	place-items: center;
	width: var(--pa-tap);
	height: var(--pa-tap);
	padding: 0;
	border: 0;
	border-radius: var(--pa-r-pill);
	background: transparent;
	color: var(--pa-ink);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.16s var(--pa-ease), transform 0.16s var(--pa-ease);
}

.pa-iconbtn:active {
	transform: scale(0.92);
}

.pa-iconbtn:hover,
.pa-iconbtn:focus-visible {
	background: var(--pa-brand-soft);
}

.pa-iconbtn--ghost {
	color: var(--pa-muted);
}

/* =====================================================================
 * 3. Hero + shop status
 * ================================================================== */

.pa-hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 16px;
	padding: 20px;
	border-radius: var(--pa-r-xl);
	background: linear-gradient(160deg, var(--pa-brand) 0%, var(--pa-brand-ink) 100%);
	color: #fff;
	box-shadow: var(--pa-shadow-sm);
}

.pa-hero--image {
	background-size: cover;
	background-position: center;
	min-height: 190px;
	display: flex;
	align-items: flex-end;
}

.pa-hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.72) 100%);
}

.pa-hero__body {
	position: relative;
	z-index: 1;
}

.pa-hero__title {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 800;
}

.pa-hero__tagline {
	margin: 6px 0 0;
	font-size: 0.9375rem;
	opacity: 0.92;
}

.pa-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}

.pa-chipstat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px;
	border-radius: var(--pa-r-pill);
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.pa-chipstat--closed {
	background: rgba(0, 0, 0, 0.45);
}

/* Live delivery card. */

.pa-live {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	padding: 14px 14px 14px 16px;
	border-radius: var(--pa-r-lg);
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	box-shadow: var(--pa-shadow-sm);
	color: var(--pa-ink);
	text-decoration: none;
}

.pa-live__pulse {
	position: relative;
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--pa-success);
}

.pa-live__pulse::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(18, 161, 80, 0.45);
	animation: pa-pulse 1.8s ease-out infinite;
}

@keyframes pa-pulse {
	0% { transform: scale(0.6); opacity: 1; }
	100% { transform: scale(1.25); opacity: 0; }
}

.pa-live__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pa-live__title {
	font-weight: 700;
	font-size: 0.9375rem;
}

.pa-live__meta {
	font-size: 0.8125rem;
	color: var(--pa-muted);
}

.pa-live .pa-icon {
	margin-left: auto;
	color: var(--pa-muted);
}

/* =====================================================================
 * 4. Category rail
 * ================================================================== */

.pa-rail {
	position: sticky;
	top: calc(var(--pa-topbar-h) + var(--pa-safe-top));
	z-index: var(--pa-z-rail);
	margin: 0 -16px 8px;
	padding: 8px 0;
	background: color-mix(in srgb, var(--pa-canvas) 92%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pa-rail::-webkit-scrollbar {
	display: none;
}

.pa-rail__track {
	display: flex;
	gap: 8px;
	padding: 0 16px;
	width: max-content;
}

.pa-chip {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border: 1.5px solid var(--pa-line);
	border-radius: var(--pa-r-pill);
	background: var(--pa-surface);
	color: var(--pa-ink-2);
	font-family: var(--pa-font-ui, inherit);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.16s var(--pa-ease), color 0.16s var(--pa-ease), border-color 0.16s var(--pa-ease);
}

.pa-chip.is-active {
	background: var(--pa-brand-soft);
	border-color: var(--pa-brand);
	color: var(--pa-brand-btn-ink);
	font-weight: 700;
}

/* =====================================================================
 * 5. Sections, product cards, tiles
 * ================================================================== */

.pa-section {
	margin: 0 0 26px;
	scroll-margin-top: calc(var(--pa-topbar-h) + 62px);
}

.pa-section__title {
	font-weight: 800;
}

.pa-section__desc {
	margin: 0 0 12px;
	color: var(--pa-muted);
	font-size: 0.875rem;
}

.pa-items {
	flex-direction: column;
	margin-top: 12px;
}

.pa-item:active {
	transform: scale(0.985);
}

@media (hover: hover) {
	.pa-item:hover {
		box-shadow: var(--pa-shadow-sm);
	}
}

.pa-item__link {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.pa-item__media {
	position: relative;
	height: 92px;
}

.pa-item__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 2px;
}

.pa-item__desc {
	line-height: 1.4;
}

.pa-item__price {
	margin-top: auto;
	font-size: 0.9375rem;
	color: var(--pa-ink);
}

.pa-item__price ins {
	text-decoration: none;
	color: var(--pa-brand-ink);
}

.pa-item__badge {
	z-index: 1;
}

.pa-item__add {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: grid;
	place-items: center;
	border: 0;
	background: var(--pa-brand-btn, var(--pa-brand));
	color: #fff;
	cursor: pointer;
	box-shadow: 0 3px 10px -4px var(--pa-brand-ink);
	transition: transform 0.16s var(--pa-ease), background 0.16s var(--pa-ease);
}

.pa-item__add:active {
	transform: scale(0.9);
}

.pa-item__add.is-busy {
	opacity: 0.7;
}

.pa-item__add.is-done {
	background: var(--pa-success);
}

/* Horizontal scroller of tiles. */

.pa-section--strip .pa-strip {
	display: flex;
	gap: 12px;
	margin: 12px -16px 0;
	padding: 2px 16px 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pa-strip::-webkit-scrollbar {
	display: none;
}

.pa-tile {
	flex: 0 0 auto;
	width: 150px;
	scroll-snap-align: start;
}

.pa-tile__media {
	display: block;
	overflow: hidden;
	border-radius: var(--pa-r-lg);
	background: var(--pa-skeleton);
	aspect-ratio: 4 / 3;
}

.pa-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pa-tile__name {
	display: block;
	margin-top: 7px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
}

.pa-tile__price {
	display: block;
	margin-top: 2px;
	font-size: 0.8125rem;
	color: var(--pa-muted);
}

/* =====================================================================
 * 6. Tab bar
 * ================================================================== */

/* The bottom tab bar is the primary mobile nav. It is the topmost piece of
 * fixed chrome (--pa-z-tabbar); the cart bar sits directly below it at --pa-z-cartbar. */
.pa-tabbar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: var(--pa-z-tabbar);
	display: flex;
	justify-content: space-around;
	gap: 2px;
	padding: 6px 8px calc(6px + var(--pa-safe-bottom));
	background: color-mix(in srgb, var(--pa-surface) 92%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-top: 1px solid var(--pa-line);
}

.pa-tab {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-height: var(--pa-tap);
	padding: 4px 2px;
	border-radius: var(--pa-r);
	color: var(--pa-muted);
	font-family: var(--pa-font-ui, inherit);
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	text-decoration: none;
	transition: color 0.2s ease;
}

.pa-tab.is-active {
	color: var(--pa-brand);
}

.pa-tab__icon {
	display: grid;
	place-items: center;
	height: 24px;
}

.pa-tab__label {
	line-height: 1;
}

.pa-tab__dot {
	position: absolute;
	top: 2px;
	right: calc(50% - 18px);
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-brand);
	color: #fff;
	font-size: 0.625rem;
	line-height: 17px;
	text-align: center;
}

/* =====================================================================
 * 7. Cart bar
 * ================================================================== */

/* Stacking order from the bottom of the screen upwards:
 * content -> cart bar -> tab bar -> safe area. */
.pa-cartbar {
	position: fixed;
	inset: auto 0 calc(var(--pa-tabbar-h) + var(--pa-safe-bottom)) 0;
	z-index: var(--pa-z-cartbar);
	display: flex;
	justify-content: center;
	padding: 0 12px 8px;
	pointer-events: none;
}

/* Hidden whenever the cart is empty, however the state is marked. */
.pa-cartbar[hidden],
.pa-cartbar.is-hidden {
	display: none !important;
}

/* The badge always shows a number, even before the first AJAX paint. */
.pa-cartbar__count[data-pa-cart-count]:empty::before {
	content: "0";
}

.pa-cartbar__btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: calc(var(--pa-max-w) - 24px);
	min-height: 52px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--pa-r-pill);
	background: var(--pa-brand-btn);
	color: var(--pa-brand-btn-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--pa-brand-btn) 55%, transparent);
	animation: pa-rise 0.24s var(--pa-ease-out);
	transition: background 0.2s ease;
}

.pa-cartbar__btn:hover {
	background: var(--pa-brand);
	color: var(--pa-on-brand);
}

@keyframes pa-rise {
	from { transform: translateY(14px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.pa-cartbar__left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pa-cartbar__count {
	display: grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-brand-ink);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
}

.pa-cartbar__label {
	letter-spacing: -0.01em;
}

.pa-cartbar__total {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

/* =====================================================================
 * 8. Bottom sheet
 * ================================================================== */

.pa-sheet {
	position: fixed;
	inset: 0;
	z-index: var(--pa-z-sheet);
}

.pa-sheet[hidden] {
	display: none;
}

.pa-sheet__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 17, 15, 0.45);
	opacity: 0;
	transition: opacity 0.22s var(--pa-ease);
}

.pa-sheet.is-open .pa-sheet__scrim {
	opacity: 1;
}

.pa-sheet__panel {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--pa-max-w);
	max-height: 92dvh;
	margin-inline: auto;
	border-radius: var(--pa-r-xl) var(--pa-r-xl) 0 0;
	background: var(--pa-surface);
	box-shadow: var(--pa-shadow-lg);
	transform: translateY(100%);
	transition: transform 0.26s var(--pa-ease-out);
	overflow: hidden;
}

.pa-sheet.is-open .pa-sheet__panel {
	transform: translateY(0);
}

.pa-sheet__grab {
	display: grid;
	place-items: center;
	padding: 10px 0 6px;
	cursor: grab;
	touch-action: none;
}

.pa-sheet__grab::before {
	content: "";
	width: 42px;
	height: 4px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-line);
}

.pa-sheet__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	background: color-mix(in srgb, var(--pa-surface) 80%, transparent);
}

.pa-sheet__content {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding-bottom: var(--pa-safe-bottom);
}

.pa-sheet__loading {
	padding: 16px;
}

.pa-psheet__name {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pa-psheet__price {
	margin: 6px 0 0;
	color: var(--pa-brand-ink);
}

.pa-psheet__desc {
	margin-top: 10px;
	color: var(--pa-muted);
	font-size: 0.9375rem;
}

.pa-psheet__desc p {
	margin: 0 0 8px;
}

.pa-psheet__link a {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pa-brand-ink);
	text-decoration: none;
}

.pa-psheet__foot,
.pa-csheet__foot {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px calc(12px + var(--pa-safe-bottom));
	background: var(--pa-surface);
	border-top: 1px solid var(--pa-line);
}

.pa-csheet__foot {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

/* Cart sheet. */

.pa-csheet__title {
	margin: 0;
	padding: 4px 16px 12px;
	font-size: 1.25rem;
	font-weight: 800;
}

.pa-lines {
	margin: 0;
	padding: 0 16px;
	list-style: none;
}

.pa-line {
	align-items: center;
}

.pa-line.is-busy {
	opacity: 0.5;
}

.pa-line__img,
.pa-line__img img {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--pa-r-sm);
	object-fit: cover;
	background: var(--pa-skeleton);
}

.pa-line__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.pa-line__name {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.pa-line__name a {
	color: inherit;
	text-decoration: none;
}

.pa-line__price {
	font-size: 0.875rem;
	color: var(--pa-muted);
}

.pa-line__controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pa-line__remove {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--pa-r-pill);
	color: var(--pa-muted);
}

.pa-totals {
	margin: 4px 0 0;
	padding: 12px 16px;
}

.pa-totals__row dt,
.pa-totals__row dd {
	margin: 0;
}

.pa-totals__row dd {
	font-weight: 700;
}

.pa-totals__row--muted {
	color: var(--pa-muted);
	font-size: 0.8125rem;
}

.pa-totals__row--muted dd {
	font-weight: 500;
}

/* Search sheet. */

.pa-search {
	padding: 4px 16px 16px;
}

.pa-search__field {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 4px 0 10px;
	background: var(--pa-surface);
}

.pa-search__input,
.pa-searchform__input {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-pill);
	background: var(--pa-canvas);
	font-family: inherit;
	font-size: 1rem;
	color: var(--pa-ink);
}

.pa-search__input:focus,
.pa-searchform__input:focus {
	outline: none;
	border-color: var(--pa-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-brand) 18%, transparent);
}

.pa-searchform {
	position: relative;
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0 0 16px;
}

.pa-searchform__icon {
	position: absolute;
	left: 12px;
	color: var(--pa-muted);
	pointer-events: none;
}

.pa-searchform__input {
	padding-left: 40px;
}

.pa-searchform__submit {
	height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--pa-r-pill);
	background: var(--pa-brand-btn);
	color: var(--pa-brand-btn-ink);
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease;
}

.pa-searchform__submit:hover {
	background: var(--pa-brand);
	color: var(--pa-on-brand);
}

/* =====================================================================
 * 9. Buttons, pills, steppers, notices
 * ================================================================== */

.pa-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button,
button.button,
input.button,
#place_order,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--pa-tap);
	padding: 12px 20px;
	border: 0;
	border-radius: var(--pa-r-pill);
	background: var(--pa-brand-btn, var(--pa-brand));
	color: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.14s var(--pa-ease), background 0.16s var(--pa-ease), opacity 0.16s var(--pa-ease);
}

.pa-btn:active,
.woocommerce .button:active,
#place_order:active {
	transform: scale(0.98);
}

.pa-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
#place_order:hover {
	background: var(--pa-brand-btn-ink, var(--pa-brand));
	color: #fff;
}

/* .pa-btn disabled and loading states are declared once, in the button
 * system further down this file. */
.woocommerce .button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.pa-btn.is-done {
	background: var(--pa-success);
}

.pa-btn--block,
#place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
}

.pa-btn--grow {
	flex: 1 1 auto;
}

.pa-btn--ghost,
.woocommerce a.button.wc-backward,
.woocommerce button.button[name="update_cart"] {
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	color: var(--pa-ink);
}

.pa-btn--ghost:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce button.button[name="update_cart"]:hover {
	background: var(--pa-brand-soft);
	color: var(--pa-ink);
}

.pa-btn__total {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

/* Status pills. */

.pa-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: var(--pa-r-pill);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	background: var(--pa-canvas);
	color: var(--pa-ink);
}

.pa-pill--neutral { background: #eef0f2; color: #3f4750; }
.pa-pill--brand   { background: var(--pa-brand-soft); color: var(--pa-brand-ink); }
.pa-pill--success { background: var(--pa-success-soft); color: var(--pa-success); }
.pa-pill--warn    { background: #fff3e0; color: #8a5300; }
.pa-pill--danger  { background: #fdecea; color: #a32217; }

/* Quantity stepper. */

.pa-qty,
.woocommerce .quantity {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-pill);
	background: var(--pa-surface);
}

.pa-qty__btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--pa-r-pill);
	background: var(--pa-brand-soft);
	color: var(--pa-brand-ink);
	cursor: pointer;
}

.pa-qty__btn:active {
	transform: scale(0.92);
}

.pa-qty__input,
.woocommerce .quantity .qty {
	width: 44px;
	height: 36px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	text-align: center;
	color: var(--pa-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}

.pa-qty__input::-webkit-outer-spin-button,
.pa-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pa-qty__value {
	min-width: 26px;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pa-qty--sm .pa-qty__btn {
	width: 30px;
	height: 30px;
}

.pa-qty.is-busy {
	opacity: 0.5;
}

/* Notices - ours and WooCommerce's. */

.pa-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice,
.wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: var(--pa-r);
	border: 1px solid var(--pa-line);
	background: var(--pa-surface);
	font-size: 0.875rem;
	line-height: 1.45;
	list-style: none;
}

.woocommerce-message {
	border-color: var(--pa-success-soft);
	background: var(--pa-success-soft);
	color: var(--pa-success);
}

.woocommerce-info {
	border-color: #cfe0f5;
	background: #eef4fd;
	color: #1c4e86;
}

.woocommerce-error {
	border-color: #f3c7c2;
	background: #fdecea;
	color: #a32217;
}

.woocommerce-error li,
.woocommerce-message li {
	list-style: none;
}

.pa-notice--warn {
	border-color: #f0dcb4;
}

.pa-notice__meta {
	color: var(--pa-muted);
	font-size: 0.8125rem;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
	min-height: 34px;
	padding: 6px 14px;
	font-size: 0.8125rem;
}

/* Toast. */

.pa-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--pa-tabbar-h) + var(--pa-cartbar-h) + var(--pa-safe-bottom) + 12px);
	z-index: var(--pa-z-toast);
	max-width: min(92vw, 420px);
	padding: 12px 16px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-ink);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	box-shadow: var(--pa-shadow-lg);
	transform: translate(-50%, 16px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s var(--pa-ease), transform 0.2s var(--pa-ease-out);
}

.pa-toast.is-open {
	transform: translate(-50%, 0);
	opacity: 1;
}

.pa-toast--success { background: var(--pa-brand-btn, var(--pa-brand)); }
.pa-toast--warn { background: #8a5300; }
.pa-toast--error { background: #a32217; }

/* Skeletons. */

.pa-skeletons,
.pa-skel-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pa-skel {
	border-radius: var(--pa-r);
	background: linear-gradient(90deg, var(--pa-skeleton) 25%, #f4f0eb 37%, var(--pa-skeleton) 63%);
	background-size: 400% 100%;
	animation: pa-shimmer 1.4s ease infinite;
}

.pa-skel--media { height: 160px; }
.pa-skel--text,
.pa-skel--line { height: 14px; margin-top: 10px; }
.pa-skel--short { width: 55%; }

@keyframes pa-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

/* =====================================================================
 * 10. Cards, lists, empty states, generic pages
 * ================================================================== */

.pa-card {
	padding: 16px;
	margin-bottom: 14px;
}

.pa-card--accent {
	border-color: color-mix(in srgb, var(--pa-brand) 35%, var(--pa-line));
	background: var(--pa-brand-soft);
}

.pa-track-cta__title {
	margin: 0 0 4px;
	font-size: 1.125rem;
	font-weight: 800;
}

.pa-track-cta__text {
	margin: 0 0 12px;
	font-size: 0.875rem;
	color: var(--pa-muted);
}

.pa-order-track {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}

.pa-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pa-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: var(--pa-r-lg);
	border: 1px solid var(--pa-line);
	background: var(--pa-surface);
	color: inherit;
	text-decoration: none;
}

.pa-row__media img {
	width: 64px;
	height: 64px;
	border-radius: var(--pa-r-sm);
	object-fit: cover;
}

.pa-row__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.pa-row__title {
	font-size: 0.9375rem;
	font-weight: 700;
}

.pa-row__meta {
	font-size: 0.8125rem;
	color: var(--pa-muted);
}

.pa-row .pa-icon {
	color: var(--pa-muted);
}

.pa-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 36px 20px;
	border-radius: var(--pa-r-lg);
	background: var(--pa-surface);
	border: 1px dashed var(--pa-line);
}

.pa-empty__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--pa-ink);
}

.pa-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.pa-empty--sheet {
	margin: 16px;
	border: 0;
	background: transparent;
}

.pa-archive-head {
	margin: 4px 0 14px;
}

.pa-archive-head__title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pa-page {
	padding: 4px 0 8px;
}

.pa-page__media img {
	width: 100%;
	height: auto;
	border-radius: var(--pa-r-lg);
}

.pa-page__title {
	margin: 10px 0 4px;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pa-page__meta {
	margin: 0 0 12px;
	color: var(--pa-muted);
	font-size: 0.8125rem;
}

.pa-page__content > * + * {
	margin-top: 14px;
}

.pa-page--bare .pa-page__content,
.pa-page--blank .pa-page__content {
	margin: 0;
}

.pa-list--nav {
	margin-top: 18px;
}

/* Tracking screens get the full viewport. */

body.pa-tracking .pa-main {
	padding-inline: 0;
}

body.pa-tracking .pa-page__content {
	padding-inline: 0;
}

/* =====================================================================
 * 11. Single product
 * ================================================================== */

.pa-single {
	margin: -12px -16px 0;
}

.pa-single__media {
	aspect-ratio: 16 / 10;
	background: var(--pa-skeleton);
}

.pa-single__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pa-single__body {
	padding: 18px 16px 8px;
	margin-top: -18px;
	border-radius: var(--pa-r-xl) var(--pa-r-xl) 0 0;
	background: var(--pa-canvas);
	position: relative;
}

.pa-single__name {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pa-single__price {
	margin: 6px 0 12px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--pa-brand-ink);
}

.pa-single__desc {
	color: var(--pa-muted);
	font-size: 0.9375rem;
}

.pa-single__desc p {
	margin: 0 0 10px;
}

.pa-single__cats {
	font-size: 0.8125rem;
	color: var(--pa-muted);
}

.pa-single__cats a {
	color: var(--pa-brand-ink);
}

.pa-single__buy {
	position: sticky;
	bottom: calc(var(--pa-tabbar-h) + var(--pa-safe-bottom));
	z-index: var(--pa-z-sticky-cta);
	padding: 12px 16px;
	background: color-mix(in srgb, var(--pa-surface) 94%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--pa-line);
}

.pa-single__buy form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.pa-single__buy form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
}

.pa-single__buy .variations {
	width: 100%;
	border-collapse: collapse;
}

.pa-single__buy .variations th,
.pa-single__buy .variations td {
	display: block;
	width: 100%;
	padding: 2px 0;
	text-align: left;
}

.pa-single__buy .variations label {
	font-size: 0.8125rem;
	font-weight: 600;
}

.pa-single__buy .reset_variations {
	font-size: 0.8125rem;
	color: var(--pa-muted);
}

.woocommerce-variation-price {
	margin: 6px 0;
	font-weight: 700;
}

/* =====================================================================
 * 12. WooCommerce forms, cart, checkout, account
 * ================================================================== */

.woocommerce form .form-row,
.woocommerce-page form .form-row,
.woocommerce-form-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 12px;
}

.woocommerce form .form-row label,
.woocommerce-form-row label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--pa-ink);
}

.woocommerce form .form-row .required {
	color: #a32217;
	text-decoration: none;
}

.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
	width: 100%;
	min-height: var(--pa-tap);
	padding: 11px 14px;
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r);
	background: var(--pa-surface);
	font-family: inherit;
	font-size: 1rem;
	color: var(--pa-ink);
}

textarea {
	min-height: 96px;
	resize: vertical;
}

.woocommerce .input-text:focus,
input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--pa-brand);
	outline-offset: 1px;
}

.woocommerce .quantity .qty {
	width: 44px;
	min-height: 36px;
	padding: 0;
	border: 0;
}

.select2-container .select2-selection--single {
	height: var(--pa-tap) !important;
	border: 1px solid var(--pa-line) !important;
	border-radius: var(--pa-r) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: var(--pa-tap) !important;
	padding-left: 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: var(--pa-tap) !important;
}

/* Cart page. */

.pa-cart .pa-lines--page {
	padding: 0;
	margin-bottom: 14px;
	list-style: none;
}

.pa-cart__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 18px;
}

.pa-coupon {
	display: flex;
	gap: 8px;
	flex: 1 1 220px;
}

.pa-coupon .input-text {
	flex: 1 1 auto;
}

.pa-cart__totals,
.woocommerce .cart_totals {
	padding: 14px 16px;
	border-radius: var(--pa-r-lg);
	border: 1px solid var(--pa-line);
	background: var(--pa-surface);
}

.woocommerce .cart_totals h2 {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	font-weight: 800;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table_responsive,
.woocommerce-checkout-review-order-table,
.woocommerce-table--order-details,
.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-orders-table th,
.woocommerce-orders-table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--pa-line);
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table td:last-child,
.woocommerce table.shop_table th:last-child {
	text-align: right;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	font-weight: 700;
}

.woocommerce table.shop_table .order-total td,
.woocommerce table.shop_table .order-total th {
	font-size: 1.0625rem;
	border-bottom: 0;
}

/* Stack order tables on small screens. */

@media (max-width: 480px) {
	.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-orders-table tr {
		display: block;
		margin-bottom: 10px;
		padding: 12px 14px;
		border: 1px solid var(--pa-line);
		border-radius: var(--pa-r-lg);
		background: var(--pa-surface);
	}

	.woocommerce-orders-table td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		border: 0;
		padding: 4px 0;
		text-align: right;
	}

	.woocommerce-orders-table td::before {
		content: attr(data-title);
		color: var(--pa-muted);
		font-size: 0.8125rem;
		font-weight: 600;
		text-align: left;
	}

	.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 6px;
		margin-top: 6px;
	}

	.woocommerce-orders-table .button {
		min-height: 36px;
		padding: 7px 14px;
		font-size: 0.8125rem;
	}
}

/* Checkout. */

.pa-checkout__block {
	margin-bottom: 18px;
	padding: 16px;
	border-radius: var(--pa-r-lg);
	border: 1px solid var(--pa-line);
	background: var(--pa-surface);
}

.pa-checkout__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 1.0625rem;
	font-weight: 800;
}

.pa-checkout__title .pa-icon {
	color: var(--pa-brand);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	margin: 4px 0 10px;
	font-size: 0.9375rem;
	font-weight: 700;
}

#payment .wc_payment_methods {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

#payment .wc_payment_method {
	padding: 12px 0;
	border-bottom: 1px solid var(--pa-line);
}

#payment .wc_payment_method label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

#payment .payment_box {
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: var(--pa-r);
	background: var(--pa-canvas);
	font-size: 0.875rem;
	color: var(--pa-muted);
}

#payment .place-order {
	position: sticky;
	bottom: calc(var(--pa-tabbar-h) + var(--pa-safe-bottom) + 8px);
	padding-top: 12px;
	background: linear-gradient(180deg, transparent, var(--pa-surface) 40%);
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 10px;
	font-size: 0.8125rem;
	color: var(--pa-muted);
}

/* Order received / order details. */

.woocommerce-order-overview,
.woocommerce-order ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 16px;
	padding: 14px 16px;
	list-style: none;
	border-radius: var(--pa-r-lg);
	border: 1px solid var(--pa-line);
	background: var(--pa-surface);
}

.woocommerce-order ul.order_details li {
	display: flex;
	flex-direction: column;
	font-size: 0.75rem;
	color: var(--pa-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.woocommerce-order ul.order_details li strong {
	margin-top: 2px;
	font-size: 0.9375rem;
	color: var(--pa-ink);
	text-transform: none;
	letter-spacing: 0;
}

/* My account. */

/* The account navigation container is declared once, in the account section
 * further down this file. Only the pill styling for the links lives here. */

.woocommerce-MyAccount-navigation li a {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 15px;
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-pill);
	background: var(--pa-surface);
	color: var(--pa-ink);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--pa-ink);
	border-color: var(--pa-ink);
	color: #fff;
}

.woocommerce-MyAccount-content > h2:first-child,
.woocommerce-MyAccount-content > h3:first-child {
	margin-top: 0;
}

/* Pagination. */

.woocommerce-pagination ul,
.pa-main .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	justify-content: center;
}

.woocommerce-pagination a,
.woocommerce-pagination span,
.pa-main .nav-links a,
.pa-main .nav-links span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-pill);
	background: var(--pa-surface);
	color: var(--pa-ink);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-pagination .current,
.pa-main .nav-links .current {
	background: var(--pa-ink);
	border-color: var(--pa-ink);
	color: #fff;
}

/* Hide leftovers we deliberately do not use. */

.woocommerce-breadcrumb,
.woocommerce-products-header,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.pa-app .screen-reader-text {
	display: none;
}

/* =====================================================================
 * 13. Closed shop, chromeless pages, desktop polish
 * ================================================================== */

body.pa-shop-closed .pa-item__add {
	background: var(--pa-muted);
	box-shadow: none;
}

body.pa-chromeless .pa-viewport {
	background: var(--pa-surface);
}

@media (min-width: 768px) {
	/*
	 * Desktop used a hardcoded beige (#efeae4) while mobile inherited the
	 * brand canvas (--pa-canvas, #fff8f7), so the same homepage rendered in
	 * two different background colours. Use the token at every width.
	 */
	.pa-viewport {
		background: var(--pa-canvas);
	}

	.pa-main {
		padding-bottom: calc(var(--pa-tabbar-h) + var(--pa-safe-bottom) + 40px);
	}

	.pa-tabbar {
		left: 50%;
		transform: translateX(-50%);
		width: min(100%, var(--pa-max-w));
		border-radius: var(--pa-r-xl) var(--pa-r-xl) 0 0;
		border-inline: 1px solid var(--pa-line);
	}

	.pa-items {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.pa-item__media {
		width: 104px;
		height: 104px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.pa-topbar,
	.pa-tabbar,
	.pa-cartbar,
	.pa-rail,
	.pa-sheet,
	.pa-toast {
		display: none !important;
	}
}


/* =====================================================================
 * SHOP LAYER (merged from the former app-extra.css).
 * This file is now the single authoritative stylesheet for the theme.
 * Layer order: layout > buttons > hero > categories > promos > product
 * cards > menu/filters > product page > cart/checkout > tracking >
 * account/orders > empty states > desktop header/footer > breakpoints.
 * Canonical breakpoints: 480px, 768px, 1024px, 1280px. Nothing else.
 * ================================================================== */
/**
 * Pastry App - shop layer styles.
 *
 * Loaded after app.css and built only from the tokens declared in style.css, so
 * re-branding stays a Customizer job. Mobile first; desktop refinements live in
 * the media queries at the bottom.
 */

/* ------------------------------------------------------------------ *
 * Layout scaffolding
 * ------------------------------------------------------------------ */

/* The single <main id="pa-main"> lives in header.php and owns the measure and
 * the bottom padding. Templates wrap their content in .pa-view, which is a
 * transparent wrapper - it must never re-declare width, padding or max-width. */
.pa-view {
	width: 100%;
}

.pa-section {
	padding: var(--pa-6) var(--pa-4);
	max-width: var(--pa-max-w);
	margin-inline: auto;
}

.pa-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pa-3);
	margin-bottom: var(--pa-4);
}

.pa-section__title {
	font-family: var(--pa-font-display, inherit);
	font-size: 1.375rem;
	line-height: 1.15;
	margin: 0;
	letter-spacing: -0.02em;
	color: var(--pa-ink);
}

.pa-section__sub {
	margin: var(--pa-1) 0 0;
	color: var(--pa-muted);
	font-size: 0.9rem;
}

.pa-section__link {
	flex: none;
	font-family: var(--pa-font-ui, inherit);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--pa-brand);
	text-decoration: none;
}

.pa-section__link:hover,
.pa-section__link:focus-visible {
	text-decoration: underline;
}

.pa-prose > * + * {
	margin-top: var(--pa-3);
}

.pa-muted {
	color: var(--pa-muted);
}

.pa-card {
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-lg);
	box-shadow: var(--pa-shadow-sm);
}

.pa-card--pad {
	padding: var(--pa-5);
}

.pa-card__title {
	margin: 0 0 var(--pa-3);
	font-size: 1.05rem;
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */

.pa-btn {
	--pa-btn-bg: var(--pa-brand-btn, var(--pa-brand));
	--pa-btn-fg: var(--pa-on-brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pa-2);
	min-height: var(--pa-tap);
	padding: 0 var(--pa-5);
	border: 0;
	border-radius: var(--pa-r-pill);
	background: var(--pa-btn-bg);
	color: var(--pa-btn-fg);
	font: inherit;
	font-weight: 650;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.12s ease, filter 0.16s ease, background-color 0.16s ease;
}

.pa-btn:hover {
	filter: brightness(0.96);
}

.pa-btn:active {
	transform: scale(0.98);
}

.pa-btn:disabled,
.pa-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Loading state: the label stays readable, a spinner is added and further
 * clicks are ignored so no AJAX call can be fired twice. */
.pa-btn.is-busy {
	opacity: 0.85;
	cursor: progress;
	pointer-events: none;
}

.pa-btn.is-busy::after {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	margin-inline-start: 8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: pa-spin 0.7s linear infinite;
}

/* A sticky CTA waiting on a required option choice stays visible but reads as
 * secondary, so it can never look like a one-tap purchase. */
.pa-btn.is-waiting {
	background: var(--pa-brand-soft);
	color: var(--pa-brand-ink);
	border: 1px solid var(--pa-brand);
}

@keyframes pa-spin {
	to {
		transform: rotate(360deg);
	}
}

.pa-btn--lg {
	min-height: 52px;
	font-size: 1.02rem;
}

.pa-btn--sm {
	min-height: 36px;
	padding: 0 var(--pa-3);
	font-size: 0.85rem;
}

.pa-btn--block {
	width: 100%;
}

.pa-btn--ghost {
	--pa-btn-bg: transparent;
	--pa-btn-fg: var(--pa-ink);
	box-shadow: inset 0 0 0 1.5px var(--pa-line);
}

.pa-btn--soft {
	--pa-btn-bg: var(--pa-brand-soft);
	--pa-btn-fg: var(--pa-brand-ink);
}

.pa-link {
	display: inline-flex;
	align-items: center;
	gap: var(--pa-1);
	color: var(--pa-brand-ink);
	font-weight: 600;
	text-decoration: none;
}

.pa-link:hover,
.pa-link:focus-visible {
	text-decoration: underline;
}

.pa-link--muted {
	color: var(--pa-muted);
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * Home hero
 * ------------------------------------------------------------------ */

.pa-hero--home {
	position: relative;
	margin: 0;
	padding: var(--pa-8) var(--pa-4) var(--pa-6);
	color: var(--pa-ink);
	background: linear-gradient(to top, var(--pa-canvas) 0%, rgba(255, 248, 247, 0.65) 45%, transparent 100%), var(--pa-brand-ink);
	background-size: cover;
	background-position: center;
	border-radius: 0 0 var(--pa-r-xl) var(--pa-r-xl);
	overflow: hidden;
	min-height: min(60vh, 500px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.pa-hero--home .pa-hero__title {
	font-family: var(--pa-font-display, inherit);
	font-size: clamp(1.6rem, 6vw, 2.4rem);
	line-height: 1.1;
	margin: 0 0 var(--pa-2);
	text-wrap: balance;
	color: var(--pa-brand);
}

.pa-hero--home .pa-hero__tagline {
	margin: 0;
	font-size: 1rem;
	color: var(--pa-ink-2);
	max-width: 32ch;
}

.pa-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2);
	margin-top: var(--pa-5);
}

.pa-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2) var(--pa-4);
	margin: var(--pa-4) 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.86rem;
}

.pa-hero__facts li {
	display: inline-flex;
	align-items: center;
	gap: var(--pa-1);
	opacity: 0.95;
}

/* ------------------------------------------------------------------ *
 * Categories
 * ------------------------------------------------------------------ */

.pa-cats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 108px;
	gap: var(--pa-3);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: var(--pa-2);
	scrollbar-width: none;
}

.pa-cats::-webkit-scrollbar {
	display: none;
}

.pa-cat {
	scroll-snap-align: start;
	display: block;
	text-decoration: none;
	color: inherit;
}

.pa-cat__media {
	display: block;
	aspect-ratio: 1;
	border-radius: var(--pa-r-lg);
	overflow: hidden;
	background: var(--pa-skeleton);
}

.pa-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.28s ease;
}

.pa-cat:hover .pa-cat__media img {
	transform: scale(1.05);
}

.pa-cat__name {
	display: block;
	margin-top: var(--pa-2);
	font-size: 0.86rem;
	font-weight: 600;
}

.pa-cat__count {
	display: block;
	color: var(--pa-muted);
	font-size: 0.76rem;
}

/* ------------------------------------------------------------------ *
 * Promos
 * ------------------------------------------------------------------ */

.pa-promos {
	display: grid;
	gap: var(--pa-3);
}

.pa-promo {
	position: relative;
	display: block;
	padding: var(--pa-5);
	border-radius: var(--pa-r-lg);
	background: var(--pa-brand-soft);
	color: var(--pa-ink);
	text-decoration: none;
	overflow: hidden;
	min-height: 132px;
}

.pa-promo--image {
	color: #fff;
	background-size: cover;
	background-position: center;
}

.pa-promo--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 17, 15, 0.78), rgba(20, 17, 15, 0.15));
}

.pa-promo--image > * {
	position: relative;
	z-index: 1;
}

.pa-promo__badge {
	display: inline-block;
	margin-bottom: var(--pa-2);
	padding: 4px 10px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-brand);
	color: var(--pa-on-brand);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pa-promo__title {
	margin: 0 0 var(--pa-1);
	font-size: 1.1rem;
}

.pa-promo__text {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.9;
	max-width: 34ch;
}

.pa-promo__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--pa-1);
	margin-top: var(--pa-3);
	font-weight: 650;
}

/* ------------------------------------------------------------------ *
 * Product tiles
 * ------------------------------------------------------------------ */

.pa-items {
	display: grid;
	gap: var(--pa-3);
}

.pa-items--scroller {
	grid-auto-flow: column;
	grid-auto-columns: minmax(72%, 74%);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--pa-2);
	scrollbar-width: none;
}

.pa-items--scroller::-webkit-scrollbar {
	display: none;
}

.pa-items--grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pa-item {
	position: relative;
	display: flex;
	gap: var(--pa-3);
	padding: var(--pa-3);
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-lg);
	scroll-snap-align: start;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.pa-item:hover {
	box-shadow: var(--pa-shadow);
}

.pa-item--tile {
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.pa-item.is-soldout {
	opacity: 0.62;
}

.pa-item.is-soldout .pa-item__media img {
	filter: grayscale(1);
}

.pa-item__badge--low {
	background: #fff3d6;
	color: #8a4b06;
}

.pa-item__media {
	flex: none;
	width: 112px;
	aspect-ratio: 1;
	border-radius: var(--pa-r);
	overflow: hidden;
	background: var(--pa-skeleton);
	border: 1px solid var(--pa-line);
}

.pa-item--tile .pa-item__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 0;
}

.pa-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pa-item__body {
	flex: 1 1 auto;
	min-width: 0;
}

.pa-item--tile .pa-item__body {
	padding: var(--pa-3);
}

.pa-item__name {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 650;
	line-height: 1.25;
}

.pa-item__name a {
	color: inherit;
	text-decoration: none;
}

.pa-item__desc {
	margin: var(--pa-1) 0 0;
	color: var(--pa-muted);
	font-size: 0.84rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pa-item__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pa-2);
	margin-top: var(--pa-3);
}

.pa-item__price {
	font-weight: 700;
}

.pa-item__price del {
	margin-right: var(--pa-1);
	color: var(--pa-muted);
	font-weight: 500;
	text-decoration-thickness: 1px;
}

.pa-item__add {
	position: absolute;
	right: var(--pa-2);
	bottom: var(--pa-2);
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: var(--pa-r-pill);
	flex: none;
	background: var(--pa-brand-btn);
	color: var(--pa-brand-btn-ink);
	box-shadow: var(--pa-shadow-sm, 0 2px 8px -2px rgba(0,0,0,0.18));
	transition: background 0.18s ease, transform 0.14s ease;
}

.pa-item__add:hover {
	background: var(--pa-brand);
	color: var(--pa-on-brand);
	transform: scale(1.08);
}

.pa-item__add--options {
	position: static;
	width: auto;
	padding: 0 var(--pa-3);
	font-size: 0.82rem;
	box-shadow: none;
}

.pa-item__badge {
	position: absolute;
	top: var(--pa-2);
	left: var(--pa-2);
	padding: 3px 8px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-ink);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.pa-item__badge--popular {
	background: var(--pa-brand);
}

.pa-item__badge--sale {
	background: var(--pa-danger);
}

.pa-fav {
	position: absolute;
	top: var(--pa-2);
	right: var(--pa-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--pa-r-pill);
	background: rgba(255, 255, 255, 0.92);
	color: var(--pa-ink-2);
	box-shadow: var(--pa-shadow-sm);
	cursor: pointer;
}

.pa-fav.is-saved {
	color: var(--pa-danger);
}

.pa-fav--lg {
	position: static;
	width: 44px;
	height: 44px;
}

/* Badges + rating */

.pa-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: var(--pa-2) 0 0;
	padding: 0;
	list-style: none;
}

.pa-tag {
	padding: 2px 8px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-canvas);
	color: var(--pa-ink-2);
	font-size: 0.72rem;
	font-weight: 600;
}

.pa-tag--vegan,
.pa-tag--vegetarian {
	background: var(--pa-success-soft);
	color: var(--pa-success);
}

.pa-tag--nuts,
.pa-tag--spicy {
	background: var(--pa-warn-soft);
	color: var(--pa-warn);
}

.pa-rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8rem;
	color: var(--pa-ink-2);
}

.pa-rating__value {
	font-weight: 700;
}

.pa-rating__count {
	color: var(--pa-muted);
}

/* ------------------------------------------------------------------ *
 * Menu browser + filters
 * ------------------------------------------------------------------ */

.pa-filters {
	display: grid;
	gap: var(--pa-3);
	margin-bottom: var(--pa-4);
}

.pa-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2);
	align-items: end;
}

.pa-filters__panel {
	display: grid;
	gap: var(--pa-3);
	padding: var(--pa-4);
	background: var(--pa-canvas);
	border-radius: var(--pa-r);
}

.pa-field {
	display: grid;
	gap: 6px;
	flex: 1 1 160px;
	min-width: 0;
}

.pa-field__label {
	font-size: 0.78rem;
	font-weight: 650;
	color: var(--pa-ink-2);
}

.pa-field input[type="text"],
.pa-field input[type="search"],
.pa-field input[type="email"],
.pa-field input[type="tel"],
.pa-field input[type="password"],
.pa-field select,
.pa-field textarea {
	width: 100%;
	min-height: var(--pa-tap);
	padding: 0 var(--pa-3);
	border: 1.5px solid var(--pa-line);
	border-radius: var(--pa-r);
	background: var(--pa-surface);
	color: var(--pa-ink);
	font: inherit;
}

.pa-field textarea {
	padding: var(--pa-2) var(--pa-3);
	min-height: 76px;
	resize: vertical;
}

.pa-field input:focus-visible,
.pa-field select:focus-visible,
.pa-field textarea:focus-visible {
	outline: 2px solid var(--pa-brand);
	outline-offset: 1px;
	border-color: var(--pa-brand);
}

.pa-check {
	display: inline-flex;
	align-items: center;
	gap: var(--pa-2);
	min-height: var(--pa-tap);
	font-size: 0.9rem;
}

.pa-menu__results {
	min-height: 120px;
	transition: opacity 0.16s ease;
}

.pa-menu__results.is-loading {
	opacity: 0.5;
}

.pa-menu__foot {
	margin-top: var(--pa-4);
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * Facts, progress, delivery bits
 * ------------------------------------------------------------------ */

.pa-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: var(--pa-3);
	margin: 0;
	padding: var(--pa-4);
	list-style: none;
	background: var(--pa-canvas);
	border-radius: var(--pa-r-lg);
}

.pa-facts--compact {
	padding: var(--pa-3);
	gap: var(--pa-2);
	font-size: 0.86rem;
}

.pa-fact {
	display: grid;
	gap: 2px;
}

.pa-fact__value {
	font-weight: 700;
}

.pa-fact__label {
	color: var(--pa-muted);
	font-size: 0.78rem;
}

.pa-facts__note {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--pa-muted);
	font-size: 0.82rem;
}

.pa-progress {
	margin: var(--pa-3) 0;
}

.pa-progress__label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85rem;
	font-weight: 600;
}

.pa-progress__track {
	height: 8px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-skeleton);
	overflow: hidden;
}

.pa-progress__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--pa-brand);
	transition: width 0.4s ease;
}

.pa-progress.is-complete .pa-progress__fill {
	background: var(--pa-success);
}

.pa-notice {
	display: flex;
	gap: var(--pa-2);
	padding: var(--pa-3) var(--pa-4);
	border-radius: var(--pa-r);
	background: var(--pa-brand-soft);
	color: var(--pa-ink-2);
	font-size: 0.9rem;
}

.pa-notice--warn {
	background: var(--pa-warn-soft);
	color: var(--pa-warn);
}

.pa-notice--danger {
	background: var(--pa-danger-soft);
	color: var(--pa-danger);
}

/* Steps (checkout, how it works) */

.pa-steps {
	display: grid;
	gap: var(--pa-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-step__title,
.pa-steps__item {
	display: flex;
	align-items: center;
	gap: var(--pa-3);
}

.pa-step__title {
	margin: 0 0 var(--pa-4);
	font-size: 1.05rem;
}

.pa-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: var(--pa-r-pill);
	background: var(--pa-brand);
	color: var(--pa-on-brand);
	font-size: 0.85rem;
	font-weight: 700;
}

.pa-choices {
	display: grid;
	gap: var(--pa-2);
	border: 0;
	margin: 0;
	padding: 0;
}

.pa-choice {
	display: flex;
	align-items: center;
	gap: var(--pa-3);
	padding: var(--pa-3) var(--pa-4);
	border: 1.5px solid var(--pa-line);
	border-radius: var(--pa-r);
	cursor: pointer;
}

.pa-choice:has(input:checked) {
	border-color: var(--pa-brand);
	background: var(--pa-brand-soft);
}

.pa-choice__label {
	font-weight: 650;
}

.pa-choice__meta {
	display: block;
	color: var(--pa-muted);
	font-size: 0.82rem;
}

/* ------------------------------------------------------------------ *
 * Product page
 * ------------------------------------------------------------------ */

.pa-product {
	max-width: var(--pa-max-w);
	margin-inline: auto;
	padding: 0 var(--pa-4) var(--pa-8);
}

.pa-product__grid {
	display: grid;
	gap: var(--pa-5);
}

.pa-product__head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--pa-3);
}

.pa-product__title {
	font-family: var(--pa-font-display, inherit);
	font-size: clamp(1.4rem, 5vw, 2rem);
	line-height: 1.15;
	margin: 0;
}

.pa-product__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pa-3);
	margin: var(--pa-3) 0;
}

.pa-product__price {
	font-size: 1.25rem;
	font-weight: 700;
}

.pa-product__form {
	display: grid;
	gap: var(--pa-3);
	margin: var(--pa-5) 0;
}

.pa-product__info {
	display: grid;
	gap: var(--pa-2);
	margin-top: var(--pa-6);
}

.pa-acc {
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r);
	background: var(--pa-surface);
	overflow: hidden;
}

.pa-acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pa-2);
	min-height: var(--pa-tap);
	padding: var(--pa-3) var(--pa-4);
	font-weight: 650;
	cursor: pointer;
	list-style: none;
}

.pa-acc > summary::-webkit-details-marker {
	display: none;
}

.pa-acc[open] > summary .pa-icon {
	transform: rotate(90deg);
}

.pa-acc__body {
	padding: 0 var(--pa-4) var(--pa-4);
	color: var(--pa-ink-2);
	font-size: 0.92rem;
}

.pa-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--pa-3);
	color: var(--pa-muted);
	font-size: 0.8rem;
}

.pa-crumbs a {
	color: inherit;
}

.pa-stickybuy {
	position: fixed;
	inset-inline: 0;
	bottom: calc(var(--pa-tabbar-h) + env(safe-area-inset-bottom, 0px));
	z-index: var(--pa-z-rail);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pa-3);
	padding: var(--pa-3) var(--pa-4);
	background: var(--pa-surface);
	border-top: 1px solid var(--pa-line);
	box-shadow: var(--pa-shadow-lg);
}

.pa-stickybuy[hidden] {
	display: none;
}

.pa-stickybuy__price {
	font-weight: 700;
}

/* Quick-add sheet */

.pa-psheet__media {
	margin: 0;
	aspect-ratio: 16 / 10;
	background: var(--pa-skeleton);
}

.pa-psheet__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pa-psheet__body {
	display: grid;
	gap: var(--pa-3);
	padding: var(--pa-4);
}

.pa-psheet__title {
	margin: 0;
	font-size: 1.2rem;
}

.pa-psheet__meta {
	display: flex;
	align-items: center;
	gap: var(--pa-3);
}

.pa-psheet__price {
	font-size: 1.1rem;
	font-weight: 700;
}

.pa-psheet__buy {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: var(--pa-3);
	padding: var(--pa-3) 0;
	background: var(--pa-surface);
}

.pa-psheet__buy .pa-btn {
	flex: 1 1 auto;
}

.pa-psheet__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pa-2);
	margin: 0;
	color: var(--pa-muted);
	font-size: 0.82rem;
}

.pa-option {
	border: 0;
	margin: 0;
	padding: 0;
}

.pa-option__legend {
	padding: 0;
	margin-bottom: var(--pa-2);
	font-size: 0.88rem;
	font-weight: 700;
}

.pa-option__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2);
}

.pa-option__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--pa-4);
	border: 1.5px solid var(--pa-line);
	border-radius: var(--pa-r-pill);
	font-size: 0.88rem;
	cursor: pointer;
}

.pa-option__item input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pa-option__item:has(input:checked) {
	border-color: var(--pa-brand);
	background: var(--pa-brand-soft);
	color: var(--pa-brand-ink);
	font-weight: 650;
}

.pa-option__item:has(input:focus-visible) {
	outline: 2px solid var(--pa-brand);
	outline-offset: 2px;
}

.pa-options__status {
	margin: 0;
	color: var(--pa-muted);
	font-size: 0.82rem;
}

/* ------------------------------------------------------------------ *
 * Checkout + cart
 * ------------------------------------------------------------------ */

.pa-checkout {
	max-width: var(--pa-max-w);
	margin-inline: auto;
}

.pa-checkout__grid {
	display: grid;
	gap: var(--pa-4);
}

.pa-summary {
	padding: var(--pa-4);
	background: var(--pa-canvas);
	border-radius: var(--pa-r-lg);
}

.pa-summary__title {
	margin: 0 0 var(--pa-3);
	font-size: 1rem;
}

.pa-summary__hint {
	display: flex;
	gap: var(--pa-2);
	color: var(--pa-muted);
	font-size: 0.82rem;
}

.pa-lines,
.pa-totals,
.pa-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-line {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--pa-2);
	padding: var(--pa-2) 0;
	border-bottom: 1px solid var(--pa-line);
	font-size: 0.9rem;
}

.pa-line__qty {
	color: var(--pa-muted);
	font-variant-numeric: tabular-nums;
}

.pa-line__meta {
	display: block;
	color: var(--pa-muted);
	font-size: 0.78rem;
}

.pa-line__price {
	font-weight: 650;
	white-space: nowrap;
}

.pa-totals__row {
	display: flex;
	justify-content: space-between;
	gap: var(--pa-3);
	padding: var(--pa-2) 0;
	font-size: 0.92rem;
}

.pa-totals__row:last-child {
	margin-top: var(--pa-2);
	padding-top: var(--pa-3);
	border-top: 1px solid var(--pa-line);
	font-size: 1.05rem;
	font-weight: 700;
}

.pa-list__item {
	padding: var(--pa-2) 0;
	border-bottom: 1px solid var(--pa-line);
}

.pa-list__item a {
	display: grid;
	gap: 2px;
	color: inherit;
	text-decoration: none;
}

.pa-list__title {
	font-weight: 650;
}

.pa-list__meta {
	color: var(--pa-muted);
	font-size: 0.82rem;
}

/* ------------------------------------------------------------------ *
 * Confirmation + tracking
 * ------------------------------------------------------------------ */

.pa-confirm {
	max-width: var(--pa-max-w);
	margin-inline: auto;
	padding: var(--pa-6) var(--pa-4) var(--pa-8);
	text-align: center;
}

.pa-confirm__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin-bottom: var(--pa-4);
	border-radius: var(--pa-r-pill);
	background: var(--pa-success-soft);
	color: var(--pa-success);
}

.pa-confirm__icon--warn {
	background: var(--pa-warn-soft);
	color: var(--pa-warn);
}

.pa-tick__ring,
.pa-tick__mark {
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	animation: pa-draw 0.7s ease forwards;
}

.pa-tick__mark {
	animation-delay: 0.24s;
}

@keyframes pa-draw {
	to {
		stroke-dashoffset: 0;
	}
}

.pa-confirm__title {
	margin: 0 0 var(--pa-2);
	font-family: var(--pa-font-display, inherit);
	font-size: clamp(1.3rem, 5vw, 1.8rem);
}

.pa-confirm__lede {
	margin: 0 auto var(--pa-5);
	max-width: 46ch;
	color: var(--pa-ink-2);
}

.pa-confirm__facts,
.pa-track__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pa-3);
	margin: 0 0 var(--pa-5);
	padding: var(--pa-4);
	text-align: left;
	background: var(--pa-canvas);
	border-radius: var(--pa-r-lg);
}

.pa-confirm__facts dt,
.pa-track__facts dt {
	color: var(--pa-muted);
	font-size: 0.78rem;
}

.pa-confirm__facts dd,
.pa-track__facts dd {
	margin: 2px 0 0;
	font-weight: 650;
}

.pa-confirm__facts-wide {
	grid-column: 1 / -1;
}

.pa-confirm__actions {
	display: grid;
	gap: var(--pa-2);
	margin: var(--pa-5) 0;
}

.pa-confirm__items {
	text-align: left;
	margin-top: var(--pa-6);
}

.pa-track {
	max-width: var(--pa-max-w);
	margin-inline: auto;
	padding: var(--pa-5) var(--pa-4) var(--pa-8);
}

.pa-track__head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--pa-3);
	margin-bottom: var(--pa-4);
}

.pa-track__title {
	margin: 0 0 var(--pa-2);
	font-size: 1.2rem;
}

.pa-track__status {
	margin: 0;
}

.pa-track__eta {
	text-align: right;
}

.pa-track__eta-value {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--pa-brand-ink);
}

.pa-track__eta-label {
	color: var(--pa-muted);
	font-size: 0.76rem;
}

.pa-track__map {
	margin-bottom: var(--pa-5);
}

.pa-map,
.pa-slot--tracking_map {
	display: block;
	min-height: 220px;
	border-radius: var(--pa-r-lg);
	overflow: hidden;
	background: var(--pa-canvas);
}

.pa-map__placeholder {
	display: grid;
	place-items: center;
	gap: var(--pa-2);
	height: 100%;
	min-height: 220px;
	padding: var(--pa-5);
	color: var(--pa-muted);
	text-align: center;
	font-size: 0.88rem;
}

.pa-courier {
	display: flex;
	align-items: center;
	gap: var(--pa-3);
	padding: var(--pa-3) var(--pa-4);
	margin-bottom: var(--pa-5);
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-lg);
}

.pa-courier__photo {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: var(--pa-r-pill);
	object-fit: cover;
	background: var(--pa-canvas);
}

.pa-courier__photo--fallback {
	display: grid;
	place-items: center;
	color: var(--pa-muted);
}

.pa-courier__body {
	flex: 1 1 auto;
	min-width: 0;
}

.pa-courier__name {
	display: block;
	font-weight: 700;
}

.pa-courier__meta {
	color: var(--pa-muted);
	font-size: 0.84rem;
}

/* Timeline */

.pa-timeline {
	display: grid;
	gap: 0;
	margin: 0 0 var(--pa-5);
	padding: 0;
	list-style: none;
}

.pa-timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: var(--pa-3);
	padding-bottom: var(--pa-4);
}

.pa-timeline__step::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 22px;
	bottom: 0;
	width: 2px;
	background: var(--pa-line);
}

.pa-timeline__step:last-child {
	padding-bottom: 0;
}

.pa-timeline__step:last-child::before {
	display: none;
}

.pa-timeline__dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-skeleton);
	color: transparent;
	z-index: 1;
}

.pa-timeline__step.is-done .pa-timeline__dot {
	background: var(--pa-success);
	color: #fff;
}

.pa-timeline__step.is-done::before {
	background: var(--pa-success);
}

.pa-timeline__step.is-current .pa-timeline__dot {
	background: var(--pa-brand);
	color: var(--pa-on-brand);
	box-shadow: 0 0 0 6px var(--pa-brand-soft);
}

.pa-timeline__label {
	font-weight: 650;
}

.pa-timeline__step:not(.is-done):not(.is-current) .pa-timeline__label {
	color: var(--pa-muted);
	font-weight: 500;
}

.pa-timeline__meta {
	display: block;
	color: var(--pa-muted);
	font-size: 0.8rem;
}

.pa-timeline--compact {
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--pa-1);
	text-align: center;
}

.pa-timeline--compact .pa-timeline__step {
	grid-template-columns: 1fr;
	justify-items: center;
	gap: var(--pa-2);
	padding: 0;
}

.pa-timeline--compact .pa-timeline__step::before {
	left: 50%;
	top: 11px;
	bottom: auto;
	width: 100%;
	height: 2px;
}

.pa-timeline--compact .pa-timeline__label {
	font-size: 0.72rem;
}

.pa-track__actions {
	display: grid;
	gap: var(--pa-2);
}

/* ------------------------------------------------------------------ *
 * Account + orders
 * ------------------------------------------------------------------ */

.pa-account__greeting {
	margin: 0;
	font-family: var(--pa-font-display, inherit);
	font-size: 1.3rem;
}

.pa-account__sub {
	margin: var(--pa-1) 0 var(--pa-5);
	color: var(--pa-muted);
}

.pa-tiles {
	display: grid;
	gap: var(--pa-2);
	margin-bottom: var(--pa-5);
}

.pa-tile {
	display: flex;
	align-items: center;
	gap: var(--pa-3);
	min-height: 56px;
	padding: 0 var(--pa-4);
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r);
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.pa-tile__label {
	flex: 1 1 auto;
}

.pa-tile__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-brand-soft);
	color: var(--pa-brand-ink);
}

.pa-account__cta {
	display: grid;
	gap: var(--pa-3);
	justify-items: center;
}

.pa-orders {
	display: grid;
	gap: var(--pa-3);
}

.pa-order {
	padding: var(--pa-4);
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-lg);
}

.pa-order__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pa-2);
	margin-bottom: var(--pa-2);
}

.pa-order__number {
	font-weight: 700;
}

.pa-order__date {
	color: var(--pa-muted);
	font-size: 0.82rem;
}

.pa-order__items {
	margin: 0 0 var(--pa-3);
	color: var(--pa-ink-2);
	font-size: 0.88rem;
}

.pa-order__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pa-3);
	margin-bottom: var(--pa-3);
}

.pa-order__total {
	font-weight: 700;
}

.pa-order__eta {
	color: var(--pa-muted);
	font-size: 0.84rem;
}

.pa-order__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2);
}

.pa-pager {
	display: flex;
	justify-content: space-between;
	gap: var(--pa-2);
	margin-top: var(--pa-4);
}

/* =====================================================================
 * Auth - sign in / create account
 *
 * Matches the "Pastry - Account" desktop and mobile comps: breadcrumb, a
 * centred Libre Caslon display title, then one 600px card on the warm rose
 * canvas holding a two-up tab switcher and the two forms.
 *
 * The palette tokens below bind to the theme tokens first, so an owner's
 * Customizer brand colour still flows through, and fall back to the exact
 * hexes from the comp (which are the theme defaults anyway).
 * ================================================================== */

.pa-auth {
	/* Comp palette */
	--pa-auth-primary: var(--pa-brand, #8f4957);
	--pa-auth-primary-container: var(--pa-brand-btn, #d98695);
	--pa-auth-on-primary: var(--pa-on-brand, #ffffff);
	--pa-auth-on-surface: var(--pa-ink, #25181a);
	--pa-auth-on-surface-variant: var(--pa-ink-2, #534345);
	--pa-auth-outline: var(--pa-muted, #857375);
	--pa-auth-outline-variant: var(--pa-line, #d7c1c3);
	--pa-auth-error: var(--pa-danger, #ba1a1a);
	--pa-auth-surface-lowest: #ffffff;
	--pa-auth-surface-low: #fff0f1;
	--pa-auth-container: #ffe9eb;
	--pa-auth-surface-variant: #f5dddf;
	--pa-auth-secondary: #665c58;
	--pa-auth-secondary-container: #ebddd7;

	/* Comp type pairing */
	--pa-auth-display-face: var(--pa-font-display, "Libre Caslon Text", Georgia, "Times New Roman", serif);
	--pa-auth-ui-face: var(--pa-font-ui, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

	display: block;
	width: 100%;
	max-width: 600px;
	margin-inline: auto;
	padding-bottom: var(--pa-8);
	color: var(--pa-auth-on-surface);
}

/* Breadcrumb ------------------------------------------------------- */

.pa-auth__crumbs {
	margin-bottom: var(--pa-6);
}

.pa-auth__crumbs ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pa-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--pa-auth-ui-face);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-auth-on-surface-variant);
}

.pa-auth__crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.16s var(--pa-ease, ease);
}

.pa-auth__crumbs a:hover,
.pa-auth__crumbs a:focus-visible {
	color: var(--pa-auth-primary);
	text-decoration: none;
}

.pa-auth__crumb-sep {
	display: inline-flex;
	align-items: center;
	color: var(--pa-auth-outline);
}

/* Page title ------------------------------------------------------- */

.pa-auth__display {
	margin: 0 0 var(--pa-8);
	font-family: var(--pa-auth-display-face);
	font-size: clamp(2rem, 7vw, 3rem);
	line-height: 1.17;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--pa-auth-on-surface);
}

/* Card ------------------------------------------------------------- */

.pa-auth__card {
	padding: var(--pa-6);
	background: var(--pa-auth-surface-low);
	border: 1px solid var(--pa-auth-outline-variant);
	border-radius: 16px;
	box-shadow: var(--pa-shadow-sm, 0 1px 2px rgba(67, 52, 54, 0.05));
}

/* Tab switcher ----------------------------------------------------- */

.pa-auth__tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pa-3);
	margin-bottom: var(--pa-8);
}

.pa-auth__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pa-2);
	min-height: 88px;
	padding: var(--pa-4);
	border: 1px solid var(--pa-auth-outline-variant);
	border-radius: 12px;
	background: transparent;
	color: var(--pa-auth-on-surface);
	font-family: var(--pa-auth-ui-face);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.16s var(--pa-ease, ease), border-color 0.16s var(--pa-ease, ease);
}

.pa-auth__tab .pa-icon {
	color: var(--pa-auth-on-surface-variant);
	transition: color 0.16s var(--pa-ease, ease);
}

.pa-auth__tab:hover {
	background: var(--pa-auth-container);
}

.pa-auth__tab.is-active {
	border-color: var(--pa-auth-secondary);
	background: var(--pa-auth-secondary-container);
}

.pa-auth__tab.is-active .pa-icon {
	color: var(--pa-auth-primary);
}

.pa-auth__tab:focus-visible {
	outline: 2px solid var(--pa-auth-primary);
	outline-offset: 2px;
}

/* Panels ----------------------------------------------------------- */

.pa-auth__panel[hidden] {
	display: none;
}

/* Only reachable with JS off, where both panels stay open and need a rule
 * between them. `:not([hidden])` is essential: the sibling combinator still
 * matches a hidden previous panel, which would draw a stray divider above the
 * register form once JS takes over. */
.pa-auth__panel:not([hidden]) + .pa-auth__panel {
	margin-top: var(--pa-8);
	padding-top: var(--pa-8);
	border-top: 1px solid var(--pa-auth-outline-variant);
}

.pa-auth__title {
	display: flex;
	align-items: center;
	gap: var(--pa-2);
	margin: 0 0 var(--pa-4);
	font-family: var(--pa-auth-display-face);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: var(--pa-auth-on-surface);
}

.pa-auth__title .pa-icon {
	color: var(--pa-auth-primary-container);
}

/* Forms ------------------------------------------------------------ */

.pa-auth__form {
	display: flex;
	flex-direction: column;
	gap: var(--pa-4);
	margin: 0;
}

.pa-auth__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pa-4);
}

.pa-auth__field {
	display: grid;
	gap: var(--pa-1);
	margin: 0;
}

.pa-auth__label {
	font-family: var(--pa-auth-ui-face);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: var(--pa-auth-on-surface-variant);
}

.pa-auth__req {
	color: var(--pa-auth-error);
}

/* Scoped to .pa-auth__form so fields injected by plugins through
 * woocommerce_register_form inherit the comp styling for free.
 *
 * The extra descendant is deliberate: the shared control styles further up
 * this file are written as `.woocommerce input[type="text"]` and
 * `.woocommerce .input-text:focus`, which outrank a single `.pa-auth` prefix.
 * These selectors clear them without resorting to !important. */
.pa-auth .pa-auth__form input[type="text"],
.pa-auth .pa-auth__form input[type="email"],
.pa-auth .pa-auth__form input[type="tel"],
.pa-auth .pa-auth__form input[type="password"],
.pa-auth .pa-auth__form input[type="number"],
.pa-auth .pa-auth__form input[type="search"],
.pa-auth .pa-auth__form select,
.pa-auth .pa-auth__form textarea {
	width: 100%;
	height: 48px;
	padding: 0 var(--pa-4);
	border: 1px solid var(--pa-auth-surface-variant);
	border-radius: 8px;
	background: var(--pa-auth-surface-lowest);
	color: var(--pa-auth-on-surface);
	font-family: var(--pa-font, inherit);
	/* 16px keeps iOS Safari from zooming the viewport on focus. */
	font-size: 16px;
	line-height: 24px;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.16s var(--pa-ease, ease), box-shadow 0.16s var(--pa-ease, ease);
}

.pa-auth .pa-auth__form textarea {
	height: auto;
	min-height: 96px;
	padding: var(--pa-3) var(--pa-4);
	resize: vertical;
}

.pa-auth .pa-auth__form input:focus,
.pa-auth .pa-auth__form select:focus,
.pa-auth .pa-auth__form textarea:focus {
	outline: none;
	border-color: var(--pa-auth-primary-container);
	box-shadow: 0 0 0 2px var(--pa-auth-primary-container);
}

.pa-auth .pa-auth__form input::placeholder,
.pa-auth .pa-auth__form textarea::placeholder {
	color: var(--pa-auth-outline);
}

/* Remember-me + forgot password row */

.pa-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pa-3);
	margin: var(--pa-1) 0 0;
}

.pa-auth__check {
	display: inline-flex;
	align-items: center;
	gap: var(--pa-2);
	margin: 0;
	font-family: var(--pa-font, inherit);
	font-size: 14px;
	line-height: 20px;
	color: var(--pa-auth-on-surface-variant);
	cursor: pointer;
}

.pa-auth__check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--pa-auth-primary);
	cursor: pointer;
}

.pa-auth__link {
	font-family: var(--pa-font, inherit);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--pa-auth-on-surface-variant);
	text-decoration: underline;
	text-decoration-color: var(--pa-auth-outline-variant);
	text-underline-offset: 4px;
	transition: color 0.16s var(--pa-ease, ease), text-decoration-color 0.16s var(--pa-ease, ease);
}

.pa-auth__link:hover,
.pa-auth__link:focus-visible {
	color: var(--pa-auth-primary);
	text-decoration-color: var(--pa-auth-primary);
}

.pa-auth__note,
.pa-auth .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--pa-auth-on-surface-variant);
}

/* Submit ----------------------------------------------------------- */

.pa-auth__actions {
	margin-top: var(--pa-5);
}

/* Outranks the shared `.woocommerce button.button` pill further up the file,
 * which would otherwise force --pa-brand and the serif body face. */
.pa-auth .pa-auth__form button.pa-auth__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pa-2);
	width: 100%;
	height: 56px;
	padding: 0 var(--pa-6);
	border: 0;
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-auth-primary-container);
	color: var(--pa-auth-on-primary);
	font-family: var(--pa-auth-ui-face);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.05em;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--pa-shadow-sm, 0 1px 2px rgba(67, 52, 54, 0.05));
	transition: background-color 0.16s var(--pa-ease, ease), transform 0.15s var(--pa-ease, ease);
}

.pa-auth .pa-auth__form button.pa-auth__submit:hover {
	background: var(--pa-auth-primary);
}

.pa-auth .pa-auth__form button.pa-auth__submit:active {
	transform: scale(0.98);
}

.pa-auth .pa-auth__form button.pa-auth__submit:focus-visible {
	outline: 2px solid var(--pa-auth-primary);
	outline-offset: 2px;
}

/* Opening-hours footnote ------------------------------------------- */

.pa-auth__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pa-2);
	margin: var(--pa-6) 0 0;
	font-family: var(--pa-auth-ui-face);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: var(--pa-auth-on-surface-variant);
}

/* Page shell ------------------------------------------------------- *
 * Signed out, the account page is the auth screen: no sidebar grid and no
 * generic "My account" page title above the comp's own heading. */

body.pa-auth-page .pa-page__head {
	display: none;
}

body.pa-auth-page .woocommerce {
	display: block;
}

@media (min-width: 768px) {
	.pa-auth__card {
		padding: var(--pa-8);
	}

	.pa-auth__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.pa-auth *,
	.pa-auth *::before,
	.pa-auth *::after {
		transition-duration: 0.01ms !important;
	}

	.pa-auth .pa-auth__form button.pa-auth__submit:active {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Empty states, posts, misc
 * ------------------------------------------------------------------ */

.pa-empty {
	color: var(--pa-muted);
	text-align: center;
}

.pa-empty--page {
	display: grid;
	justify-items: center;
	gap: var(--pa-3);
	padding: var(--pa-10) var(--pa-4);
	background: var(--pa-canvas);
	border-radius: var(--pa-r-lg);
}

.pa-posts {
	display: grid;
	gap: var(--pa-3);
}

.pa-post {
	overflow: hidden;
}

.pa-post__media img {
	width: 100%;
	height: auto;
	display: block;
}

.pa-post__body {
	padding: var(--pa-4);
}

.pa-post__title {
	margin: 0 0 var(--pa-1);
	font-size: 1.05rem;
}

.pa-post__title a {
	color: inherit;
	text-decoration: none;
}

.pa-post__meta {
	margin: 0 0 var(--pa-2);
	color: var(--pa-muted);
	font-size: 0.8rem;
}

.pa-how {
	display: grid;
	gap: var(--pa-3);
}

.pa-how__item {
	display: flex;
	gap: var(--pa-3);
	align-items: start;
}

.pa-how__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-brand-soft);
	color: var(--pa-brand-ink);
}

.pa-how__title {
	margin: 0;
	font-size: 0.98rem;
}

.pa-how__text {
	margin: 2px 0 0;
	color: var(--pa-muted);
	font-size: 0.86rem;
}

.pa-infogrid {
	display: grid;
	gap: var(--pa-3);
}

/* Slots stay invisible until a plugin fills them. */

.pa-slot:empty {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Desktop header + footer
 * ------------------------------------------------------------------ */

.pa-dheader {
	display: none;
}

.pa-footer {
	margin-top: var(--pa-8);
	padding: var(--pa-8) var(--pa-4) calc(var(--pa-8) + var(--pa-tabbar-h));
	background: var(--pa-footer-bg);
	color: var(--pa-footer-ink);
}

.pa-footer__inner {
	display: grid;
	gap: var(--pa-6);
	max-width: var(--pa-content-max);
	margin-inline: auto;
}

.pa-footer__name {
	margin: 0 0 var(--pa-1);
	font-family: var(--pa-font-display, inherit);
	font-size: 1.2rem;
}

.pa-footer__tagline,
.pa-footer__legal {
	color: var(--pa-muted);
	font-size: 0.86rem;
}

.pa-footer__title {
	margin: 0 0 var(--pa-3);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pa-ink-2);
}

.pa-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--pa-2);
	font-size: 0.9rem;
}

.pa-footer__list a {
	color: inherit;
	text-decoration: none;
}

.pa-footer__list a:hover {
	text-decoration: underline;
}

.pa-footer__legal {
	margin: 0;
	padding-top: var(--pa-4);
	border-top: 1px solid var(--pa-line);
}

.pa-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2);
	margin: var(--pa-3) 0 0;
	padding: 0;
	list-style: none;
}

.pa-social__link {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--pa-3);
	border-radius: var(--pa-r-pill);
	background: var(--pa-canvas);
	color: var(--pa-ink-2);
	font-size: 0.82rem;
	text-decoration: none;
	border: 1px solid var(--pa-line);
}

/* ------------------------------------------------------------------ *
 * Tablet and up
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
	.pa-section,
	.pa-product,
	.pa-track,
	.pa-confirm,
	.pa-checkout {
		max-width: var(--pa-content-max);
		padding-inline: var(--pa-6);
	}

	.pa-section__title {
		font-size: 1.5rem;
	}

	.pa-promos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pa-cats {
		grid-auto-columns: 132px;
	}

	.pa-hero--home {
		padding: var(--pa-10) var(--pa-8);
		border-radius: var(--pa-r-xl);
		margin: var(--pa-4) var(--pa-6) 0;
	}

	.pa-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pa-infogrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pa-footer__inner {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}

	.pa-footer__legal {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ *
 * Desktop
 * ------------------------------------------------------------------ */

@media (min-width: 1024px) {
	/* Mobile chrome steps aside for a classic header. */
	.pa-topbar,
	.pa-tabbar,
	.pa-cartbar,
	.pa-stickybuy {
		display: none !important;
	}

	body.pa-app {
		padding-top: 0;
		padding-bottom: 0;
	}

	.pa-dheader {
		display: block;
		position: sticky;
		top: 0;
		z-index: var(--pa-z-header);
		background: var(--pa-surface);
		border-bottom: 1px solid var(--pa-line);
		transition: box-shadow 0.2s ease;
	}

	.pa-dheader.is-stuck {
		box-shadow: var(--pa-shadow);
	}

	.pa-dheader__inner {
		display: flex;
		align-items: center;
		gap: var(--pa-5);
		max-width: var(--pa-content-max);
		margin-inline: auto;
		padding: var(--pa-3) var(--pa-6);
	}

	.pa-dheader__brand {
		display: inline-flex;
		align-items: center;
		gap: var(--pa-2);
		color: inherit;
		text-decoration: none;
		font-weight: 700;
	}

	.pa-dheader__name {
		font-family: var(--pa-font-display, inherit);
		font-size: 1.1rem;
	}

	.pa-nav__list {
		display: flex;
		align-items: center;
		gap: var(--pa-4);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 0.94rem;
		font-weight: 600;
	}

	.pa-nav__list a {
		color: inherit;
		text-decoration: none;
		padding: var(--pa-2) 0;
		border-bottom: 2px solid transparent;
	}

	.pa-nav__list a:hover,
	.pa-nav__list .current-menu-item > a {
		border-bottom-color: var(--pa-brand);
	}

	.pa-dheader__actions {
		display: flex;
		align-items: center;
		gap: var(--pa-2);
		margin-left: auto;
	}

	.pa-dsearch {
		display: flex;
		align-items: center;
		gap: var(--pa-2);
		min-width: 240px;
		padding: 0 var(--pa-3);
		border: 1.5px solid var(--pa-line);
		border-radius: var(--pa-r-pill);
	}

	.pa-dsearch input {
		flex: 1 1 auto;
		min-height: 40px;
		border: 0;
		background: none;
		font: inherit;
	}

	.pa-dsearch input:focus-visible {
		outline: none;
	}

	.pa-dcart {
		display: inline-flex;
		align-items: center;
		gap: var(--pa-2);
		min-height: 42px;
		padding: 0 var(--pa-4);
		border-radius: var(--pa-r-pill);
		background: var(--pa-brand-btn);
		color: var(--pa-brand-btn-ink);
		text-decoration: none;
		font-weight: 700;
		transition: background 0.2s ease;
	}

	.pa-dcart:hover {
		background: var(--pa-brand);
		color: var(--pa-on-brand);
	}

	.pa-dcart__count.is-empty {
		display: none;
	}

	.pa-dcart__count {
		display: inline-grid;
		place-items: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border-radius: var(--pa-r-pill);
		background: var(--pa-brand-ink);
		color: #fff;
		font-size: 0.72rem;
		font-weight: 700;
	}

	.pa-dheader__strip {
		display: flex;
		align-items: center;
		gap: var(--pa-4);
		max-width: var(--pa-content-max);
		margin-inline: auto;
		padding: var(--pa-2) var(--pa-6);
		border-top: 1px solid var(--pa-line);
		color: var(--pa-muted);
		font-size: 0.84rem;
	}

	/* Two-column shells with a sticky summary. */
	.pa-product__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--pa-8);
		align-items: start;
	}

	.pa-product__summary {
		position: sticky;
		top: 96px;
	}

	.pa-checkout__grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
		gap: var(--pa-6);
		align-items: start;
	}

	.pa-checkout__aside [data-pa-sticky] {
		position: sticky;
		top: 96px;
	}

	.pa-items--grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.pa-items--list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pa-confirm__facts,
	.pa-track__facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.pa-confirm__actions,
	.pa-track__actions {
		grid-auto-flow: column;
		justify-content: center;
	}

	.pa-how {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.pa-map,
	.pa-slot--tracking_map {
		min-height: 380px;
	}

	.pa-footer {
		padding-bottom: var(--pa-8);
	}
}

@media (min-width: 1280px) {
	.pa-section,
	.pa-product,
	.pa-track,
	.pa-confirm,
	.pa-checkout,
	.pa-dheader__inner,
	.pa-dheader__strip,
	.pa-footer__inner {
		max-width: var(--pa-content-wide);
	}
}

/* ------------------------------------------------------------------ *
 * Motion + print courtesies
 * ------------------------------------------------------------------ */

/* Focus fallback: any interactive element that has no component-specific
 * focus style still gets a clear, branded focus ring. :where() keeps the
 * specificity at zero so every component rule above can override it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--pa-brand);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.pa-btn,
	.pa-item,
	.pa-cat__media img,
	.pa-progress__fill {
		transition: none;
	}

	.pa-tick__ring,
	.pa-tick__mark {
		animation: none;
		stroke-dashoffset: 0;
	}
}

@media print {
	.pa-dheader,
	.pa-footer,
	.pa-tabbar,
	.pa-cartbar,
	.pa-stickybuy,
	.pa-track__actions,
	.pa-confirm__actions {
		display: none !important;
	}
}


/* ================================================================== *
 * Responsive, sticky chrome & professional account / cart / orders.
 * Appended last so these rules win over everything above.
 * ================================================================== */

/* Canonical measure and bottom padding live in the layout section of this
 * file; nothing is redefined here. */

/* Fixed chrome (tab bar, cart bar) is declared once in sections 6 and 7. */

/* Keep content clear of the fixed bottom chrome on every screen. */
body.pa-has-tabbar .pa-main {
	padding-bottom: calc(var(--pa-tabbar-h, 58px) + var(--pa-safe-bottom, 0px) + 28px);
}

body.pa-has-tabbar.pa-has-cartbar .pa-main {
	padding-bottom: calc(var(--pa-tabbar-h, 58px) + var(--pa-cartbar-h, 60px) + var(--pa-safe-bottom, 0px) + 28px);
}

/* A quantity selector on menu tiles is always visible. */
.pa-item__qty {
	display: inline-flex;
	margin-top: var(--pa-2, 8px);
}

/* ---- Tablet and up (canonical breakpoint: 768px) ---- */
@media (min-width: 768px) {
	/* Menu items flow into a responsive multi-column grid, not one column. */
	.pa-items:not(.pa-items--scroller) {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		gap: var(--pa-4, 16px);
	}

	.pa-items--grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}

	/* Product page: media + summary side by side. */
	.pa-product__grid {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--pa-6, 24px);
		align-items: start;
	}

	/* Centre the fixed bars' contents so they don't stretch edge to edge. */
	.pa-tabbar {
		justify-content: center;
		gap: 8px;
	}

	.pa-tabbar .pa-tab {
		flex: 0 1 132px;
	}
}

@media (min-width: 1024px) {
	.pa-items:not(.pa-items--scroller) {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

/* ================================================================== *
 * WooCommerce account, orders & cart — professional polish.
 * ================================================================== */

.woocommerce-account .pa-main,
.woocommerce-cart .pa-main,
.woocommerce-checkout .pa-main {
	max-width: var(--pa-content-max);
}

/* My-account: sidebar + content on desktop. */
.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--pa-4, 16px);
}

@media (min-width: 768px) {
	/* Only run the sidebar split when the navigation is actually rendered.
	 * Account::dedupe_dashboard_nav() removes it on every account screen, so
	 * without this guard the content div becomes the first grid item and gets
	 * trapped in the fixed 240px sidebar track while column 2 sits empty. */
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}
}

/* Canonical account navigation: a wrapping segmented control on phones, a
 * sidebar from 768px up. This is the only .woocommerce-MyAccount-navigation ul
 * rule in the theme. */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2);
	overflow: visible;
	list-style: none;
	margin: 0 0 var(--pa-4);
	padding: var(--pa-2);
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-lg);
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

/* Link styling (pill) and the active state are declared once, in the account
 * section of the component layer. Only the hover tint is added here. */
.woocommerce-MyAccount-navigation li:not(.is-active) a:hover {
	background: var(--pa-brand-soft);
	border-color: var(--pa-brand);
	color: var(--pa-brand-ink);
}

/* Orders + cart tables: clean tables on desktop, cards on mobile. */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--pa-line, #eee);
	border-radius: var(--pa-r-lg, 16px);
	overflow: hidden;
	background: var(--pa-surface, #fff);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--pa-line, #eee);
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	background: var(--pa-canvas, #faf7f4);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pa-muted, #777);
}

.woocommerce table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.woocommerce .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

@media (max-width: 767px) {
	.woocommerce table.shop_table thead {
		display: none;
	}

	.woocommerce table.shop_table,
	.woocommerce table.shop_table tbody,
	.woocommerce table.shop_table tr,
	.woocommerce table.shop_table td {
		display: block;
		width: 100%;
	}

	.woocommerce table.shop_table tr {
		margin-bottom: 12px;
		border: 1px solid var(--pa-line, #eee);
		border-radius: var(--pa-r-lg, 16px);
		overflow: hidden;
	}

	.woocommerce table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		border-bottom: 1px solid var(--pa-line, #eee);
	}

	.woocommerce table.shop_table td::before {
		content: attr(data-title);
		font-weight: 700;
		color: var(--pa-muted, #777);
	}
}

/* Cart totals + checkout review panel. */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--pa-surface, #fff);
	border: 1px solid var(--pa-line, #eee);
	border-radius: var(--pa-r-lg, 16px);
	padding: var(--pa-5, 20px);
}

.woocommerce .cart-collaterals {
	display: grid;
	gap: var(--pa-4, 16px);
}

@media (min-width: 768px) {
	.woocommerce-cart form.woocommerce-cart-form {
		margin-bottom: var(--pa-4, 16px);
	}

	.woocommerce-cart .cart-collaterals {
		max-width: 420px;
		margin-left: auto;
	}
}


/* ================================================================== *
 * v3 fixes: central search, cart tab, account nav, category fallback,
 * featured scroller. Appended last so these rules win.
 * ================================================================== */

/* --- Central search field in the top bar --- */
.pa-topsearch {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	margin: 0 4px;
	padding: 0 14px;
	border: 1px solid var(--pa-line, #eee);
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-canvas, #f4efea);
	color: var(--pa-muted, #777);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.16s ease, background 0.16s ease;
}

.pa-topsearch:hover,
.pa-topsearch:focus-visible {
	border-color: var(--pa-brand, #b4532a);
	background: var(--pa-surface, #fff);
	outline: none;
}

.pa-topsearch .pa-icon {
	flex: 0 0 auto;
	color: var(--pa-brand, #b4532a);
}

.pa-topsearch__text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* --- Cart count badge on the bottom tab --- */
.pa-tab__count {
	position: absolute;
	top: -2px;
	right: calc(50% - 20px);
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-brand, #b4532a);
	color: #fff;
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--pa-surface, #fff);
}

.pa-tab__count.is-empty {
	display: none;
}

/* --- My account navigation: sidebar from tablet up --- */
@media (min-width: 768px) {
	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.woocommerce-MyAccount-navigation li a {
		display: block;
		width: 100%;
	}
}

/* --- Category tile fallback when there is no image --- */
.pa-cat__media--fallback {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: var(--pa-r-lg, 16px);
	background: linear-gradient(135deg, var(--pa-brand-soft, #fdf3ec), color-mix(in srgb, var(--pa-brand, #b4532a) 22%, #fff));
	color: var(--pa-brand-ink, #8f3f1f);
}

.pa-cat__initial {
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

/* --- Featured scroller: responsive card widths (base is in section 9) --- */
@media (min-width: 480px) {
	.pa-items--scroller {
		grid-auto-columns: 240px;
	}
}

@media (min-width: 768px) {
	.pa-items--scroller {
		grid-auto-columns: 260px;
	}
}

/* Keep tile cards in a clean vertical layout inside the scroller. */
.pa-items--scroller .pa-item--tile {
	flex-direction: column;
	width: 100%;
}

.pa-items--scroller .pa-item--tile .pa-item__media {
	width: 100%;
	aspect-ratio: 4 / 3;
}

/* ---------------------------------------------------------------------
 * Card quantity stepper: replaces the round "+" once the item is in the
 * cart. Positioned exactly where .pa-item__add sits so the card layout
 * never shifts. Appended last so it wins over the shop layer.
 * ------------------------------------------------------------------ */

.pa-item__add[hidden],
.pa-item__qty[hidden] {
	display: none !important;
}

.pa-item__qty {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-pill);
	background: var(--pa-surface);
	box-shadow: 0 3px 10px -4px var(--pa-brand-ink);
}

.pa-item__qtybtn {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: var(--pa-r-pill);
	display: grid;
	place-items: center;
	background: transparent;
	color: var(--pa-ink);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.16s var(--pa-ease);
}

.pa-item__qtybtn:active {
	background: var(--pa-skeleton);
}

.pa-item__qtyval {
	min-width: 22px;
	text-align: center;
	font-size: 0.9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ================================================================== *
 * 1.6.0 fixes: stacked tile cards, compact rows, desktop account,
 * aligned menu toolbar, tidy order actions.
 * ================================================================== */

/* Tile cards actually stack now: image on top, text below. Before this,
 * the inner link stayed a row, so names wrapped letter-by-letter and
 * overlapped the photo. */
.pa-item--tile .pa-item__link {
	flex-direction: column-reverse;
	gap: 0;
	align-items: stretch;
}

.pa-item--tile .pa-item__media {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
}

/* Compact rows: one slim line, like the categories rail. */
.pa-items--scroller.pa-items--compact {
	grid-auto-columns: 150px;
}

.pa-items--compact .pa-item__desc,
.pa-items--compact .pa-rating {
	display: none;
}

.pa-items--compact .pa-item__media {
	aspect-ratio: 1;
}

.pa-items--compact .pa-item__body {
	padding: var(--pa-2) var(--pa-3) var(--pa-3);
}

.pa-items--compact .pa-item__name {
	font-size: 0.875rem;
}

.pa-items--compact .pa-item__foot {
	margin-top: var(--pa-1);
}

.pa-items--compact .pa-item__add {
	width: 34px;
	height: 34px;
}

@media (min-width: 768px) {
	.pa-items--scroller.pa-items--compact {
		grid-auto-columns: 164px;
	}
}

/* Account tiles: undo the product-strip width collision. */
.pa-tiles .pa-tile {
	width: auto;
	flex: initial;
}

.pa-tiles {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Desktop account: a centered, roomy panel instead of a skinny column. */
@media (min-width: 1024px) {
	.pa-account,
	.woocommerce-MyAccount-content,
	.pa-subhead,
	.pa-aorders {
		max-width: 860px;
		margin-left: auto;
		margin-right: auto;
	}

	.pa-account__greeting {
		font-size: 1.5rem;
	}

	.pa-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--pa-3);
	}

	.pa-tiles .pa-tile {
		flex-direction: column;
		justify-content: center;
		gap: var(--pa-2);
		min-height: 112px;
		padding: var(--pa-4);
		text-align: center;
		border-radius: var(--pa-r-lg);
		transition: box-shadow 0.18s ease, transform 0.18s ease;
	}

	.pa-tiles .pa-tile:hover {
		box-shadow: var(--pa-shadow);
		transform: translateY(-1px);
	}

	.pa-tiles .pa-tile__icon {
		width: 44px;
		height: 44px;
	}

	.pa-tiles .pa-tile__label {
		flex: none;
	}

	.pa-tiles .pa-tile > svg:last-child {
		display: none;
	}
}

/* Menu toolbar: icons sit inside their fields, nothing floats loose. */
.pa-filters__row {
	align-items: center;
}

.pa-field {
	position: relative;
	display: block;
}

.pa-field > svg,
.pa-field > .pa-icon {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	color: var(--pa-muted);
	pointer-events: none;
}

.pa-field--search input[type="search"] {
	width: 100%;
	min-height: 46px;
	padding: 0 14px 0 42px;
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-pill);
	background: var(--pa-surface);
	font: inherit;
}

.pa-field--select > svg,
.pa-field--select > .pa-icon {
	left: auto;
	right: 14px;
}

.pa-field--select select {
	width: 100%;
	min-height: 46px;
	padding: 0 40px 0 14px;
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-pill);
	background: var(--pa-surface);
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
}

/* Order actions: small pills on one line, Track leads in brand color. */
.woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
}

.woocommerce-orders-table .woocommerce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	margin: 2px 6px 2px 0;
	padding: 0 14px;
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-pill);
	background: var(--pa-surface);
	color: var(--pa-ink);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-orders-table .woocommerce-button.pa_track,
.woocommerce-orders-table .woocommerce-button.pdt_track {
	background: var(--pa-brand-btn, var(--pa-brand));
	border-color: var(--pa-brand-btn, var(--pa-brand));
	color: #fff;
}

/* Express wallets (Apple Pay / Google Pay) inside the cart sheet. */
.pa-express-pay {
	display: grid;
	gap: 8px;
	margin-bottom: 10px;
}

.pa-express-pay:empty {
	display: none;
}

.pa-express-pay .button,
.pa-express-pay .wc-stripe-payment-request-wrapper,
.pa-express-pay .wcpay-payment-request-wrapper {
	width: 100%;
}

/* ================================================================
 * v1.4.1 / theme 1.6.2 — UI improvements
 * ============================================================== */

/* --------------------------------------------------------------- */
/* Favourite heart: fill solid red when saved                       */
/* --------------------------------------------------------------- */
.pa-fav {
  transition: color .18s ease, background .18s ease, transform .1s ease;
}
.pa-fav:active {
  transform: scale(.85);
}
.pa-fav.is-saved {
  color: #e8304c;
  background: rgba(232,48,76,.12);
}
.pa-fav.is-saved svg {
  fill: #e8304c;
}
.pa-fav.is-saved svg path {
  stroke: #e8304c;
}

/* --------------------------------------------------------------- */
/* Topbar search: hide on mobile (moved to raised tab in tabbar)   */
/* --------------------------------------------------------------- */
@media (max-width: 767px) {
  .pa-topsearch,
  .pa-topsearch--topbar {
    display: none !important;
  }

  /* Hero CTA: hide "Search the menu" ghost button on mobile */
  .pa-hero__cta .pa-btn--ghost[data-pa-open-search] {
    display: none;
  }
}

/* --------------------------------------------------------------- */
/* Raised Search tab in bottom tabbar                              */
/* --------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Allow raised button to overflow the tabbar */
  .pa-tabbar {
    overflow: visible;
    align-items: flex-end;
  }

  .pa-tabbar > .pa-tab:nth-child(2) { margin-right: 34px; }
  .pa-tabbar > .pa-tab:nth-child(4) { margin-left: 34px; }

  .pa-tab--search {
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    flex: 0 0 58px;
    min-width: 58px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--pa-brand);
    color: #fff !important;
    padding: 0;
    gap: 2px;
    z-index: 1;
    border: 3px solid var(--pa-bg, #f5f0eb);
    box-shadow: 0 4px 18px -2px rgba(0,0,0,.22);
  }

  .pa-tab--search .pa-tab__icon {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pa-tab--search svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
  }

  .pa-tab--search .pa-tab__label {
    font-size: .6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
  }

  .pa-tab--search:hover,
  .pa-tab--search.is-active {
    color: #fff !important;
    background: var(--pa-brand-dark, #a05a28);
  }
}

/* On desktop tabbar is hidden anyway; hide just in case */
@media (min-width: 768px) {
  .pa-tab--search {
    display: none;
  }
}

/* --------------------------------------------------------------- */
/* Home hero: taller, more impactful, responsive                   */
/* --------------------------------------------------------------- */
.pa-hero--home {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
}

.pa-hero--home .pa-hero__body {
  width: 100%;
  padding-bottom: var(--pa-5, 1.25rem);
}

.pa-hero--home .pa-hero__title {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.03em;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  margin-bottom: .25rem;
}

.pa-hero--home .pa-hero__sub {
  font-size: 1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.pa-hero__cta {
  margin-top: var(--pa-4, 1rem);
  gap: var(--pa-2, .5rem);
  flex-wrap: wrap;
}

.pa-hero--home .pa-hero__status {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: .25rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--pa-3, .75rem);
}

@media (min-width: 768px) {
  .pa-hero--home {
    min-height: 380px;
    border-radius: var(--pa-r-xl, 20px);
    margin: 0 var(--pa-4, 1rem);
  }

  .pa-hero__cta {
    flex-direction: row;
    align-items: center;
  }

  .pa-hero--home .pa-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
  }
}

@media (min-width: 1024px) {
  .pa-hero--home {
    min-height: 440px;
  }
}

@media (min-width: 1280px) {
  .pa-hero--home {
    min-height: 500px;
    max-width: var(--pa-content-max, 1200px);
    margin-inline: auto;
    border-radius: var(--pa-r-xl, 20px);
  }
}

/* --------------------------------------------------------------- */
/* Infogrid + How it works: 3-column on wide screens               */
/* --------------------------------------------------------------- */
@media (min-width: 640px) {
  .pa-how {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pa-4, 1rem);
  }

  .pa-how__item {
    flex-direction: column;
    gap: var(--pa-2, .5rem);
    text-align: center;
    align-items: center;
  }

  .pa-how__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    flex-shrink: 0;
  }
}

@media (min-width: 768px) {
  .pa-infogrid {
    gap: var(--pa-6, 1.5rem);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .pa-infogrid {
    grid-template-columns: 3fr 2fr;
    gap: var(--pa-8, 2rem);
  }
}

/* --------------------------------------------------------------- */
/* Orders page: grid layout + improved cards                       */
/* --------------------------------------------------------------- */
.pa-ocard,
.pa-order-card {
  border-radius: var(--pa-r-lg, 14px);
  background: var(--pa-surface, #fff);
  border: 1px solid var(--pa-line, #e8e2db);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
  margin-bottom: var(--pa-3, .75rem);
}

.pa-ocard:hover,
.pa-order-card:hover {
  box-shadow: 0 4px 20px -4px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

@media (min-width: 640px) {
  .pa-orders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pa-4, 1rem);
  }

  .pa-orders .pa-ocard,
  .pa-orders .pa-order-card {
    margin-bottom: 0;
  }
}

@media (min-width: 1100px) {
  .pa-orders {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------- */
/* Account / dashboard: cleaner layout                             */
/* --------------------------------------------------------------- */
.pa-account {
  padding-bottom: var(--pa-8, 2rem);
}

.pa-account__head {
  padding: var(--pa-5, 1.25rem) 0 var(--pa-4, 1rem);
  margin-bottom: var(--pa-4, 1rem);
  border-bottom: 1px solid var(--pa-line, #e8e2db);
}

.pa-account__greeting {
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 var(--pa-1, .25rem);
}

.pa-account__sub {
  color: var(--pa-muted, #888);
  font-size: .9375rem;
  margin: 0;
}

/* Tiles grid */
.pa-tiles {
  gap: var(--pa-3, .75rem);
}

.pa-tile {
  border-radius: var(--pa-r-lg, 14px);
  padding: var(--pa-4, 1rem);
  background: var(--pa-surface, #fff);
  border: 1px solid var(--pa-line, #e8e2db);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
  display: flex;
  flex-direction: column;
  gap: var(--pa-1, .25rem);
}

.pa-tile:hover {
  background: var(--pa-surface-raised, #faf7f4);
  box-shadow: 0 2px 12px -2px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.pa-tile__icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: var(--pa-1, .25rem);
}

.pa-tile__label {
  font-weight: 600;
  font-size: .875rem;
  color: var(--pa-ink, #1a1208);
}

.pa-tile__value {
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--pa-brand, #b4682a);
  letter-spacing: -.02em;
}

@media (min-width: 480px) {
  .pa-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .pa-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------- */
/* PSM driver select in order card                                 */
/* --------------------------------------------------------------- */
.psm-driver-select {
  width: 100%;
  margin-top: var(--pa-2, .5rem);
  padding: 6px 10px;
  border-radius: var(--pa-r, 8px);
  border: 1px solid var(--pa-line, #e8e2db);
  background: var(--pa-surface, #fff);
  font-size: .875rem;
  color: var(--pa-ink, #1a1208);
  appearance: auto;
}

/* ================================================================
 * Stitch Minimalist Orders — pastry-app theme v1.6.4
 * ============================================================== */

.pa-stitch-orders {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 3rem;
}

/* --- page heading ------------------------------------------------ */
.pa-stitch-orders__header { display: flex; flex-direction: column; gap: .375rem; padding-top: .25rem; }
.pa-stitch-orders__title {
  font-size: clamp(1.75rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--pa-ink, #1c1b1b);
  margin: 0;
}
.pa-stitch-orders__sub { font-size: .9375rem; color: var(--pa-muted, #54433c); margin: 0; }

/* --- section ---------------------------------------------------- */
.pa-stitch-section { display: flex; flex-direction: column; gap: 1rem; }
.pa-stitch-section__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pa-ink, #1c1b1b);
  margin: 0;
  padding-bottom: .625rem;
  border-bottom: 1px solid var(--pa-line, #d9c2b9);
}
.pa-stitch-section__sub { font-size: .875rem; color: var(--pa-muted, #54433c); margin: -.25rem 0 0; }

/* --- cards list ------------------------------------------------- */
.pa-stitch-list { display: flex; flex-direction: column; gap: 1rem; }

/* --- base card -------------------------------------------------- */
.pa-stitch-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--pa-line, #d9c2b9);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .15s ease;
}
.pa-stitch-card:hover {
  box-shadow: 0 4px 20px -4px rgba(146,75,42,.12);
  transform: translateY(-1px);
}

/* --- active card: left accent bar ------------------------------- */
.pa-stitch-card--active { border-left: none; }
.pa-stitch-card__accent {
  position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--pa-brand, #924b2a);
  border-radius: 12px 0 0 12px;
}
.pa-stitch-card--active .pa-stitch-card__body { padding-left: calc(1rem + 4px); }

/* --- card body -------------------------------------------------- */
.pa-stitch-card__body { padding: 1.125rem 1rem; display: flex; flex-direction: column; gap: .875rem; }

/* --- head row --------------------------------------------------- */
.pa-stitch-card__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem;
  padding-bottom: .75rem; border-bottom: 1px solid rgba(217,194,185,.35);
}
.pa-stitch-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.pa-stitch-card__num {
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--pa-muted, #54433c);
}
.pa-stitch-card__price-block { text-align: right; flex-shrink: 0; }
.pa-stitch-card__total {
  display: block;
  font-size: 1.125rem; font-weight: 700;
  color: var(--pa-ink, #1c1b1b); line-height: 1.2;
}
.pa-stitch-card--active .pa-stitch-card__total { color: var(--pa-brand, #924b2a); }
.pa-stitch-card__items { display: block; font-size: .75rem; color: var(--pa-muted, #54433c); margin-top: .1rem; }

/* --- date ------------------------------------------------------- */
.pa-stitch-card__date { font-size: .8125rem; color: var(--pa-muted, #54433c); margin: -.25rem 0 0; }

/* --- status badges ---------------------------------------------- */
.pa-stitch-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
  padding: .2rem .55rem; border-radius: 100px; line-height: 1; white-space: nowrap;
}
.pa-stitch-badge--processing,
.pa-stitch-badge--onhold   { background: rgba(209,125,88,.18); color: #7a3d1a; }
.pa-stitch-badge--complete  { background: rgba(97,94,87,.12);  color: #3f3c36; }
.pa-stitch-badge--cancelled { background: rgba(186,26,26,.10); color: #93000a; }

/* --- thumbnail strip -------------------------------------------- */
.pa-stitch-thumbs {
  display: flex; gap: .5rem;
  overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.pa-stitch-thumbs::-webkit-scrollbar { display: none; }
.pa-stitch-thumb {
  flex-shrink: 0; width: 64px; height: 64px;
  border-radius: 8px; overflow: hidden;
  background: #f0eded; border: 1px solid rgba(217,194,185,.6);
}
.pa-stitch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-stitch-thumb--placeholder,
.pa-stitch-thumb--more { display: flex; align-items: center; justify-content: center; }
.pa-stitch-thumb--placeholder span { font-size: 1.375rem; font-weight: 800; color: var(--pa-muted, #54433c); text-transform: uppercase; }
.pa-stitch-thumb--more span { font-size: .75rem; font-weight: 700; color: var(--pa-muted, #54433c); }

/* --- action buttons --------------------------------------------- */
.pa-stitch-card__actions { display: flex; gap: .625rem; flex-wrap: wrap; }
.pa-stitch-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .375rem; min-height: 46px; padding: 0 1.25rem;
  border-radius: 8px; font-size: .875rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .1s ease;
  flex: 1 1 0; text-align: center; border: none;
  box-sizing: border-box;
}
.pa-stitch-btn:active { transform: scale(.97); }
.pa-stitch-btn--primary { background: var(--pa-brand, #924b2a); color: #fff; }
.pa-stitch-btn--primary:hover { background: #7a3d1a; color: #fff; }
.pa-stitch-btn--ghost {
  background: transparent; color: var(--pa-brand, #924b2a);
  border: 1.5px solid var(--pa-brand, #924b2a);
}
.pa-stitch-btn--ghost:hover { background: rgba(146,75,42,.06); color: var(--pa-brand, #924b2a); }
.pa-stitch-btn--muted {
  background: #f0eded; color: var(--pa-muted, #54433c);
  border: 1px solid var(--pa-line, #d9c2b9);
}
.pa-stitch-btn--muted:hover { background: #e5e2e1; color: var(--pa-ink, #1c1b1b); }
.pa-stitch-btn--lg { min-height: 52px; padding: 0 2rem; font-size: 1rem; flex: 0 0 auto; }

/* --- pagination ------------------------------------------------- */
.pa-stitch-pager { display: flex; justify-content: center; gap: .75rem; padding-top: .5rem; }
.pa-stitch-pager__btn {
  font-size: .875rem; font-weight: 600;
  color: var(--pa-brand, #924b2a);
  padding: .5rem 1.25rem; border-radius: 8px;
  border: 1.5px solid var(--pa-brand, #924b2a);
  text-decoration: none; transition: background .15s ease;
}
.pa-stitch-pager__btn:hover { background: rgba(146,75,42,.06); }

/* --- empty state ------------------------------------------------ */
.pa-stitch-empty {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 3rem 1.5rem;
  background: #fff; border: 1px solid var(--pa-line, #d9c2b9);
  border-radius: 16px; text-align: center;
}
.pa-stitch-empty__icon { font-size: 3rem; line-height: 1; }
.pa-stitch-empty__msg { font-size: 1rem; color: var(--pa-muted, #54433c); max-width: 28ch; margin: 0; }

/* === Responsive ================================================= */

/* Mobile: stack buttons */
@media (max-width: 479px) {
  .pa-stitch-card__actions { flex-direction: column; }
  .pa-stitch-btn { flex: 1 1 100%; }
}

/* Tablet 640px+: history cards go horizontal */
@media (min-width: 640px) {
  .pa-stitch-card--history .pa-stitch-card__body {
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: .75rem 1rem;
  }
  .pa-stitch-card--history .pa-stitch-card__head {
    flex: 1 1 auto; min-width: 0; border-bottom: none; padding-bottom: 0;
  }
  .pa-stitch-card--history .pa-stitch-card__date { flex: 0 0 100%; margin-top: -.5rem; }
  .pa-stitch-card--history .pa-stitch-thumbs { flex: 0 0 auto; }
  .pa-stitch-card--history .pa-stitch-card__actions {
    flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; margin-left: auto;
  }
  .pa-stitch-card--history .pa-stitch-btn { flex: 0 1 auto; min-width: 100px; }
}

/* Desktop 1024px+: more breathing room */
@media (min-width: 1024px) {
  .pa-stitch-orders { gap: 2.5rem; }
  .pa-stitch-card--active .pa-stitch-card__body { padding: 1.5rem 1.5rem 1.5rem calc(1.5rem + 4px); }
  .pa-stitch-card__actions { flex-wrap: nowrap; }
  .pa-stitch-btn { flex: 0 1 auto; min-width: 140px; }
}

/* ================================================================
 * Orders — redesign per provided HTML comps (desktop_code.html,
 * mobile_code.html), mapped onto theme tokens (fonts + colors stay
 * theme-owned; only the UI structure follows the comps).
 *
 * Mobile:  stacked cards, pill badges, 4px radii, full-width buttons.
 * 768px+:  page heading, ruled section headings, accent-bar active card,
 *          history cards become one-line rows with text-link actions.
 * ============================================================== */

.pa-orderpage {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-bottom: 2rem;
}

/* Page heading: desktop only — the mobile top bar already titles the screen. */
.pa-orderpage__header { display: none; }

/* --- section --------------------------------------------------- */
.pa-orderpage__section { display: flex; flex-direction: column; gap: 1rem; }
.pa-orderpage__heading {
	margin: 0;
	font-family: var(--pa-font-display, var(--pa-font));
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: var(--pa-ink, #14110f);
}
.pa-orderpage__section-sub { margin: -.5rem 0 0; font-size: .875rem; color: var(--pa-muted, #6f6a66); }

.pa-orderpage__list { display: flex; flex-direction: column; gap: 1rem; }

/* --- order card (mobile base) ---------------------------------- */
.pa-ordrow {
	position: relative;
	display: grid;
	grid-template-areas:
		"head price"
		"thumbs thumbs"
		"actions actions";
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: .75rem;
	background: var(--pa-surface, #fff);
	border: 1px solid var(--pa-line, #e9e4de);
	border-radius: 8px;
	padding: 1rem;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--pa-brand) 4%, transparent);
}

/* Card head: divider under the whole first row on mobile, per comp. */
.pa-ordrow__head {
	grid-area: head;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--pa-line, #e9e4de) 45%, transparent);
	padding-bottom: .75rem;
	margin-bottom: 1rem;
}
.pa-ordrow__price {
	grid-area: price;
	text-align: right;
	align-self: start;
	border-bottom: 1px solid color-mix(in srgb, var(--pa-line, #e9e4de) 45%, transparent);
	padding-bottom: .75rem;
	margin-bottom: 1rem;
}
.pa-ordrow__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.pa-ordrow__num { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--pa-ink, #14110f); }
.pa-ordrow__date { margin: 0; font-size: .875rem; color: var(--pa-muted, #6f6a66); }
.pa-ordrow__time { display: none; }

.pa-ordrow__total { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--pa-ink, #14110f); }
.pa-ordrow--active .pa-ordrow__total { color: var(--pa-brand, #b4532a); }
.pa-ordrow__count { display: block; margin-top: .1rem; font-size: .875rem; color: var(--pa-muted, #6f6a66); }

/* --- status badges: pills on mobile ----------------------------- */
.pa-ordrow__badge {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .25rem .5rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
}
.pa-ordrow__badge .pa-icon { width: 14px; height: 14px; }
.pa-ordrow__badge--processing,
.pa-ordrow__badge--onhold   { background: color-mix(in srgb, var(--pa-brand, #b4532a) 14%, #fff); color: var(--pa-brand-ink, #8f3f1f); }
.pa-ordrow__badge--complete  { background: #f0eded; color: var(--pa-ink-2, #4b4642); }
.pa-ordrow__badge--cancelled { background: var(--pa-danger-soft, #fdecea); color: var(--pa-danger, #c0392b); }

/* --- thumbnail strip: 64px, 4px radius -------------------------- */
.pa-ordrow__thumbs {
	grid-area: thumbs;
	display: flex;
	gap: .75rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: .5rem;
}
.pa-ordrow__thumbs::-webkit-scrollbar { display: none; }
.pa-ordrow__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 4px;
	overflow: hidden;
	background: #f0eded;
	border: 1px solid color-mix(in srgb, var(--pa-line, #e9e4de) 60%, transparent);
}
.pa-ordrow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-ordrow__thumb--placeholder,
.pa-ordrow__thumb--more { display: flex; align-items: center; justify-content: center; }
.pa-ordrow__thumb--more { gap: .2rem; }
.pa-ordrow__thumb--placeholder { color: #c4b7ab; }
.pa-ordrow__thumb--more > span:first-child { font-size: .75rem; font-weight: 600; color: var(--pa-muted, #6f6a66); }
.pa-ordrow__thumb-word { font-size: .75rem; font-weight: 600; color: var(--pa-muted, #6f6a66); }

/* --- action buttons: flex-1, 4px radius on mobile ---------------- */
.pa-ordrow__actions { grid-area: actions; display: flex; gap: .75rem; }
.pa-ordrow__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	flex: 1 1 0;
	min-height: 46px;
	padding: .625rem 1rem;
	box-sizing: border-box;
	border-radius: 4px;
	border: 1px solid transparent;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.pa-ordrow__btn:active { transform: scale(.98); }
.pa-ordrow__btn .pa-icon { flex: 0 0 auto; width: 18px; height: 18px; }
.pa-ordrow__btn:focus-visible,
.pa-orderpage__pager-link:focus-visible { outline: 2px solid var(--pa-brand, #b4532a); outline-offset: 2px; }

/* "Track Order" is the same promise as the header Cart button, so it wears the
   same fill rather than the darker brand plum. */
.pa-ordrow__btn--primary { background: var(--pa-brand-btn, var(--pa-brand, #b4532a)); color: var(--pa-on-brand, #fff); }
.pa-ordrow__btn--primary:hover { background: var(--pa-brand, #8f4957); color: var(--pa-on-brand, #fff); }

/* Active card "View Details": brand outline on mobile. */
.pa-ordrow__btn--outline { background: transparent; border-color: var(--pa-brand, #b4532a); color: var(--pa-brand, #b4532a); }
.pa-ordrow__btn--outline:hover { background: color-mix(in srgb, var(--pa-brand, #b4532a) 6%, transparent); }

.pa-ordrow__btn--reorder { background: transparent; border-color: var(--pa-brand, #b4532a); color: var(--pa-brand, #b4532a); }
.pa-ordrow__btn--reorder:hover { background: color-mix(in srgb, var(--pa-brand, #b4532a) 6%, transparent); }

.pa-ordrow__btn--soft { background: #f0eded; border-color: var(--pa-line, #e9e4de); color: var(--pa-muted, #6f6a66); }
.pa-ordrow__btn--soft:hover { background: #e9e5e1; color: var(--pa-ink, #14110f); }

.pa-ordrow__btn-short { display: none; }
.pa-ordrow__btn--lg { min-height: 52px; padding: 0 2rem; font-size: 1rem; flex: 0 0 auto; }

/* --- pagination: centered muted link with down arrow ------------- */
.pa-orderpage__pager { display: flex; justify-content: center; gap: 2.5rem; padding-top: .5rem; }
.pa-orderpage__pager-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--pa-muted, #6f6a66);
	text-decoration: none;
	border-radius: 4px;
	transition: color .15s ease;
}
.pa-orderpage__pager-link:hover { color: var(--pa-brand, #b4532a); }
.pa-orderpage__pager-link--newer .pa-icon { transform: rotate(180deg); }

/* --- empty state -------------------------------------------------- */
.pa-orderpage__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 3rem 1.5rem;
	background: var(--pa-surface, #fff);
	border: 1px solid var(--pa-line, #e9e4de);
	border-radius: 12px;
	text-align: center;
}
.pa-orderpage__empty-icon { color: #c4b7ab; line-height: 1; display: flex; }
.pa-orderpage__empty-msg { margin: 0; font-size: 1rem; color: var(--pa-muted, #6f6a66); max-width: 32ch; }

/* === Very small phones: stack the buttons ======================= */
@media (max-width: 379px) {
	.pa-ordrow__actions { flex-direction: column; }
}

/* === Tablet / desktop (768px+) — desktop comp arrangement ======= */
@media (min-width: 768px) {
	.pa-orderpage { gap: 2rem; padding-top: .75rem; padding-bottom: 3rem; }

	.pa-orderpage__header { display: flex; flex-direction: column; gap: .5rem; }
	.pa-orderpage__title {
		margin: 0;
		font-family: var(--pa-font-display, var(--pa-font));
		font-size: clamp(1.75rem, 2.6vw, 2rem);
		font-weight: 700;
		letter-spacing: -.02em;
		line-height: 1.15;
		color: var(--pa-ink, #14110f);
	}
	.pa-orderpage__sub { margin: 0; font-size: 1rem; color: var(--pa-muted, #6f6a66); }

	/* Both section headings get the comp's bottom rule. */
	.pa-orderpage__section { gap: 1rem; }
	.pa-orderpage__section-sub { display: none; }
	.pa-orderpage__heading {
		font-size: 1.5rem;
		padding-bottom: .5rem;
		border-bottom: 1px solid var(--pa-line, #e9e4de);
	}

	/* Shared desktop card chrome: 12px radius, no head divider. */
	.pa-ordrow { border-radius: 12px; padding: 1.25rem 1.5rem; box-shadow: var(--pa-shadow-sm, 0 1px 2px rgba(20,17,15,.06)); }
	.pa-ordrow__head,
	.pa-ordrow__price { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

	/* Active order: roomy card with a light brand accent bar. */
	.pa-ordrow--active { padding: 1.5rem; padding-left: calc(1.5rem + 4px); row-gap: 1rem; }
	.pa-ordrow--active::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 4px;
		background: color-mix(in srgb, var(--pa-brand, #b4532a) 62%, #fff);
		border-radius: 12px 0 0 12px;
	}

	.pa-ordrow__num { font-size: .875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pa-muted, #6f6a66); }
	.pa-ordrow__badge { border-radius: 6px; font-size: .75rem; }
	.pa-ordrow__date { font-size: .875rem; }
	.pa-ordrow__time { display: inline; }
	.pa-ordrow--active .pa-ordrow__total { color: var(--pa-ink, #14110f); }
	.pa-ordrow__total { font-size: 1.25rem; font-weight: 600; }
	.pa-ordrow__count { text-transform: capitalize; }

	.pa-ordrow__thumb { border-radius: 6px; }
	.pa-ordrow__thumb-word { display: none; }

	.pa-ordrow__actions { justify-content: flex-start; margin-top: .25rem; }
	.pa-ordrow__btn { flex: 0 0 auto; min-width: 150px; min-height: 48px; padding: .5rem 1.5rem; border-radius: 8px; }

	/* Active "View Details" becomes a neutral outline on desktop. */
	.pa-ordrow__btn--outline { border-color: color-mix(in srgb, var(--pa-muted, #6f6a66) 55%, #fff); color: var(--pa-ink, #14110f); }
	.pa-ordrow__btn--outline:hover { background: #f0eded; }

	/* History: card rows — meta left, price + text links right. */
	.pa-ordrow--history {
		grid-template-areas: "head price actions";
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		column-gap: 1.5rem;
		transition: background .15s ease;
	}
	.pa-ordrow--history:hover { background: var(--pa-canvas, #f6f3ef); }
	.pa-ordrow--history .pa-ordrow__thumbs { display: none; }
	.pa-ordrow--history .pa-ordrow__actions { gap: .5rem; margin-top: 0; }
	.pa-ordrow--history .pa-ordrow__btn {
		min-width: 0;
		min-height: 0;
		padding: .5rem 1rem;
		border: 0;
		background: none;
		border-radius: 6px;
		font-size: .75rem;
		font-weight: 600;
	}
	.pa-ordrow--history .pa-ordrow__btn:active { transform: none; }
	.pa-ordrow--history .pa-ordrow__btn--reorder { color: var(--pa-brand, #b4532a); }
	.pa-ordrow--history .pa-ordrow__btn--reorder:hover { background: color-mix(in srgb, var(--pa-brand, #b4532a) 10%, transparent); }
	.pa-ordrow--history .pa-ordrow__btn--reorder .pa-icon { display: none; }
	.pa-ordrow--history .pa-ordrow__btn--soft { color: var(--pa-muted, #6f6a66); background: none; }
	.pa-ordrow--history .pa-ordrow__btn--soft:hover { color: var(--pa-ink, #14110f); background: #f0eded; }
	.pa-ordrow--history .pa-ordrow__btn-long { display: none; }
	.pa-ordrow--history .pa-ordrow__btn-short { display: inline; }
}

/* === Orders screen: full-width single-column account content ======
 * The account area normally keeps a 240px sidebar track at 768px+ and an
 * 860px content cap at 1024px+. The orders design is a single wide column,
 * so the orders screen (body.pa-orders-screen) flattens both. =========== */
body.pa-orders-screen .woocommerce { display: block; }
body.pa-orders-screen .woocommerce-MyAccount-content { max-width: none; }

/* Orders screen: page.php prints <h1 class="pa-page__title">the_title()</h1>,
   which WooCommerce rewrites to "Orders" on this endpoint. That would
   duplicate the "Your Orders" heading from the orders template, so hide it
   on this screen only. */
body.pa-orders-screen .pa-page__title { display: none; }

/* ---------------------------------------------------------------------------
 * Confirm-email notice - per provided HTML comps
 *
 * WooCommerce core prints this notice as:
 *   <div class="woocommerce-info">
 *     <a class="woocommerce-Button button" href="...">Confirm email address</a>
 *     Confirm your email address to check for past orders...
 *   </div>
 *
 * The copy is a bare text node (an anonymous flex item), so only the wrapper
 * and the button are targetable. The icon is drawn with pseudo-elements and a
 * mask so it still follows --pa-brand instead of hardcoding a hex.
 *
 * Scoped to the orders screen, so notices elsewhere keep the theme's styling.
 * The comps' dismiss "X" is deliberately not faked: CSS alone cannot make it
 * actually dismiss, and a dead control is worse than none.
 * ------------------------------------------------------------------------- */

body.pa-orders-screen .woocommerce-info {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1rem 1rem 4rem;
	border: 1px solid var(--pa-line);
	border-radius: 8px;
	background: var(--pa-surface);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--pa-brand) 5%, transparent);
	color: var(--pa-ink-2);
	font-size: .875rem;
	line-height: 1.5;
}

/* Mobile comp: circular brand-tinted icon chip. */
body.pa-orders-screen .woocommerce-info::before {
	content: "";
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pa-brand) 10%, transparent);
}

/* Mail glyph, masked so it inherits the brand token. */
body.pa-orders-screen .woocommerce-info::after {
	content: "";
	position: absolute;
	top: 1.625rem;
	left: 1.625rem;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--pa-brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Action: full-width under the copy on mobile, like the mobile comp. */
body.pa-orders-screen .woocommerce-info .button,
body.pa-orders-screen .woocommerce-info .woocommerce-Button {
	order: 1;
	flex: 1 1 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 0;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 4px;
	background: var(--pa-brand-btn, var(--pa-brand));
	box-shadow: none;
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

body.pa-orders-screen .woocommerce-info .button:hover,
body.pa-orders-screen .woocommerce-info .woocommerce-Button:hover {
	background: var(--pa-brand-ink);
	color: #fff;
}

@media (min-width: 768px) {
	/* Desktop comp: filled bar, inline icon, action pinned right. */
	body.pa-orders-screen .woocommerce-info {
		flex-wrap: nowrap;
		padding: 1rem 1.25rem 1rem 3.25rem;
		border-color: color-mix(in srgb, var(--pa-brand) 30%, #fff);
		background: color-mix(in srgb, var(--pa-brand) 65%, #fff);
		box-shadow: none;
		color: color-mix(in srgb, var(--pa-brand-ink) 72%, #000);
	}

	/* Chip gives way to a plain inline glyph on desktop. */
	body.pa-orders-screen .woocommerce-info::before {
		display: none;
	}

	body.pa-orders-screen .woocommerce-info::after {
		top: 50%;
		left: 1.25rem;
		width: 1.375rem;
		height: 1.375rem;
		margin-top: -.6875rem;
		background-color: color-mix(in srgb, var(--pa-brand-ink) 72%, #000);
	}

	body.pa-orders-screen .woocommerce-info .button,
	body.pa-orders-screen .woocommerce-info .woocommerce-Button {
		flex: 0 0 auto;
		min-height: 40px;
		margin-left: auto;
		border-radius: 8px;
		background: var(--pa-surface);
		color: var(--pa-brand-ink);
		font-size: .875rem;
	}

	body.pa-orders-screen .woocommerce-info .button:hover,
	body.pa-orders-screen .woocommerce-info .woocommerce-Button:hover {
		background: #fff;
		color: var(--pa-brand-ink);
	}
}

/* ================================================================== *
 * Homepage — desktop layout
 *
 * Mirrors the supplied comp's desktop structure: the full menu paired
 * with a sticky "Delivery Info" sidebar, and menu items as one stacked
 * row each.
 *
 * Layout properties only — no fonts, colours, radii or shadows are
 * declared here, so the theme's existing look is preserved. Everything
 * except the sidebar's default `display: none` is scoped to >= 1024px,
 * so the mobile homepage is byte-for-byte unchanged.
 * ================================================================== */

.pa-homeaside {
	display: none;
}

/*
 * "Delivery & hours" builds its facts from a <dl>, so .pa-fact__value is a <dd>
 * that keeps the browser's default 40px inline-start margin - every value sat
 * indented from its own label. The theme resets <dd> for .pa-totals__row,
 * .pa-confirm__facts and .pa-track__facts, but never for .pa-facts.
 * Applies at every width, because the bug was present at every width.
 */
.pa-facts .pa-fact__value {
	margin: 0;
}

@media (min-width: 1024px) {

	/*
	 * The comp's desktop shell is ~1200px wide. The theme caps every page at
	 * the 640px mobile app shell (--pa-max-w) and never widens it on desktop,
	 * so opt the homepage into the theme's own existing desktop token.
	 */
	body.home .pa-main {
		max-width: var(--pa-content-max);
	}

		.pa-view--home .pa-section {
		max-width: none;
		padding-inline: 0;
	}

	/* The sidebar card and the "Full menu" heading must share a top baseline. */
	.pa-homelayout .pa-section {
		padding-top: 0;
	}

	/* 3/12 sidebar + 9/12 menu, matching the comp's lg:grid-cols-12 split. */
	.pa-homelayout {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
		gap: var(--pa-6, 24px);
		align-items: start;
	}

	.pa-homeaside {
		display: block;
	}

	.pa-homelayout__main {
		min-width: 0;
	}

	/*
	 * Card follows the page. 96px is the offset the theme already uses for its
	 * other sticky desktop columns (.pa-product__summary, .pa-checkout__aside).
	 */
	.pa-homeaside__card {
		position: sticky;
		top: 96px;
	}

	/* In a narrow column the facts run vertically: icon left, value above label. */
	.pa-homeaside .pa-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.pa-homeaside .pa-fact {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--pa-3, 12px);
		align-items: start;
	}

	.pa-homeaside .pa-fact > svg {
		grid-row: 1 / span 2;
	}

	.pa-homeaside .pa-fact__value,
	.pa-homeaside .pa-fact__label {
		grid-column: 2;
	}

	/* Those facts now live in the sidebar, so drop the hero's inline copy. */
	.pa-view--home .pa-hero__facts {
		display: none;
	}

	/*
	 * The comp's hero is taller, with the copy vertically centred and flush
	 * left. A later theme rule sets `flex-direction: column` on this element,
	 * so the main axis is vertical: centring must come from justify-content,
	 * and align-items controls the HORIZONTAL axis. Using align-items: center
	 * here centres the copy horizontally, which the comp does not do.
	 */
	.pa-view--home .pa-hero--home {
		min-height: 400px;
		justify-content: center;
		align-items: flex-start;
		/* Theme insets the hero 16px; align its edges with the grid below. */
		margin-inline: 0;
		/* Theme leaves zero bottom margin, so the sidebar butted into the hero. */
		margin-bottom: calc(var(--pa-6, 24px) * 2);
	}

	/*
	 * The body is bottom-padded to suit the theme's bottom-aligned hero, which
	 * throws the copy off-centre once it is vertically centred.
	 */
	.pa-view--home .pa-hero--home .pa-hero__body {
		max-width: 32rem;
		padding-bottom: 0;
	}

	/* Filter bar: category pills left, "More filters" pinned right. */
	.pa-homelayout .pa-filters {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--pa-4, 16px);
	}

	.pa-homelayout .pa-filters__row {
		grid-column: 1 / -1;
	}

	.pa-homelayout .pa-rail--filters {
		grid-column: 1;
		min-width: 0;
	}

	.pa-homelayout .pa-filters__more {
		grid-column: 2;
	}

	/*
	 * One full-width row per item. This overrides the theme's own desktop
	 * rule that turns .pa-items into a multi-column auto-fill grid.
	 */
	.pa-homelayout .pa-items:not(.pa-items--scroller) {
		grid-template-columns: minmax(0, 1fr);
	}

	.pa-homelayout .pa-item--list .pa-item__link {
		align-items: center;
	}

	/* Larger square thumb; radius, cropping and ratio already come from the theme. */
	.pa-homelayout .pa-item--list .pa-item__media {
		width: 128px;
		height: 128px;
	}
}

/* ---------------------------------------------------------------------------
 * Home: "Contact & Location" card + full-width menu search.
 *
 * From the 2026-08-25 desktop and mobile templates. Layout and spacing only:
 * the card, facts, field and button components are the theme's own, so fonts,
 * colours, borders, radii and shadows are all inherited unchanged.
 * ------------------------------------------------------------------------- */

/* Contact details stack one per row at every width, as both templates show. */
.pa-homecontact__facts {
	grid-template-columns: minmax(0, 1fr);
}

.pa-homecontact__facts .pa-fact {
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--pa-3, 12px);
	align-items: start;
}

.pa-homecontact__facts .pa-fact > svg,
.pa-homecontact__facts .pa-fact > .pa-icon {
	grid-row: 1 / span 2;
}

.pa-homecontact__facts .pa-fact__value,
.pa-homecontact__facts .pa-fact__label {
	grid-column: 2;
}

/* "View on Map" sits under the details in both templates. */
.pa-homecontact__map {
	margin-top: var(--pa-5, 20px);
}

/*
 * Both templates give the menu search its own full-width row under the
 * "Full menu" heading, with the sort control on the line below.
 */
.pa-view--home .pa-field--search {
	flex: 1 1 100%;
}

@media (min-width: 1024px) {
	/* Desktop keeps contact in the sticky sidebar, so hide the inline copy. */
	.pa-homecontact--section {
		display: none;
	}

	/* Template spacing between the two sidebar cards. */
	.pa-homeaside .pa-homecontact {
		margin-top: var(--pa-6, 24px);
	}

	/*
	 * The sidebar now holds two cards, so the whole column sticks rather
	 * than just the first card. Offset matches .pa-product__summary and
	 * .pa-checkout__aside.
	 */
	.pa-homeaside {
		position: sticky;
		top: 96px;
	}

	.pa-homeaside__card {
		position: static;
	}
}


/* =====================================================================
 * HOME TEMPLATE v2.1
 *
 * Opening-status strip, delivery facts card, live order banner, the menu
 * filter row and the sticky desktop sidebar.
 *
 * Spacing and layout only, with one deliberate exception: the three new
 * components below (.pa-homestatus, the .pa-homefacts dividers and
 * .pa-liveorder) need a dot colour and a divider line. Both come from
 * existing tokens (--pa-success, --pa-muted, --pa-brand, --pa-line), so no
 * new font, palette, shadow or radius is introduced anywhere.
 * ================================================================== */

/* Hero photo: line its side inset up with the section content edge. */
@media (max-width: 1023.98px) {
	.pa-view--home .pa-hero--home {
		margin-inline: var(--pa-4, 16px);
	}

	/* The mobile comp moves the opening status below the photo. */
	.pa-view--home .pa-hero--home .pa-chipstat {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.pa-view--home .pa-hero--home {
		margin-inline: var(--pa-6, 24px);
	}
}

/* Opening status line under the photo. */
.pa-homestatus {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pa-2, 8px);
	margin: var(--pa-4, 16px) var(--pa-4, 16px) 0;
}

.pa-homestatus__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pa-success);
}

.pa-homestatus__dot.is-closed {
	background: var(--pa-muted);
}

.pa-homestatus__sep,
.pa-homestatus__hours {
	color: var(--pa-muted);
}

/* Delivery facts under the photo: three even columns with hairline dividers. */
.pa-homefacts {
	display: block;
	margin: var(--pa-3, 12px) var(--pa-4, 16px) 0;
}

.pa-homefacts .pa-facts {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	align-items: center;
	border: 1px solid var(--pa-line);
}

.pa-homefacts .pa-fact {
	justify-items: center;
	padding-inline: var(--pa-2, 8px);
	text-align: center;
}

.pa-homefacts .pa-fact + .pa-fact {
	border-inline-start: 1px solid var(--pa-line);
}

.pa-homefacts .pa-facts__note {
	margin: var(--pa-2, 8px) 0 0;
	text-align: center;
}

/* Live order banner. */
.pa-liveorder {
	display: flex;
	align-items: center;
	gap: var(--pa-3, 12px);
	margin: var(--pa-4, 16px) var(--pa-4, 16px) 0;
}

.pa-liveorder__pulse {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--pa-brand);
}

.pa-liveorder__body {
	flex: 1 1 auto;
	min-width: 0;
}

.pa-liveorder__title,
.pa-liveorder__meta {
	margin: 0;
}

.pa-liveorder__meta {
	color: var(--pa-muted);
}

.pa-liveorder__cta {
	flex: 0 0 auto;
}

/* Mobile top bar: centre the logo now that the search button is gone. */
.pa-topbar--center .pa-topbar__inner {
	justify-content: center;
	padding-inline: var(--pa-3, 12px);
}

/* Menu filters: search on its own row, then categories + More filters. */
.pa-view--home .pa-filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--pa-3, 12px);
	align-items: center;
}

.pa-view--home .pa-filters__row {
	grid-column: 1 / -1;
}

.pa-view--home .pa-rail--filters {
	grid-column: 1;
	min-width: 0;

	/*
	 * The rail bleeds 16px past its own box so chips can run to the screen
	 * edge, and .pa-rail__track pads the same 16px back in so the first chip
	 * still lines up with the content. In this two column row that bleed
	 * reaches under "More filters", so cancel both halves of the trick: the
	 * chips then start exactly at the search field's left edge instead.
	 */
	margin-inline: 0;
}

.pa-view--home .pa-rail--filters .pa-rail__track {
	padding-inline: 0;
}

.pa-view--home .pa-filters__more {
	grid-column: 2;
	justify-self: end;
}

@media (min-width: 1024px) {
	/* Desktop shows the same numbers in the sidebar card instead. */
	.pa-homestatus,
	.pa-homefacts {
		display: none;
	}

	/* Sticky needs somewhere to travel: without this the aside stretches to
	 * the full grid row height and can never move. */
	.pa-homeaside {
		align-self: start;
	}
}

/* ---------------------------------------------------------------------
 * Fixed bottom chrome: keep "View order" clear of the tab bar.
 *
 * Below 768px the Search tab is a raised 58px circle while the other tabs
 * are 44px. The bar aligns its items to flex-end, so that circle sets the
 * content box and the bar really measures 58 + 6 + 6 padding + 1 border =
 * 71px - but --pa-tabbar-h still said 58px. Every element that clears the
 * bar reads that token (cart bar, toast, sticky CTAs, and the page's own
 * bottom padding), so a 13px under-estimate put "View order" straight on
 * top of the tab bar. Correct the token for that band and all of them line
 * up at once. Above 768 the Search tab is hidden and the bar is 57px, so
 * the original value already holds there.
 *
 * Do not instead put a min-height floor on .pa-tabbar: that stretches the
 * bar to 71px + padding and makes the overlap worse.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
	:root {
		--pa-tabbar-h: 71px;
	}
}

/* An 8px cushion on both floating layers, so a taller web font or a
 * wrapped label can never close the gap completely. */
.pa-cartbar {
	bottom: calc(var(--pa-tabbar-h) + var(--pa-safe-bottom) + var(--pa-2, 8px));
}

.pa-toast {
	bottom: calc(var(--pa-tabbar-h) + var(--pa-cartbar-h) + var(--pa-safe-bottom) + var(--pa-3, 12px) + var(--pa-2, 8px));
}

/* =========================================================================
 * Round 12 fixes (2026-08-25).
 *
 * Layout and placement only, with three deliberate exceptions that need
 * colour declarations: the "More filters" popover surface, the footer
 * tokens, and the accent wiring. Every value comes from an existing theme
 * token, so no new colours or fonts are introduced.
 * ====================================================================== */

/* --- 1. Sidebar cards no longer stick (reverts the previous round). ----- */
@media (min-width: 1024px) {
	.pa-homeaside {
		position: static;
		top: auto;
	}
}

/* --- 2. Delivery facts card: centred three-up stack, no icons. ---------
 * facts_html() prints an <svg> before the value inside every .pa-fact and
 * the base .pa-fact is a one-column grid, so the icon claimed the first row
 * and pushed value + label side by side. The comp has no icons here. */
.pa-homefacts .pa-fact {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding-block: var(--pa-3, 12px);
}

.pa-homefacts .pa-fact > svg,
.pa-homefacts .pa-fact > .pa-icon {
	display: none;
}

.pa-homefacts .pa-fact__value,
.pa-homefacts .pa-fact__label {
	text-align: center;
}

/* --- 3. Live order card: match the section content edge at every width,
 * and keep a real bottom margin so the next card can never touch it. ---- */
.pa-liveorder {
	align-items: center;
	margin-block: var(--pa-4, 16px) var(--pa-4, 16px);
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.pa-liveorder {
		margin-inline: var(--pa-6, 24px);
	}
}

@media (min-width: 1024px) {
	.pa-liveorder {
		margin-inline: 0;
	}
}

/* --- 4. "More filters" opens as a popover instead of shifting the grid. */
.pa-filters .pa-filters__more {
	position: relative;
}

.pa-filters .pa-filters__more > .pa-filters__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + var(--pa-2, 8px));
	right: 0;
	left: auto;
	width: min(320px, calc(100vw - 2 * var(--pa-4, 16px)));
	max-height: min(70vh, 460px);
	overflow-y: auto;
	padding: var(--pa-4, 16px);
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r-lg);
	box-shadow: var(--pa-shadow-lg);
}

/* --- 5. Mobile: "More filters" sits under the categories, full width. -- */
@media (max-width: 767.98px) {
	.pa-view--home .pa-filters {
		grid-template-columns: minmax(0, 1fr);
	}

	.pa-view--home .pa-rail--filters,
	.pa-view--home .pa-filters__more {
		grid-column: 1 / -1;
	}

	.pa-view--home .pa-filters__more {
		justify-self: stretch;
	}

	.pa-filters .pa-filters__more > .pa-filters__panel {
		right: 0;
		left: 0;
		width: auto;
	}
}

/* --- 6. The mobile top bar scrolls away with the page. ----------------- */
@media (max-width: 1023.98px) {
	.pa-topbar {
		position: static;
	}
}

/* --- 7. Room for the on-screen keyboard. ------------------------------
 * app.js publishes --pa-kb from visualViewport. dvh alone does not shrink
 * for the keyboard on iOS, so the sheet is lifted by the measured height
 * instead of relying on the viewport unit. */
:root {
	--pa-kb: 0px;
}

.pa-sheet__panel {
	bottom: var(--pa-kb);
	max-height: calc(92dvh - var(--pa-kb));
}

/* --- 8. Footer colour becomes a token, defaulting to today's value. ---- */
.pa-footer {
	background: var(--pa-footer-bg, var(--pa-ink));
	color: var(--pa-footer-ink, #efe9e3);
}


/* =====================================================================
 * HOME + SHEET REFINEMENTS v2.3  (round 13)
 *
 * Colour work in this block is deliberate and was requested: the live-order
 * card, the "View on Map" button and the contact phone link now follow the
 * supplied desktop/mobile templates. Every value is derived from existing
 * tokens (--pa-brand, --pa-line, --pa-surface) or an optional new override
 * token, so the shop's main colour still drives the palette. No font,
 * radius or shadow is introduced anywhere.
 * ================================================================== */

/* --- 1. Facts card: hairline dividers exactly as the mobile template. ---
 * The template draws each divider as a 1px x 32px bar centred between the
 * columns (`w-px h-8 bg-outline-variant`), not as a full-height cell border.
 * Round 12 used border-inline-start, which ran the whole card height. */
.pa-view--home .pa-homefacts .pa-facts .pa-fact + .pa-fact {
	border-inline-start: 0;
}

.pa-view--home .pa-homefacts .pa-facts .pa-fact {
	position: relative;
	gap: var(--pa-1, 4px);
}

.pa-view--home .pa-homefacts .pa-facts .pa-fact + .pa-fact::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 1px;
	height: 32px;
	transform: translateY(-50%);
	background: var(--pa-line);
}

/* --- 2. Contact & Location: drop the inner tinted panel. ---------------
 * Both templates put the phone and address rows straight onto the card
 * surface. The theme's .pa-facts container added a second inset panel,
 * which is the extra padding visible on the live site. */
.pa-homecontact__card .pa-homecontact__facts {
	padding: 0;
	background: none;
	gap: var(--pa-3, 12px);
}

/* Contact details are body text in both templates, not brand-coloured
 * links. Keep the affordance on hover and keyboard focus only. */
.pa-homecontact__facts a {
	color: inherit;
	text-decoration: none;
}

.pa-homecontact__facts a:hover,
.pa-homecontact__facts a:focus-visible {
	color: var(--pa-brand);
	text-decoration: underline;
}

/* The card already carries its own padding, so the section wrapper does not
 * need to add another 24px band around it below 1024. */
@media (max-width: 1023.98px) {
	.pa-homecontact--section {
		padding-block: 0;
		margin-bottom: 0;
	}
}

/* The footer already reserves room for the fixed tab bar, so the main
 * column must not reserve it a second time. That double reservation is the
 * large empty band between the contact card and the footer. */
body.home .pa-main,
body.home .pa-viewport .pa-main {
	padding-bottom: var(--pa-6, 24px);
}

body.home.pa-has-cartbar .pa-main,
body.home.pa-has-cartbar .pa-viewport .pa-main {
	padding-bottom: calc(var(--pa-cartbar-h) + var(--pa-4, 16px));
}

/* --- 3. Live order card: template colours. -----------------------------
 * Template: `bg-primary-container text-on-primary` with a white "Track"
 * pill in the primary colour. The theme rendered the inverse: a near-white
 * card with a brand-filled pill. */
.pa-liveorder {
	border-color: transparent;
	background: var(--pa-liveorder-bg, var(--pa-brand));
	color: var(--pa-liveorder-ink, #fff);
}

.pa-liveorder .pa-liveorder__title,
.pa-liveorder .pa-liveorder__meta {
	color: inherit;
}

.pa-liveorder .pa-liveorder__meta {
	opacity: 0.9;
}

.pa-liveorder .pa-liveorder__pulse {
	background: var(--pa-liveorder-ink, #fff);
}

.pa-liveorder .pa-liveorder__cta {
	border-color: transparent;
	background: var(--pa-liveorder-ink, #fff);
	color: var(--pa-brand);
}

.pa-liveorder .pa-liveorder__cta:hover {
	background: var(--pa-liveorder-ink, #fff);
	color: var(--pa-brand-ink, var(--pa-brand));
}

/* --- 4. "View on Map": filled in the desktop sidebar, outlined on mobile,
 * exactly as the two templates specify. -------------------------------- */
.pa-homecontact--aside .pa-homecontact__map {
	border-color: transparent;
	background: var(--pa-brand-btn, var(--pa-brand));
	color: #fff;
}

.pa-homecontact--aside .pa-homecontact__map:hover {
	background: var(--pa-brand);
	color: #fff;
}

.pa-homecontact--section .pa-homecontact__map {
	border: 1px solid transparent;
	background: var(--pa-brand-btn, var(--pa-brand));
	color: #fff;
}

.pa-homecontact--section .pa-homecontact__map:hover {
	background: var(--pa-brand);
	color: #fff;
}

/* --- 5. Bottom sheets sit inset from the screen edge. ------------------
 * "View order" was flush to the left, right and bottom edges, which put the
 * close button in the very corner. The --pa-kb keyboard lift from round 12
 * is preserved and now stacks on top of the inset. */
.pa-sheet__panel {
	inset: auto var(--pa-3, 12px) calc(var(--pa-3, 12px) + var(--pa-kb, 0px));
	width: auto;
	max-width: min(var(--pa-max-w), calc(100vw - 2 * var(--pa-3, 12px)));
	max-height: calc(92dvh - var(--pa-kb, 0px) - var(--pa-3, 12px));
	border-radius: var(--pa-r-xl);
	transform: translateY(calc(100% + var(--pa-3, 12px)));
}

.pa-sheet__close {
	top: 12px;
	right: 12px;
}


/* =====================================================================
 * GILDED ROSE RETHEME  (round 14)
 *
 * Colour and type only. Layout, spacing, radii, component structure and
 * the hero image treatment are deliberately untouched: every value here
 * is either a design token or a face swap.
 * ================================================================== */

/* --- 1. Filled buttons -----------------------------------------------
 * The desktop comp fills buttons with primary-container (#d98695) and
 * deepens to primary (#8f4957) on hover. Ghost and soft buttons declare
 * their own background, so they are excluded from the hover rule. */
.pa-btn {
	font-family: var(--pa-font-ui, var(--pa-font));
	letter-spacing: 0.02em;
}

.pa-btn:not(.pa-btn--ghost):not(.pa-btn--soft):hover {
	background: var(--pa-brand-btn-ink, var(--pa-brand));
}
/* --- 2. Utility face on labels, navigation and chips --------------- */
.pa-chip,
.pa-nav__list,
.pa-fact__label,
.pa-facts__note,
.pa-footer__title,
.pa-tab__label,
.pa-pill {
	font-family: var(--pa-font-ui, var(--pa-font));
}

/* --- 3. Desktop navigation = label-caps (Plus Jakarta Sans) --------- */
@media (min-width: 1024px) {
	.pa-nav__list {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.12em;
	}

	.pa-dheader__name {
		color: var(--pa-brand);
		letter-spacing: -0.02em;
	}
}

/* --- 4. Brand mark: rose disc + serif wordmark (desktop comp) ------- */
.pa-topbar__mark {
	border-radius: var(--pa-r-pill);
	background: var(--pa-brand);
	color: var(--pa-on-brand);
	font-family: var(--pa-font-display, inherit);
	font-weight: 600;
}

.pa-topbar__title {
	font-family: var(--pa-font-display, inherit);
	color: var(--pa-brand);
	letter-spacing: -0.02em;
}

/* --- 5. Chips sit on the tinted rose surface ------------------------ */
.pa-chip {
	background: var(--pa-chip-bg, #ffe9eb);
	border-color: var(--pa-line);
	color: var(--pa-ink-2);
}
/* --- 6. Prices in primary ----------------------------------------- */
.pa-item__price,
.pa-line__price,
.pa-ordrow__price,
.pa-product__price,
.pa-psheet__price,
.pa-single__price,
.pa-stickybuy__price,
.pa-tile__price {
	color: var(--pa-brand);
}

/* --- 7. Footer is now a light tinted band --------------------------
 * .pa-footer itself already reads --pa-footer-bg / --pa-footer-ink.
 * These six descendants hardcoded light-on-dark values and would have
 * been illegible on the new surface. */
.pa-footer__name {
	color: var(--pa-brand);
}

.pa-footer__tagline,
.pa-footer__legal,
.pa-footer__title {
	color: var(--pa-ink-2);
}

.pa-footer__legal {
	border-top-color: var(--pa-line);
}

.pa-social__link {
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	color: var(--pa-ink);
}

/* =====================================================================
 * GILDED ROSE TYPE + INTERACTION PASS  (round 15)
 *
 * Applies the comps' type scale, per-element text colours and hover
 * states. Type and colour only: no box property is emitted anywhere in
 * this block (mechanically asserted at build time), so component
 * geometry, spacing, radii and the hero image treatment are untouched.
 *
 * Scale from the two Tailwind configs (font-* = family, text-* = size):
 *   display-lg      48/56  600  -0.01em  Caslon
 *   headline-lg     32/40  600           Caslon
 *   headline-lg-m   26/32  600           Caslon
 *   headline-md     24/32  700           Caslon
 *   headline-sm     20/28  600           Caslon
 *   title-md        20/28  500           Caslon
 *   body-lg         18/28  400           Caslon
 *   body-md         16/24  400           Caslon
 *   body-sm         14/20  400           Caslon
 *   label-caps      12/16  700  0.12em   Jakarta
 *   label-lg        14/20  600  0.05em   Jakarta
 *   label-md        12/16  600           Jakarta
 *   label-sm        11/14  500           Jakarta
 *
 * Colour aliases: on-surface -> --pa-ink, on-surface-variant ->
 * --pa-ink-2, primary -> --pa-brand, primary-container ->
 * --pa-brand-btn, surface-container -> --pa-chip-bg.
 * ================================================================== */

/* --- 1. Desktop header ---------------------------------------------- */
@media (min-width: 1024px) {
	.pa-dheader__strip {
		font-family: var(--pa-font-ui, var(--pa-font));
		font-size: 11px;
		line-height: 14px;
		font-weight: 500;
		color: var(--pa-ink-2);
	}

	.pa-dheader__name {
		font-size: 32px;
		line-height: 40px;
		font-weight: 600;
		letter-spacing: -0.05em;
	}

	.pa-nav__list a {
		color: var(--pa-ink-2);
		transition: color 0.2s ease;
	}

	.pa-nav__list a:hover,
	.pa-nav__list a:focus-visible {
		color: var(--pa-brand-btn, var(--pa-brand));
	}

	.pa-nav__list a[aria-current="page"],
	.pa-nav__list a.is-active,
	.pa-nav__list .current-menu-item > a {
		color: var(--pa-brand);
		font-weight: 700;
	}

	.pa-dcart {
		font-family: var(--pa-font-ui, var(--pa-font));
		background: var(--pa-brand-btn, var(--pa-brand));
		color: var(--pa-on-brand);
		transition: background-color 0.2s ease;
	}

	.pa-dcart:hover {
		background: var(--pa-brand);
		color: var(--pa-on-brand);
	}

	.pa-dcart__count {
		font-family: var(--pa-font-ui, var(--pa-font));
		background: var(--pa-on-brand);
		color: var(--pa-brand-btn, var(--pa-brand));
	}
}

/* --- 2. Icon buttons ------------------------------------------------ */
.pa-iconbtn {
	color: var(--pa-ink-2);
	transition: color 0.2s ease;
}

.pa-iconbtn:hover {
	color: var(--pa-brand-btn, var(--pa-brand));
}

/* --- 3. Mobile wordmark = headline-lg-mobile ------------------------
 * Type only. The mobile bar's structure, height and icon layout are
 * left exactly as they are. */
.pa-topbar__title {
	font-size: 26px;
	line-height: 32px;
	font-weight: 600;
	letter-spacing: -0.05em;
}

/* --- 4. Desktop hero copy ------------------------------------------
 * Scoped to >=1024 so the mobile hero keeps its own type ramp, and no
 * background, gradient, height or inset is touched on either. */
@media (min-width: 1024px) {
	.pa-hero--home .pa-hero__title {
		font-size: 48px;
		line-height: 56px;
		font-weight: 600;
		letter-spacing: -0.01em;
	}

	.pa-hero--home .pa-hero__sub,
	.pa-hero--home .pa-hero__tagline {
		font-size: 18px;
		line-height: 28px;
		font-weight: 400;
	}

	.pa-hero--home .pa-hero__status {
		font-family: var(--pa-font-ui, var(--pa-font));
		font-size: 11px;
		line-height: 14px;
		font-weight: 500;
	}
}

/* --- 5. Section headings: headline-md, headline-lg on desktop ------- */
.pa-section__title {
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
	.pa-section__title {
		font-size: 32px;
		line-height: 40px;
		font-weight: 600;
	}
}

/* --- 6. Card titles = title-md / headline-sm ------------------------ */
.pa-card__title {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: var(--pa-ink);
}

/* --- 7. Fact lists --------------------------------------------------
 * Desktop aside list is label-sm (11px, value in the utility face).
 * The mobile 3-up card is label-md (12px, both in the body face). */
.pa-facts__note {
	font-family: var(--pa-font);
	font-size: 11px;
	line-height: 14px;
	color: var(--pa-ink-2);
}

.pa-homeaside .pa-fact__value,
.pa-homecontact__facts .pa-fact__value {
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: 11px;
	line-height: 14px;
	font-weight: 500;
	color: var(--pa-ink);
}

.pa-homeaside .pa-fact__label,
.pa-homecontact__facts .pa-fact__label {
	font-family: var(--pa-font);
	font-size: 11px;
	line-height: 14px;
	font-weight: 400;
	color: var(--pa-ink-2);
}

.pa-homefacts .pa-fact__value {
	font-family: var(--pa-font);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: var(--pa-ink);
}

.pa-homefacts .pa-fact__label {
	font-family: var(--pa-font);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: var(--pa-ink-2);
}

/* --- 8. Live order card -------------------------------------------- */
.pa-liveorder .pa-liveorder__title {
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.pa-liveorder .pa-liveorder__meta {
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

.pa-liveorder .pa-liveorder__cta {
	font-family: var(--pa-font-ui, var(--pa-font));
}

@media (min-width: 1024px) {
	.pa-liveorder .pa-liveorder__title {
		font-size: 16px;
		line-height: 1.25;
		letter-spacing: normal;
	}
}

/* --- 9. Category chips = label-lg; active chip is on-surface ------- */
.pa-chip {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pa-chip:hover {
	background: color-mix(in srgb, var(--pa-chip-bg, #ffe9eb) 80%, var(--pa-canvas));
}

.pa-chip.is-active {
	background: var(--pa-ink);
	border-color: var(--pa-ink);
	color: var(--pa-on-brand);
}

.pa-chip.is-active:hover {
	background: var(--pa-ink);
}

/* --- 10. More filters ---------------------------------------------- */
.pa-filters__more,
.pa-filters__more > summary {
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--pa-ink-2);
	transition: color 0.2s ease;
}

.pa-filters__more > summary:hover {
	color: var(--pa-brand);
}

@media (min-width: 1024px) {
	.pa-filters__more,
	.pa-filters__more > summary {
		font-size: 16px;
		font-weight: 500;
		letter-spacing: normal;
	}
}

/* --- 11. Product rows ----------------------------------------------
 * Scoped away from the compact scroller tiles, which the comps do not
 * contain. Type and hover only; the card's own box is untouched. */
.pa-items:not(.pa-items--compact):not(.pa-items--scroller) .pa-item__name {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: var(--pa-ink);
}

.pa-items:not(.pa-items--compact):not(.pa-items--scroller) .pa-item__desc {
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--pa-ink-2);
}

.pa-items:not(.pa-items--compact):not(.pa-items--scroller) .pa-item__price {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

.pa-item__badge {
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pa-item__add {
	transition: transform 0.15s ease, background-color 0.2s ease;
}

.pa-item__add:hover {
	transform: scale(1.05);
}

.pa-item:hover {
	box-shadow: var(--pa-shadow-sm);
}

/* --- 12. Footer ---------------------------------------------------- */
.pa-footer__name {
	font-size: 26px;
	line-height: 32px;
	font-weight: 600;
	letter-spacing: -0.05em;
}

.pa-footer__list {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}

.pa-footer__list a {
	color: var(--pa-ink-2);
	transition: opacity 0.2s ease;
}

.pa-footer__list a:hover {
	opacity: 0.8;
	text-decoration-color: var(--pa-brand);
	text-underline-offset: 4px;
}

.pa-footer__title {
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.pa-footer__legal {
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

@media (max-width: 1023.98px) {
	.pa-footer__name {
		font-size: 20px;
		line-height: 28px;
		letter-spacing: normal;
	}
}

/* --- 13. Mobile status strip = label-md ---------------------------- */
.pa-homestatus {
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: var(--pa-ink-2);
}

/* --- 14. Menu search field = body-md ------------------------------- */
.pa-field--search input {
	font-family: var(--pa-font);
	font-size: 16px;
	line-height: 24px;
}

/* =========================================================================
 * Gilded Rose r15 – new / overriding rules
 * =========================================================================*/

/* -- Mobile hero open-status row ---------------------------------------- */
.pa-hero--home .pa-homestatus {
	display: flex;
	align-items: center;
	gap: var(--pa-2);
	margin-bottom: var(--pa-3);
	font-size: 0.875rem;
	color: var(--pa-ink-2);
}

.pa-hero--home .pa-homestatus__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pa-success);
	flex: none;
}

.pa-hero--home .pa-homestatus__dot.is-closed {
	background: var(--pa-danger);
}

/* -- Desktop header -------------------------------------------------------*/
@media (min-width: 1024px) {
	/* Hero: right-to-left gradient, white text */
	.pa-hero--home {
		background: linear-gradient(
			to right,
			var(--pa-brand-ink) 0%,
			rgba(114, 50, 64, 0.55) 50%,
			transparent 100%
		), var(--pa-brand-ink);
		color: #fff;
		min-height: min(72vh, 620px);
		align-items: flex-start;
	}

	.pa-hero--home .pa-hero__title { color: #fff; }
	.pa-hero--home .pa-hero__tagline { color: rgba(255,255,255,0.85); }
	.pa-hero--home .pa-homestatus { color: rgba(255,255,255,0.8); }
	.pa-hero--home .pa-homestatus__dot { background: #57e17a; }

	/* Header inner: 80px tall, content-max centred */
	.pa-dheader__inner {
		height: 80px;
		max-width: var(--pa-content-max);
		margin-inline: auto;
		padding-inline: var(--pa-6);
	}

	/* Nav links: label-caps, muted default, brand active */
	.pa-dnav__list {
		font-family: var(--pa-font-ui, inherit);
		font-size: 0.8125rem;
		text-transform: uppercase;
		letter-spacing: 0.07em;
		font-weight: 700;
	}

	.pa-dnav__list a {
		color: var(--pa-muted);
		display: flex;
		align-items: center;
		height: 80px;
		text-decoration: none;
		border-bottom: 2px solid transparent;
		transition: color 0.2s ease, border-color 0.2s ease;
	}

	.pa-dnav__list a:hover,
	.pa-dnav__list a.is-active,
	.pa-dnav__list a[aria-current] {
		color: var(--pa-brand);
		border-bottom-color: var(--pa-brand);
	}

	/* Desktop strip: border-bottom + ui font */
	.pa-dheader__strip {
		border-top: none;
		border-bottom: 1px solid var(--pa-line);
		font-family: var(--pa-font-ui, inherit);
		font-size: 0.8125rem;
	}

	/* Desktop footer: explicit light bg */
	.pa-footer {
		background: var(--pa-footer-bg);
		color: var(--pa-footer-ink);
		padding-bottom: var(--pa-8);
	}

	/* Homepage 3+9 grid layout */
	.pa-homelayout {
		display: grid;
		grid-template-columns: 280px 1fr;
		gap: var(--pa-6);
		align-items: start;
		max-width: var(--pa-content-max);
		margin-inline: auto;
		padding-inline: var(--pa-6);
	}

	.pa-homeaside {
		position: sticky;
		top: calc(var(--pa-dheader-h, 80px) + var(--pa-2));
	}

	/* Hide the contact section on desktop (it's in the aside) */
	.pa-homecontact--section {
		display: none;
	}

	/* 3-column product grid at 1280px */
	@media (min-width: 1280px) {
		.pa-homelayout__main .pa-items--list {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}

/* -- Item card: ensure position:relative so absolute add btn works ------ */
.pa-item {
	position: relative;
}

/* -- Product price: brand colour ---------------------------------------- */
.pa-item__price {
	color: var(--pa-brand);
	font-weight: 700;
}

/* -- Tab icon: nav indicator pill --------------------------------------- */
.pa-tab__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 28px;
	border-radius: var(--pa-r-pill);
	transition: background 0.2s ease;
}

.pa-tab.is-active .pa-tab__icon {
	background: var(--pa-brand-soft);
}


/* ================================================================= *
 * Gilded Rose r16 – Round 2 visual fixes
 * ================================================================= */

/* 1. Desktop header: canvas background (#fff8f7) */
@media (min-width: 1024px) {
	.pa-dheader {
		background: var(--pa-canvas);
	}
}

/* 2. Category rail: fully transparent (no tinted backdrop) */
.pa-rail {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* 3. Hero: consistent white-text-on-dark style (mobile + desktop) */
.pa-hero--home {
	color: #fff;
	background: linear-gradient(180deg,
		rgba(20, 17, 15, 0.10) 0%,
		rgba(20, 17, 15, 0.62) 100%
	), var(--pa-brand-ink);
	background-size: cover;
	background-position: center;
}

.pa-hero--home .pa-hero__title {
	color: #fff;
}

.pa-hero--home .pa-hero__tagline {
	color: rgba(255, 255, 255, 0.88);
}

/* 4. Hero CTA button: brand-btn (pink) like the template */
.pa-hero--home .pa-btn {
	background: var(--pa-brand-btn);
	color: var(--pa-brand-btn-ink);
	border: none;
}

.pa-hero--home .pa-btn:hover,
.pa-hero--home .pa-btn:focus-visible {
	background: var(--pa-brand);
	color: #fff;
}

/* 5. Store status: centred on mobile */
.pa-homestatus {
	justify-content: center;
	text-align: center;
}

/* …but left-aligned when shown inside the desktop hero */
@media (min-width: 1024px) {
	.pa-hero--home + .pa-homestatus,
	.pa-homestatus {
		justify-content: flex-start;
		text-align: left;
	}
}

/* 6. Aside + Contact cards: canvas background (#fff8f7) */
.pa-homeaside__card,
.pa-homecontact__card {
	background: var(--pa-canvas);
	border: 1px solid var(--pa-line);
}

/* 7. Aside sticky (override any conflicting rule) */
@media (min-width: 1024px) {
	.pa-homeaside {
		position: sticky;
		top: calc(var(--pa-dheader-h, 80px) + var(--pa-3, 12px));
		align-self: start;
	}
}

/* 8. Live order card: max-width aligned with hero photo */
.pa-liveorder {
	max-width: var(--pa-content-max);
	margin-inline: auto;
	box-sizing: border-box;
}

@media (max-width: 1023px) {
	.pa-liveorder {
		margin: var(--pa-4) var(--pa-4) 0;
	}
}

@media (min-width: 1024px) {
	.pa-liveorder {
		padding-inline: var(--pa-6);
		margin: var(--pa-4) auto 0;
	}
}

/* 9. Offer / sale price: ensure both use brand colour */
.price ins,
.price ins .woocommerce-Price-amount,
.pa-item__price ins,
.pa-tile__price ins,
.pa-product__price ins {
	color: var(--pa-brand);
	font-weight: 700;
	text-decoration: none;
}

.price del,
.price del .woocommerce-Price-amount,
.pa-item__price del,
.pa-tile__price del,
.pa-product__price del {
	color: var(--pa-muted);
	font-weight: 400;
	font-size: 0.82em;
	text-decoration: line-through;
}

/* 10. Bigger text in Contact & Location and Delivery Info cards */
.pa-homecontact__facts .pa-fact__value,
.pa-homeaside .pa-fact__value {
	font-size: 1.0rem;
	font-weight: 600;
}

.pa-homecontact__facts .pa-fact__label,
.pa-homeaside .pa-fact__label {
	font-size: 0.82rem;
}

/* 11. Yellow closed notice: hidden everywhere (also removed from PHP) */
.pa-notice--warn {
	display: none !important;
}

/* 12. Desktop: all homepage sections align with the hero photo edges */
@media (min-width: 1024px) {
	.pa-view--home > .pa-section,
	.pa-view--home > .pa-homestatus,
	.pa-view--home > .pa-homefacts,
	.pa-view--home > .pa-liveorder,
	.pa-view--home > .pa-homecontact--section {
		max-width: var(--pa-content-max);
		padding-inline: var(--pa-6);
		margin-inline: auto;
		box-sizing: border-box;
	}
}

/* 13. Product card + button: brand-btn color (pill add button) */
.pa-item__add,
.pa-item .pa-btn--add {
	background: var(--pa-brand-btn);
	color: var(--pa-brand-btn-ink);
}

/* 14. Desktop search button: hidden (removed from PHP, hidden via CSS too) */
.pa-dsearch {
	display: none !important;
}

/* ================================================================= *
 * End of Gilded Rose r16
 * ================================================================= */

/* ================================================================= *
 * Gilded Rose r17 - homepage sidebar + logo sizing
 * ================================================================= */

:root {
	/* Desktop header height. Referenced in several places, never declared. */
	--pa-dheader-h: 80px;
}

/*
 * The sticky sidebar introduced in this round was reverted in r18 below:
 * both cards now scroll with the page at every width.
 */

/*
 * Logo. wp_get_attachment_image() emits the file's intrinsic width/height, so
 * a square 150x150 upload rendered 150px tall and burst the 80px header open.
 * Cap the rendered box and let width follow the aspect ratio.
 */
.custom-logo,
.pa-dheader__brand .custom-logo,
.pa-topbar__brand .custom-logo {
	width: auto;
	height: auto;
	max-width: 150px;
	max-height: 36px;
	object-fit: contain;
}

@media (min-width: 1024px) {
	.pa-dheader__brand .custom-logo {
		max-width: 180px;
		max-height: 48px;
	}
}

/* Keep the brand row centred once the logo is a short wide box. */
.pa-dheader__brand,
.pa-topbar__brand {
	align-items: center;
}


/* ================================================================= *
 * Gilded Rose r18 - Round 3 visual fixes
 * ================================================================= */

/* 1. One source of truth for the category-button fill. .pa-chip already
 * painted itself with var(--pa-chip-bg, #ffe9eb), but the token was never
 * declared, so every chip fell back to that literal. The cards below have
 * to match the chips exactly, so declare it once and let both read it. */
:root {
	--pa-chip-bg: #ffe9eb;
}

/* 2. "Delivery Info" and "Contact & Location" never stick, at any width.
 * Earlier rounds declared sticky in four separate places, so the offsets
 * and the internal scrollbox are cleared here alongside the position. */
.pa-homeaside,
.pa-homeaside__card,
.pa-homecontact,
.pa-homecontact__card {
	position: static;
	top: auto;
	max-height: none;
	overflow: visible;
}

/* 3. Both cards take the category-button fill. */
.pa-homeaside__card,
.pa-homecontact__card {
	background: var(--pa-chip-bg);
	border: 1px solid var(--pa-line);
}

/* .pa-facts paints its own canvas panel, which would otherwise read as a
 * lighter block sitting on top of the new card fill. */
.pa-homeaside__card .pa-facts,
.pa-homecontact__card .pa-facts {
	background: none;
}

/* 4. Mobile delivery strip: same fill as the category buttons. */
.pa-homefacts .pa-facts {
	background: var(--pa-chip-bg);
}

/* 5. The add button on a product card is the same button as every other
 * filled button. .pa-btn resolves its label to --pa-on-brand, but
 * .pa-item__add is not a .pa-btn, so it kept the darker brand-btn-ink
 * glyph on an identical pink fill. */
.pa-item__add,
.pa-item .pa-btn--add {
	background: var(--pa-brand-btn);
	color: var(--pa-on-brand);
}

.pa-item__add:hover,
.pa-item__add:focus-visible,
.pa-item .pa-btn--add:hover {
	background: var(--pa-brand-btn-ink, var(--pa-brand));
	color: var(--pa-on-brand);
}

/* A confirmed add still turns green. */
.pa-item__add.is-done,
.pa-item__add.is-done:hover {
	background: var(--pa-success);
	color: var(--pa-on-brand);
}

/* 6. Mobile: the tab bar is fixed chrome, so it floated on top of the
 * search sheet. app.js now flags an open search sheet on <body>. */
body.pa-searching .pa-tabbar {
	display: none;
}

@media (min-width: 1024px) {

	/* 7. Align every homepage block with the hero photo. body.home .pa-main
	 * already centres the page at --pa-content-max and the hero clears its
	 * inset here, but .pa-homelayout re-applied that same max-width plus a
	 * 24px inline padding inside the already-capped column, so the menu and
	 * the sidebar sat narrower than the photo above them. */
	.pa-homelayout,
	.pa-liveorder {
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	.pa-view--home .pa-hero--home {
		margin-inline: 0;
	}

	/* The header gutter matches .pa-main's, so the logo lines up with the
	 * photo's left edge instead of sitting 8px inside it. */
	.pa-dheader__inner {
		padding-inline: 16px;
	}

	/* 8. A full shop name stays on one line above the photo. The copy column
	 * was capped at 32rem, so anything longer than a couple of words wrapped.
	 * Widen it and let the type scale with the viewport instead of wrapping. */
	.pa-view--home .pa-hero--home .pa-hero__body {
		max-width: min(92%, 52rem);
	}

	.pa-hero--home .pa-hero__title {
		white-space: nowrap;
		font-size: clamp(1.5rem, 2.9vw, 2.75rem);
		line-height: 1.15;
	}
}

/* ======================================================================
 * Gilded Rose r19 - "Do you deliver to me?" card
 *
 * One piece of markup, two comps. On a phone it is the compact "Deliver to
 * you?" card: heading, a row of input + button, and the answer underneath.
 * From 1024px it becomes the wide "Check delivery" band, with the heading and
 * blurb on the left and a pill search on the right.
 *
 * It takes the same fill as the category buttons and the two sidebar cards
 * (--pa-chip-bg), so it reads as one of the homepage's own cards rather than a
 * new kind of panel, and it uses the page's side margins at each width so it
 * lines up with the welcome photo above it.
 * ====================================================================== */

.pa-dcheck {
	position: relative;
	margin: var(--pa-4, 16px) var(--pa-4, 16px) 0;
	padding: var(--pa-3, 12px);
	background: var(--pa-chip-bg);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r, 14px);
}

/* The wide heading and its blurb belong to the desktop band only. */
.pa-dcheck__title--wide,
.pa-dcheck__lede {
	display: none;
}

.pa-dcheck__title {
	margin: 0 0 var(--pa-2, 8px);
	color: var(--pa-ink);
	font-size: 1.05rem;
	line-height: 1.3;
	font-weight: 700;
}

.pa-dcheck__search {
	display: flex;
	align-items: flex-start;
	gap: var(--pa-2, 8px);
}

.pa-dcheck__field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.pa-dcheck__pin {
	position: absolute;
	inset-inline-start: 10px;
	top: 50%;
	display: inline-flex;
	transform: translateY(-50%);
	color: var(--pa-muted);
	pointer-events: none;
}

.pa-dcheck .pa-dcheck__input {
	width: 100%;
	min-height: var(--pa-tap, 44px);
	padding: 0 36px;
	border: 1.5px solid var(--pa-line);
	border-radius: var(--pa-r, 14px);
	background: var(--pa-surface);
	color: var(--pa-ink);
	font: inherit;
}

.pa-dcheck .pa-dcheck__input::placeholder {
	color: var(--pa-muted);
}

.pa-dcheck__submit {
	flex: 0 0 auto;
}

.pa-dcheck__submit-wide {
	display: none;
}

/* "Use my location" sits on its own row under the search, so it never competes
 * with the input for width at any size. */
.pa-dcheck__tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2, 8px);
	margin-top: var(--pa-2, 8px);
}

.pa-dcheck__tools:empty {
	display: none;
}

/* A quiet ring while a lookup is in the air: the field is being typed in, so
 * nothing may move or reflow. */
.pa-dcheck__busy {
	position: absolute;
	inset-inline-end: 12px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid var(--pa-line);
	border-top-color: var(--pa-brand);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.pa-dcheck.is-busy .pa-dcheck__busy {
	opacity: 1;
	animation: pa-dcheck-spin 0.7s linear infinite;
}

@keyframes pa-dcheck-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pa-dcheck.is-busy .pa-dcheck__busy {
		animation-duration: 2.4s;
	}
}

/* --- Address suggestions ---------------------------------------------- */

.pa-dcheck__list {
	position: absolute;
	/*
	 * The category rail underneath also sits at --pa-z-rail (30). Equal
	 * z-index is settled by document order and the rail comes later, so it
	 * painted over the suggestions. Sit above the rail while staying below
	 * the header (40) and the sheet (90) so no other layer is disturbed.
	 */
	z-index: calc(var(--pa-z-rail, 30) + 5);
	inset-inline: 0;
	top: calc(100% + 4px);
	max-height: 262px;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	list-style: none;
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r, 14px);
	box-shadow: var(--pa-shadow-lg, 0 14px 30px -14px rgba(37, 24, 26, 0.35));
}

.pa-dcheck__list[hidden] {
	display: none;
}

.pa-dcheck__option {
	display: flex;
	align-items: center;
	gap: var(--pa-2, 8px);
	padding: 10px;
	border-radius: 10px;
	color: var(--pa-ink);
	font-size: 0.92rem;
	line-height: 1.35;
	cursor: pointer;
}

.pa-dcheck__option-pin {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--pa-muted);
}

.pa-dcheck__option:hover,
.pa-dcheck__option.is-active {
	background: var(--pa-brand-soft);
}

/* --- The answer ------------------------------------------------------- */

.pa-dcheck__result {
	margin-top: var(--pa-3, 12px);
}

.pa-dcheck__result[hidden] {
	display: none;
}

.pa-dcheck__msg {
	margin: 0;
	color: var(--pa-ink-2);
	font-size: 0.9rem;
	line-height: 1.4;
}

.pa-dcheck__msg--bad {
	color: var(--pa-danger);
}

.pa-dcheck__verdict {
	display: flex;
	align-items: flex-start;
	gap: var(--pa-2, 8px);
}

.pa-dcheck__verdict-icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 1px;
}

.pa-dcheck__verdict--yes .pa-dcheck__verdict-icon {
	color: var(--pa-success);
}

.pa-dcheck__verdict--no .pa-dcheck__verdict-icon {
	color: var(--pa-brand-ink);
}

.pa-dcheck__verdict-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.pa-dcheck__verdict-title {
	color: var(--pa-ink);
	font-weight: 700;
}

.pa-dcheck__verdict-address {
	color: var(--pa-ink-2);
	font-size: 0.86rem;
	line-height: 1.35;
}

/* The delivery details reuse the homepage facts strip. That strip paints its
 * own canvas panel, which on this card's fill would read as a lighter block
 * floating on top of it, so it becomes a proper inset panel instead. */
.pa-dcheck__facts {
	margin-top: var(--pa-2, 8px);
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
}

/* --- Collection offer, for addresses outside every area --------------- */

.pa-dcheck__pickup {
	display: grid;
	justify-items: start;
	gap: var(--pa-2, 8px);
	margin-top: var(--pa-3, 12px);
	padding: var(--pa-3, 12px);
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r, 14px);
}

.pa-dcheck__pickup-title {
	display: flex;
	align-items: center;
	gap: var(--pa-2, 8px);
	margin: 0;
	color: var(--pa-ink);
	font-weight: 700;
}

.pa-dcheck__pickup-address {
	margin: 0;
	color: var(--pa-ink-2);
	font-size: 0.9rem;
	line-height: 1.4;
}

.pa-dcheck__away {
	margin: var(--pa-2, 8px) 0 0;
	color: var(--pa-muted);
	font-size: 0.82rem;
}

/* --- Desktop: the wide band ------------------------------------------ */

@media (min-width: 1024px) {

	/* Zero side margin, because the homepage sections drop their inline
	 * padding at this width - so the band starts and ends exactly where the
	 * welcome photo above it does. */
	.pa-dcheck {
		display: grid;
		grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
		align-items: center;
		gap: var(--pa-6, 24px);
		margin: var(--pa-5, 20px) 0 var(--pa-6, 24px);
		padding: var(--pa-5, 20px) var(--pa-6, 24px);
		border-radius: var(--pa-r-lg, 20px);
	}

	.pa-dcheck__title--compact,
	.pa-dcheck__submit-compact {
		display: none;
	}

	.pa-dcheck__title--wide,
	.pa-dcheck__lede {
		display: block;
	}

	.pa-dcheck__submit-wide {
		display: inline;
	}

	.pa-dcheck__title {
		margin: 0;
		font-size: 1.5rem;
		line-height: 1.2;
	}

	.pa-dcheck__lede {
		margin: 6px 0 0;
		color: var(--pa-ink-2);
		font-size: 0.95rem;
		line-height: 1.45;
	}

	.pa-dcheck__search {
		align-items: center;
	}

	/* Second row of the band's right-hand column, under the input. Without an
	 * explicit column, grid auto-placement drops this under the heading on the
	 * left instead, which is what made the button look misplaced on desktop. */
	.pa-dcheck__tools {
		grid-column: 2;
		margin-top: var(--pa-3, 12px);
	}

	.pa-dcheck .pa-dcheck__input,
	.pa-dcheck .pa-dcheck__submit {
		min-height: 48px;
	}

	.pa-dcheck .pa-dcheck__input {
		padding: 0 42px;
		border-radius: var(--pa-r-pill, 999px);
	}

	.pa-dcheck__pin {
		inset-inline-start: 14px;
	}

	.pa-dcheck__list {
		border-radius: var(--pa-r-lg, 20px);
	}

	/* The answer belongs to the whole band, not to the input alone. */
	.pa-dcheck__result {
		grid-column: 1 / -1;
		margin-top: var(--pa-2, 8px);
	}
}

/* End of Gilded Rose r19 */

/* ================================================================== *
 * Account dashboard - Gilded Rose r21
 *
 * Mobile: a centred greeting above a 2x2 bento of destination cards.
 * Desktop (>=1024px): the asymmetric split - a 5/12 rail holding the
 * greeting, one compact row of tiles and the actions, beside a 7/12
 * feature photo.
 *
 * Scoped with two classes on purpose. Earlier account blocks in this
 * file (near lines 3574, 4687 and 5093) style the same single class
 * names, so a one-class rule here would not reliably win.
 * ================================================================== */

/* The dashboard is the only account screen that spans the full width. */
body.pa-account-home .woocommerce {
	grid-template-columns: minmax(0, 1fr);
}

body.pa-account-home .woocommerce-MyAccount-content {
	max-width: none;
}

.pa-account__live {
	margin-bottom: var(--pa-5, 20px);
}

.pa-account .pa-account__head {
	margin-bottom: 40px;
	padding: 0;
	border-bottom: 0;
	text-align: center;
}

/* These three belong to the desktop split only. */
.pa-account__eyebrow,
.pa-account__rule,
.pa-account__feature {
	display: none;
}

.pa-account .pa-account__greeting {
	margin: 0 0 var(--pa-2, 8px);
	font-family: var(--pa-font-display, inherit);
	font-size: 26px;
	line-height: 32px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--pa-ink);
}

.pa-account .pa-account__sub {
	margin: 0;
	font-size: 1rem;
	line-height: 24px;
	color: var(--pa-ink-2);
}

.pa-account .pa-tiles--bento {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pa-4, 16px);
	margin-bottom: 40px;
}

.pa-account .pa-tiles--bento .pa-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: 0;
	padding: 24px 16px;
	background: var(--pa-brand-soft, #fff0f1);
	border: 1px solid var(--pa-line);
	border-color: color-mix(in srgb, var(--pa-line) 45%, transparent);
	border-radius: 16px;
	box-shadow: 0 10px 30px -5px rgba(67, 52, 54, 0.04);
	color: var(--pa-ink);
	text-align: center;
	text-decoration: none;
	transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.pa-account .pa-tiles--bento .pa-tile:hover {
	background: var(--pa-surface-container, #fbe2e5);
	transform: none;
}

.pa-account .pa-tile__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0 0 var(--pa-4, 16px);
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-brand-btn, #d98695);
	color: var(--pa-on-brand, #fff);
	transition: transform 0.3s ease;
}

.pa-account .pa-tile:hover .pa-tile__icon {
	transform: scale(1.05);
}

.pa-account .pa-tile__label {
	flex: none;
	font-family: var(--pa-font-ui, inherit);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-ink);
}

.pa-account .pa-account__cta {
	display: grid;
	gap: var(--pa-4, 16px);
	justify-items: center;
}

/* Both actions are real buttons. Fills are handed to the button system's
 * own custom properties rather than painted on, so the soft log-out face
 * survives and the shared hover rule still deepens the filled one. */
.pa-account .pa-account__cta .pa-btn {
	--pa-btn-bg: var(--pa-brand-btn, #d98695);
	--pa-btn-fg: var(--pa-on-brand, #fff);
	width: 100%;
	min-height: 56px;
	border-color: transparent;
	border-radius: var(--pa-r-pill, 999px);
	font-family: var(--pa-font-ui, inherit);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: 0 10px 30px -5px rgba(67, 52, 54, 0.04);
}

.pa-account .pa-account__cta .pa-btn--soft {
	--pa-btn-bg: var(--pa-brand-soft, #fff0f1);
	--pa-btn-fg: var(--pa-brand, #8f4957);
	box-shadow: inset 0 0 0 1.5px var(--pa-line);
}

.pa-account .pa-account__cta .pa-btn--soft:hover {
	--pa-btn-bg: var(--pa-chip-bg, #ffe9eb);
}

.pa-account .pa-account__logout svg {
	transition: transform 0.2s ease;
}

.pa-account .pa-account__logout:hover svg {
	transform: translateX(-4px);
}

@media (min-width: 1024px) {
	/* The split needs the whole content column, not the shared 860px cap. */
	body.pa-account-home .woocommerce-MyAccount-content,
	.pa-account.pa-account--split {
		max-width: none;
	}

	.pa-account__grid {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 32px;
		align-items: center;
	}

	.pa-account__rail {
		grid-column: span 5;
		min-width: 0;
	}

	.pa-account__feature {
		display: block;
		grid-column: span 7;
		min-height: 600px;
		border-radius: 16px;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		box-shadow: var(--pa-shadow, 0 4px 20px -4px rgba(67, 52, 54, 0.12));
	}

	.pa-account .pa-account__head {
		margin-bottom: 0;
		text-align: start;
	}

	.pa-account .pa-account__eyebrow {
		display: block;
		margin-bottom: var(--pa-4, 16px);
		font-family: var(--pa-font-display, inherit);
		font-size: 20px;
		line-height: 28px;
		font-weight: 500;
		color: var(--pa-ink-2);
	}

	.pa-account .pa-account__greeting {
		font-size: 48px;
		line-height: 56px;
		letter-spacing: -0.01em;
	}

	.pa-account .pa-account__sub {
		max-width: 24rem;
	}

	.pa-account .pa-account__rule {
		display: block;
		width: 100%;
		max-width: 340px;
		height: 0;
		margin: var(--pa-6, 24px) 0;
		border: 0;
		border-top: 1px solid var(--pa-line);
		border-color: color-mix(in srgb, var(--pa-line) 50%, transparent);
	}

	/* Two per line, the way the phone lays them out. Five destinations in one
	   84px-wide row overflowed the rail and clipped the last label, so the
	   grid stays a grid at every width and simply gets roomier here. */
	.pa-account .pa-tiles--bento {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pa-3, 12px);
		max-width: 340px;
		overflow: visible;
	}

	.pa-account .pa-tiles--bento .pa-tile {
		width: auto;
		justify-content: center;
		padding: 20px 12px;
		border-radius: 12px;
	}

	.pa-account .pa-tile__icon {
		margin-bottom: var(--pa-2, 8px);
	}

	.pa-account .pa-tile__label {
		max-width: 100%;
		overflow: hidden;
		font-size: 11px;
		line-height: 14px;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--pa-ink-2);
	}

	.pa-account .pa-account__cta {
		max-width: 350px;
		gap: var(--pa-6, 24px);
		justify-items: stretch;
	}

	.pa-account .pa-account__cta .pa-btn {
		min-height: 48px;
	}
}

/* End of Gilded Rose r21 */

/* =====================================================================
 * GILDED ROSE r24
 * =====================================================================
 * 1. Cart line photos are locked to a fixed square.
 * 2. The "View order" sheet gets its horizontal gutter back.
 * ================================================================== */

:root {
	--pa-cart-thumb: 64px;
	--pa-sheet-gutter: 16px;
}

/* --- 1. Cart photos --------------------------------------------------
 * Line images were rendered at whatever size was uploaded, so a tall
 * portrait shot stretched its whole row and a small one left a gap.
 * Lock every cart thumbnail to a square and crop with object-fit. */
.pa-csheet .pa-line__img,
.pa-csheet .pa-line__img img,
.pa-cart .pa-line__img,
.pa-cart .pa-line__img img,
.pa-lines .pa-line__img,
.pa-lines .pa-line__img img {
	flex: 0 0 auto;
	width: var(--pa-cart-thumb);
	height: var(--pa-cart-thumb);
	min-width: var(--pa-cart-thumb);
	max-width: var(--pa-cart-thumb);
	border-radius: var(--pa-r-sm, 10px);
	object-fit: cover;
	object-position: center;
	background: var(--pa-skeleton, #f1e6e7);
}

@media (min-width: 900px) {
	:root {
		--pa-cart-thumb: 72px;
	}
}

/* --- 2. "View order" sheet gutter ------------------------------------
 * `.pa-lines` is given `padding: 0 16px` near the top of this stylesheet,
 * but a later list reset of equal specificity
 *
 *     .pa-lines, .pa-totals, .pa-list { margin: 0; padding: 0; }
 *
 * overwrote it. Source order decided the winner, so the item rows and the
 * Subtotal / Delivery rows sat hard against both edges of the panel while
 * the title and the buttons kept their inset - the text looked glued to
 * the sides. Two-class selectors win regardless of where they appear. */
.pa-csheet .pa-lines,
.pa-csheet .pa-totals,
.pa-csheet .pa-csheet__title,
.pa-csheet .pa-csheet__foot {
	padding-right: var(--pa-sheet-gutter);
	padding-left: var(--pa-sheet-gutter);
}

.pa-csheet .pa-totals {
	padding-bottom: var(--pa-2, 8px);
}

/* The last total already draws a rule above itself; keep that rule inside
 * the same gutter as the rows it summarises. */
.pa-csheet .pa-totals__row:last-child {
	margin-top: var(--pa-2, 8px);
}

/* The empty-cart state carries its own margin - match the gutter so the
 * sheet has one optical edge whether it holds items or not. */
.pa-csheet .pa-empty--sheet {
	margin-right: var(--pa-sheet-gutter);
	margin-left: var(--pa-sheet-gutter);
}

/* Same treatment for the search sheet, which shares the panel. */
.pa-sheet__content .pa-search {
	padding-right: var(--pa-sheet-gutter);
	padding-left: var(--pa-sheet-gutter);
}

/* =====================================================================
 * Checkout redesign
 *
 * Deliberately the last section in the file. The checkout screen has to win
 * against WooCommerce rules that were written earlier and carry ID or
 * multi-class selectors - `#place_order` (~line 988), `#payment .place-order`
 * (~1816), `.woocommerce .input-text` (~1574) and the table-to-card block at
 * ~4768. Being last means ties go our way, and the `.pa-co` scope adds the
 * extra weight needed for the rest. Nothing here leaks outside `.pa-co`.
 *
 * One DOM serves both layouts. On phones `.pa-co__aside`, `.pa-co__panel` and
 * `.pa-co__review` collapse with `display: contents`, which promotes the order
 * summary, the payment list and the reassurance line to grid items so `order`
 * can interleave them with the form cards - summary first, payment last. From
 * 1024px up they become real boxes again and form the sticky right column.
 * ================================================================== */

.pa-co {
	/* Same palette the design system uses, mapped onto the theme's tokens so
	 * a recoloured brand still flows through. */
	--pa-co-primary: var(--pa-brand, #8f4957);
	--pa-co-primary-container: var(--pa-brand-btn, #d98695);
	--pa-co-on-primary: var(--pa-on-brand, #ffffff);
	--pa-co-on-surface: var(--pa-ink, #25181a);
	--pa-co-on-surface-variant: var(--pa-ink-2, #534345);
	--pa-co-outline: var(--pa-muted, #857375);
	--pa-co-outline-variant: var(--pa-line, #d7c1c3);
	--pa-co-tertiary: var(--pa-success, #43655f);
	--pa-co-surface-lowest: #ffffff;
	--pa-co-surface-low: #fff0f1;
	--pa-co-container: #ffe9eb;
	--pa-co-container-highest: #f5dddf;
	--pa-co-surface-variant: #f5dddf;
	--pa-co-secondary: #665c58;
	--pa-co-secondary-container: #ebddd7;
	--pa-co-display-face: var(--pa-font, "Libre Caslon Text", Georgia, "Times New Roman", serif);
	--pa-co-ui-face: var(--pa-font-ui, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

	color: var(--pa-co-on-surface);
}

/* ---- Page head ---- */

.pa-co__head {
	margin-bottom: var(--pa-6);
}

.pa-co__display {
	margin: 0 0 var(--pa-2);
	font-family: var(--pa-co-display-face);
	font-size: 1.625rem;
	line-height: 1.23;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--pa-co-on-surface);
}

.pa-co__sub {
	margin: 0;
	font-family: var(--pa-co-display-face);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--pa-co-on-surface-variant);
}

/* ---- Phone jump links ----
 * Shortcuts to the three sections on this page, not a wizard: a single-page
 * checkout has no completed steps to report, so none are styled as done. */

.pa-co__steps {
	display: flex;
	align-items: flex-start;
	margin-bottom: var(--pa-6);
}

.pa-co__step {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pa-1);
	text-decoration: none;
	color: inherit;
}

.pa-co__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 16px;
	right: calc(-50% + 20px);
	left: calc(50% + 20px);
	height: 1px;
	background: var(--pa-co-primary);
}

.pa-co__stepnum {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-co-primary);
	color: var(--pa-co-on-primary);
	font-family: var(--pa-co-ui-face);
	font-size: 0.75rem;
	font-weight: 600;
}

.pa-co__steplabel {
	font-family: var(--pa-co-ui-face);
	font-size: 0.75rem;
	line-height: 1.33;
	font-weight: 600;
	color: var(--pa-co-primary);
	text-align: center;
}

/* ---- Grid ---- */

.pa-co .pa-co__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pa-6);
	align-items: start;
	max-width: none;
	margin: 0;
	padding: 0;
}

.pa-co__main {
	display: flex;
	flex-direction: column;
	gap: var(--pa-6);
	min-width: 0;
}

/* Phones: dissolve the right column so its parts can be re-ordered around
 * the form cards. Restored to real boxes at the two-column breakpoint. */
.pa-co__aside,
.pa-co__panel,
.pa-co .pa-co__review {
	display: contents;
}

/* The review wrapper is given a card of its own earlier in the file by an
 * id selector, so undoing it needs the id here too. Our card is the panel. */
.pa-co .pa-co__panel #order_review {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* ---- Cards ---- */

.pa-co__card {
	padding: var(--pa-5);
	border: 1px solid var(--pa-co-outline-variant);
	border-radius: 16px;
	background: var(--pa-co-surface-low);
	box-shadow: var(--pa-shadow-sm);
}

.pa-co__cardtitle {
	display: flex;
	align-items: center;
	gap: var(--pa-2);
	margin: 0 0 var(--pa-4);
	font-family: var(--pa-co-display-face);
	font-size: 1.25rem;
	line-height: 1.4;
	font-weight: 600;
	color: var(--pa-co-on-surface);
}

.pa-co__cardicon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--pa-co-primary-container);
}

/* Slots rendered by the delivery plugin bring their own card shell; flatten
 * it so it does not stack a second card inside ours. */
.pa-co .pa-co__card .pa-card {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.pa-co .pa-co__card .pa-co__ship + .pa-card {
	margin-top: var(--pa-4);
}

/* ---- Fields ---- */

.pa-co .pa-co__card .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--pa-4);
}

.pa-co .pa-co__card .form-row:last-child {
	margin-bottom: 0;
}

.pa-co .pa-co__card .form-row label {
	font-family: var(--pa-co-ui-face);
	font-size: 0.75rem;
	line-height: 1.33;
	font-weight: 600;
	letter-spacing: normal;
	color: var(--pa-co-on-surface-variant);
}

.pa-co .pa-co__card .form-row .required {
	color: var(--pa-co-primary);
	text-decoration: none;
}

.pa-co .pa-co__card .form-row .optional {
	color: var(--pa-co-outline);
}

.pa-co .pa-co__card input[type="text"],
.pa-co .pa-co__card input[type="email"],
.pa-co .pa-co__card input[type="tel"],
.pa-co .pa-co__card input[type="password"],
.pa-co .pa-co__card input[type="number"],
.pa-co .pa-co__card input[type="search"],
.pa-co .pa-co__card select,
.pa-co .pa-co__card textarea {
	width: 100%;
	height: 48px;
	min-height: 48px;
	padding: 0 var(--pa-4);
	border: 1px solid var(--pa-co-surface-variant);
	border-radius: 8px;
	background: var(--pa-co-surface-lowest);
	font-family: var(--pa-co-ui-face);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--pa-co-on-surface);
	transition: border-color 0.18s var(--pa-ease, ease), box-shadow 0.18s var(--pa-ease, ease);
}

.pa-co .pa-co__card textarea {
	height: auto;
	min-height: 88px;
	padding: var(--pa-3) var(--pa-4);
	resize: vertical;
}

.pa-co .pa-co__card input[type="text"]:focus,
.pa-co .pa-co__card input[type="email"]:focus,
.pa-co .pa-co__card input[type="tel"]:focus,
.pa-co .pa-co__card input[type="password"]:focus,
.pa-co .pa-co__card input[type="number"]:focus,
.pa-co .pa-co__card input[type="search"]:focus,
.pa-co .pa-co__card select:focus,
.pa-co .pa-co__card textarea:focus {
	outline: none;
	border-color: var(--pa-co-primary-container);
	box-shadow: 0 0 0 2px var(--pa-co-primary-container);
}

.pa-co .pa-co__card ::placeholder {
	color: var(--pa-co-outline);
	opacity: 1;
}

/* Country and state use select2, whose sizing is set with !important earlier
 * in this file, so matching it needs the same weapon. */
.pa-co .pa-co__card .select2-container .select2-selection--single {
	height: 48px !important;
	border: 1px solid var(--pa-co-surface-variant) !important;
	border-radius: 8px !important;
	background: var(--pa-co-surface-lowest);
}

.pa-co .pa-co__card .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: var(--pa-4) !important;
	line-height: 46px !important;
	color: var(--pa-co-on-surface);
}

.pa-co .pa-co__card .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px !important;
}

/* WooCommerce's form-billing.php prints its own "Billing details" h3, which
 * would repeat the card title. The shipping and notes headings are kept: one
 * carries the "ship to a different address" checkbox, the other titles the
 * notes group. */
.pa-co .pa-co__card .woocommerce-billing-fields > h3 {
	display: none;
}

/* Sub-headings inside the details card: "Ship to a different address" and the
 * order-notes group. */
.pa-co .pa-co__card h3 {
	margin: var(--pa-5) 0 var(--pa-3);
	font-family: var(--pa-co-display-face);
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 600;
	color: var(--pa-co-on-surface);
}

.pa-co .pa-co__card #ship-to-different-address label,
.pa-co .pa-co__card .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var(--pa-2);
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pa-co-on-surface);
	cursor: pointer;
}

.pa-co .pa-co__card input[type="checkbox"],
.pa-co .pa-co__card input[type="radio"] {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	accent-color: var(--pa-co-primary);
}

/* ---- Delivery method cards ----
 * Shared by the WooCommerce shipping rates and by the plugin's ASAP /
 * scheduled / pickup fieldset, so both read as the same control. */

.pa-co__ship {
	margin: 0;
}

.pa-co__ship[hidden] {
	display: none;
}

.pa-co .pa-co__choices,
.pa-co .pa-choices {
	display: flex;
	flex-direction: column;
	gap: var(--pa-3);
	margin: 0;
	padding: 0;
	border: 0;
}

/* The shipping legend repeats the card title, so it is for screen readers
 * only. The timing legend is a real question and stays visible as the label
 * that separates the two groups of choices. */
.pa-co .pa-co__choices > legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pa-co .pa-choices__legend {
	float: none;
	width: auto;
	margin: 0 0 var(--pa-2);
	padding: 0;
	font-family: var(--pa-co-ui-face);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--pa-co-on-surface-variant);
}

.pa-co .pa-co__choice,
.pa-co .pa-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--pa-3);
	padding: var(--pa-4);
	border: 1px solid var(--pa-co-outline-variant);
	border-radius: 12px;
	background: var(--pa-co-surface-lowest);
	cursor: pointer;
	transition: background-color 0.18s var(--pa-ease, ease), border-color 0.18s var(--pa-ease, ease);
}

.pa-co .pa-co__choice:hover,
.pa-co .pa-choice:hover {
	background: var(--pa-co-container);
}

.pa-co .pa-co__choice:has(input:checked),
.pa-co .pa-choice:has(input:checked) {
	border-color: var(--pa-co-secondary);
	background: var(--pa-co-secondary-container);
}

.pa-co .pa-co__choice:focus-within,
.pa-co .pa-choice:focus-within {
	border-color: var(--pa-co-primary-container);
	box-shadow: 0 0 0 2px var(--pa-co-primary-container);
}

.pa-co .pa-co__choiceinput {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--pa-co-primary);
}

.pa-co__choicebody {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pa-co__choicetop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pa-3);
}

.pa-co .pa-choice__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pa-co__choicename,
.pa-co .pa-choice__label {
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	line-height: 1.43;
	font-weight: 600;
	color: var(--pa-co-on-surface);
}

.pa-co__choiceprice {
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pa-co-on-surface);
	white-space: nowrap;
}

.pa-co__choiceprice--free {
	color: var(--pa-co-tertiary);
}

.pa-co__choicemeta,
.pa-co .pa-choice__meta {
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	line-height: 1.43;
	font-weight: 400;
	color: var(--pa-co-on-surface-variant);
}

.pa-co__shipnone {
	margin: 0;
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	line-height: 1.43;
	color: var(--pa-co-on-surface-variant);
}

.pa-co__shippkg {
	margin: var(--pa-4) 0 var(--pa-2);
	font-family: var(--pa-co-ui-face);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--pa-co-on-surface-variant);
}

.pa-co__shippkg:first-child {
	margin-top: 0;
}

/* ---- Order summary ---- */

.pa-co__sumhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pa-3);
	list-style: none;
	cursor: pointer;
	font-family: var(--pa-co-display-face);
	font-size: 1.25rem;
	line-height: 1.4;
	font-weight: 600;
	color: var(--pa-co-on-surface);
}

.pa-co__sumhead::-webkit-details-marker {
	display: none;
}

.pa-co__sumaside {
	display: inline-flex;
	align-items: center;
	gap: var(--pa-2);
}

.pa-co__sumtotal {
	font-family: var(--pa-co-display-face);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--pa-co-primary);
	white-space: nowrap;
}

.pa-co__sumchev {
	display: inline-flex;
	color: var(--pa-co-on-surface-variant);
	transition: transform 0.3s var(--pa-ease, ease);
}

.pa-co__sum[open] .pa-co__sumchev {
	transform: rotate(180deg);
}

.pa-co__sumbody {
	margin-top: var(--pa-4);
	padding-top: var(--pa-4);
	border-top: 1px solid var(--pa-co-outline-variant);
}

.pa-co__panel .pa-progress {
	margin: 0;
}

/* ---- Order table ----
 * WooCommerce ships this as a real table and its checkout JS replaces the
 * element wholesale, so the markup stays a table and the rows are laid out
 * with flex instead. This also has to undo the phone table-to-card block
 * earlier in the file, which would otherwise inject `data-title` labels. */

.pa-co table.pa-co__table {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

.pa-co table.pa-co__table thead {
	display: none;
}

.pa-co table.pa-co__table tbody,
.pa-co table.pa-co__table tfoot {
	display: block;
	border: 0;
}

.pa-co table.pa-co__table tr {
	display: flex;
	align-items: center;
	gap: var(--pa-3);
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
}

/* `width: auto` is load-bearing. The phone table-to-card block earlier in the
 * file puts `width: 100%` on every cell, which as a flex item would make each
 * value cell demand the whole row and refuse to shrink. */
.pa-co table.pa-co__table th,
.pa-co table.pa-co__table td {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	font-weight: inherit;
}

.pa-co table.pa-co__table th::before,
.pa-co table.pa-co__table td::before {
	content: none;
	display: none;
}

.pa-co table.pa-co__table tbody.pa-co__items {
	display: flex;
	flex-direction: column;
	gap: var(--pa-4);
}

.pa-co table.pa-co__table tr.pa-co__item {
	align-items: center;
	gap: var(--pa-4);
}

.pa-co table.pa-co__table td.pa-co__itemmain {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--pa-4);
	flex: 1 1 auto;
	min-width: 0;
}

.pa-co__thumb {
	display: block;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border: 1px solid var(--pa-co-outline-variant);
	border-radius: 8px;
	background: var(--pa-co-container);
}

.pa-co__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

.pa-co__itemtext {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pa-co__itemname {
	display: block;
	overflow: hidden;
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	line-height: 1.43;
	font-weight: 600;
	color: var(--pa-co-on-surface);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pa-co__itemqty {
	display: block;
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	line-height: 1.43;
	font-weight: 400;
	color: var(--pa-co-on-surface-variant);
}

.pa-co table.pa-co__table td.pa-co__itemprice {
	flex: 0 0 auto;
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pa-co-on-surface);
	text-align: right;
	white-space: nowrap;
}

/* Totals. Styled on the row element rather than a helper class so rows other
 * plugins inject into the footer pick up the same treatment. */

.pa-co table.pa-co__table tfoot.pa-co__totals {
	margin-top: var(--pa-5);
	padding-top: var(--pa-5);
	border-top: 1px solid var(--pa-co-outline-variant);
}

.pa-co table.pa-co__table .pa-co__totals tr {
	justify-content: space-between;
	margin-bottom: var(--pa-3);
}

.pa-co table.pa-co__table .pa-co__totals tr:last-child {
	margin-bottom: 0;
}

.pa-co table.pa-co__table .pa-co__totals th {
	font-family: var(--pa-co-ui-face);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
	color: var(--pa-co-on-surface-variant);
}

.pa-co table.pa-co__table .pa-co__totals td {
	flex: 0 0 auto;
	font-family: var(--pa-co-ui-face);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 500;
	color: var(--pa-co-on-surface-variant);
	text-align: right;
	white-space: nowrap;
}

.pa-co table.pa-co__table .pa-co__row--total {
	margin-top: var(--pa-4);
	padding-top: var(--pa-4);
	border-top: 1px solid var(--pa-co-outline-variant);
}

.pa-co table.pa-co__table .pa-co__row--total th {
	font-family: var(--pa-co-display-face);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--pa-co-on-surface);
}

.pa-co table.pa-co__table .pa-co__row--total td {
	font-family: var(--pa-co-display-face);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--pa-co-primary);
}

/* ---- Payment ---- */

.pa-co .pa-co__cardtitle--pay {
	margin-top: var(--pa-5);
}

.pa-co #payment {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.pa-co #payment .wc_payment_methods {
	display: flex;
	flex-direction: column;
	gap: var(--pa-3);
	margin: 0 0 var(--pa-5);
	padding: 0;
	border: 0;
	list-style: none;
}

/* WooCommerce prints the radio as a *sibling* of the label, not inside it, so
 * the list item has to be the card. It wraps, which lets the gateway's
 * instruction panel drop onto its own full-width line underneath. */
.pa-co #payment .wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pa-3);
	margin: 0;
	padding: var(--pa-4);
	border: 1px solid var(--pa-co-outline-variant);
	border-radius: 12px;
	background: var(--pa-co-surface-lowest);
	list-style: none;
	transition: background-color 0.18s var(--pa-ease, ease), border-color 0.18s var(--pa-ease, ease);
}

.pa-co #payment .wc_payment_method:hover {
	background: var(--pa-co-container);
}

.pa-co #payment .wc_payment_method:has(input:checked) {
	border-color: var(--pa-co-secondary);
	background: var(--pa-co-secondary-container);
}

.pa-co #payment .wc_payment_method:focus-within {
	border-color: var(--pa-co-primary-container);
	box-shadow: 0 0 0 2px var(--pa-co-primary-container);
}

.pa-co #payment .wc_payment_method > input[type="radio"] {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	accent-color: var(--pa-co-primary);
}

.pa-co #payment .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: var(--pa-3);
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	line-height: 1.43;
	font-weight: 600;
	color: var(--pa-co-on-surface);
	cursor: pointer;
}

.pa-co #payment .wc_payment_method > label img {
	max-height: 24px;
	width: auto;
	margin: 0 0 0 auto;
	padding: 0;
	border-radius: 0;
}

.pa-co #payment .wc_payment_method .payment_box {
	flex: 0 0 100%;
	margin: var(--pa-1) 0 0;
	padding: var(--pa-3) var(--pa-4);
	border: 0;
	border-radius: 8px;
	background: var(--pa-co-surface-lowest);
	font-family: var(--pa-co-ui-face);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--pa-co-on-surface-variant);
}

.pa-co #payment .wc_payment_method .payment_box::before {
	display: none;
}

.pa-co #payment .wc_payment_method .payment_box p {
	margin: 0;
}

.pa-co #payment .wc_payment_method .payment_box p + p {
	margin-top: var(--pa-2);
}

/* ---- Submit ---- */

.pa-co #payment .place-order {
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.pa-co .woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 var(--pa-4);
	padding: 0;
	font-family: var(--pa-co-ui-face);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--pa-co-on-surface-variant);
}

.pa-co .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0;
}

.pa-co .woocommerce-terms-and-conditions-wrapper label {
	display: flex;
	align-items: flex-start;
	gap: var(--pa-2);
	font-size: inherit;
	font-weight: 400;
	line-height: 1.5;
	color: inherit;
	cursor: pointer;
}

.pa-co .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 1px 0 0;
	padding: 0;
	flex: 0 0 auto;
	accent-color: var(--pa-co-primary);
}

.pa-co #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pa-2);
	width: 100%;
	height: 56px;
	min-height: 56px;
	padding: 0 var(--pa-5);
	border: 0;
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-co-primary-container);
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	line-height: 1;
	font-weight: 600;
	letter-spacing: normal;
	color: var(--pa-co-on-primary);
	box-shadow: var(--pa-shadow-sm);
	cursor: pointer;
	transition: background-color 0.18s var(--pa-ease, ease), transform 0.15s var(--pa-ease, ease);
}

.pa-co #place_order:hover {
	background: var(--pa-co-primary);
	color: var(--pa-co-on-primary);
}

.pa-co #place_order:active {
	transform: scale(0.98);
}

.pa-co #place_order:focus-visible {
	outline: 2px solid var(--pa-co-primary);
	outline-offset: 2px;
}

.pa-co #place_order .pa-icon {
	flex: 0 0 auto;
}

.pa-co__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: var(--pa-4) 0 0;
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	line-height: 1.43;
	color: var(--pa-co-on-surface-variant);
}

.pa-co__editcart {
	margin: var(--pa-4) 0 0;
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	text-align: center;
}

/* ---- Phones: interleave the panel with the form cards ---- */

@media (max-width: 1023px) {

	/* The summary and the payment list each become their own card, matching
	 * the phone design, and `order` puts them either side of the form. */
	.pa-co .pa-co__sum,
	.pa-co #payment {
		padding: var(--pa-5);
		border: 1px solid var(--pa-co-outline-variant);
		border-radius: 16px;
		background: var(--pa-co-surface-low);
		box-shadow: var(--pa-shadow-sm);
	}

	.pa-co .pa-co__sum {
		order: -2;
	}

	.pa-co__panel .pa-progress {
		order: -1;
	}

	.pa-co .pa-co__cardtitle--pay {
		order: 1;
		margin: 0;
	}

	.pa-co #payment {
		order: 2;
	}

	.pa-co__secure {
		order: 3;
		margin-top: 0;
	}

	.pa-co__editcart {
		order: 4;
		margin-top: 0;
	}

	/* The submit button is pinned above the tab bar. Applied to the button
	 * itself, not its wrapper: the wrapper also holds the terms checkbox and
	 * the nonce, which belong in the flow. Being CSS-only it also survives
	 * the payment fragment being replaced on every totals refresh. */
	.pa-co #place_order {
		position: fixed;
		right: var(--pa-4);
		bottom: calc(var(--pa-tabbar-h, 58px) + var(--pa-safe-bottom, 0px) + var(--pa-3));
		left: var(--pa-4);
		z-index: 30;
		width: auto;
		box-shadow: 0 6px 20px rgba(67, 52, 54, 0.22);
	}

	/* Room for it, on top of the tab-bar clearance set earlier in the file. */
	body.woocommerce-checkout.pa-has-tabbar .pa-main {
		padding-bottom: calc(var(--pa-tabbar-h, 58px) + var(--pa-safe-bottom, 0px) + 104px);
	}
}

/* ---- Tablet: two-up name fields ---- */

@media (min-width: 768px) {

	.pa-co__display {
		font-size: 2rem;
		line-height: 1.25;
	}

	.pa-co__card {
		padding: var(--pa-6);
	}

	.pa-co .pa-co__card .woocommerce-billing-fields__field-wrapper,
	.pa-co .pa-co__card .woocommerce-shipping-fields__field-wrapper,
	.pa-co .pa-co__card .woocommerce-additional-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--pa-4);
	}

	.pa-co .pa-co__card .form-row-wide,
	.pa-co .pa-co__card .form-row-full,
	.pa-co .pa-co__card .notes {
		grid-column: 1 / -1;
	}

	/* City and postcode are wide by default in WooCommerce; the design pairs
	 * them. Done by id so the country locale rules stay untouched. */
	.pa-co .pa-co__card #billing_city_field,
	.pa-co .pa-co__card #billing_postcode_field,
	.pa-co .pa-co__card #shipping_city_field,
	.pa-co .pa-co__card #shipping_postcode_field {
		grid-column: auto;
	}
}

/* ---- Two columns ---- */

@media (min-width: 1024px) {

	.pa-co__steps {
		display: none;
	}

	.pa-co .pa-co__form {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--pa-8);
	}

	/* Back to real boxes: the right column is one sticky card again. */
	.pa-co__aside {
		display: block;
		min-width: 0;
	}

	.pa-co__panel {
		display: flex;
		flex-direction: column;
		gap: var(--pa-5);
		position: sticky;
		top: 96px;
		padding: var(--pa-6);
		border: 1px solid var(--pa-co-outline-variant);
		border-radius: 16px;
		background: var(--pa-co-surface-low);
		box-shadow: var(--pa-shadow-sm);
	}

	.pa-co .pa-co__review {
		display: block;
	}

	/* The header is a title here, not a control, and the running total is
	 * dropped because the totals rows below already show it. */
	.pa-co__sumhead {
		cursor: default;
	}

	.pa-co__sumtotal,
	.pa-co__sumchev {
		display: none;
	}

	.pa-co__sumbody {
		margin-top: var(--pa-4);
		padding-top: 0;
		border-top: 0;
	}

	/* Inside the panel these sit in normal flow, not as flex children, so
	 * they keep their own spacing. A rule separates order from payment. */
	.pa-co .pa-co__cardtitle--pay {
		margin: var(--pa-5) 0 var(--pa-4);
		padding-top: var(--pa-5);
		border-top: 1px solid var(--pa-co-outline-variant);
	}

	.pa-co__secure {
		margin-top: var(--pa-3);
	}

	.pa-co__editcart {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pa-co .pa-co__choice,
	.pa-co .pa-choice,
	.pa-co #payment .wc_payment_method > label,
	.pa-co #place_order,
	.pa-co__sumchev,
	.pa-co .pa-co__card input[type="text"],
	.pa-co .pa-co__card input[type="email"],
	.pa-co .pa-co__card input[type="tel"],
	.pa-co .pa-co__card select,
	.pa-co .pa-co__card textarea {
		transition: none;
	}

	.pa-co #place_order:active {
		transform: none;
	}
}

/* ===========================================================================
 * Checkout - validation, delivery timing, address autocomplete
 * ---------------------------------------------------------------------------
 * Added with the checkout behaviour pass. Everything is scoped to .pa-co so
 * none of it reaches the cart, the account screens or the homepage card that
 * shares some of these class names.
 * ======================================================================== */

/* ---- The error box after a failed submit ----------------------------------
 * WooCommerce's checkout script prepends its notice group as the FIRST CHILD
 * of form.checkout. That form is our grid, so the box claimed cell one and
 * pushed the details column into the right-hand track and the order summary
 * down into row two. That is the whole reason the page only looked shuffled
 * after a validation error. Span every column and sit ahead of both.
 */

.pa-co .pa-co__form > .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
	order: -1;
	margin: 0;
}

/* The shared notice rule earlier in the file lays these out as a flex row,
 * which puts several messages side by side. A checkout error is a list. */
.pa-co .woocommerce-NoticeGroup .woocommerce-error,
.pa-co > .woocommerce-error {
	display: block;
	margin: 0;
	padding: var(--pa-4);
	border: 1px solid #f3c7c2;
	border-left: 4px solid var(--pa-danger, #ba1a1a);
	border-radius: 12px;
	background: #ffdad6;
	color: #93000a;
	font-family: var(--pa-co-ui-face);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.pa-co .woocommerce-NoticeGroup .woocommerce-error > li,
.pa-co > .woocommerce-error > li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	list-style: none;
}

.pa-co .woocommerce-NoticeGroup .woocommerce-error > li + li,
.pa-co > .woocommerce-error > li + li {
	margin-top: 6px;
}

/* Drawn rather than an icon, so it cannot depend on markup we do not own. */
.pa-co .woocommerce-NoticeGroup .woocommerce-error > li::before,
.pa-co > .woocommerce-error > li::before {
	content: "!";
	position: absolute;
	top: 2px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pa-danger, #ba1a1a);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

.pa-co .woocommerce-NoticeGroup .woocommerce-error a,
.pa-co > .woocommerce-error a {
	color: inherit;
	text-decoration: underline;
}

/* ---- The fields that failed ----------------------------------------------
 * checkout.js marks the row, not the control, so each of these has to reach
 * back down into the row. The field rules earlier in the checkout section are
 * three classes and a type, hence the extra class here.
 */

.pa-co .pa-co__card .form-row.woocommerce-invalid label {
	color: #93000a;
}

.pa-co .pa-co__card .form-row.woocommerce-invalid input.input-text,
.pa-co .pa-co__card .form-row.woocommerce-invalid select,
.pa-co .pa-co__card .form-row.woocommerce-invalid textarea {
	border-color: var(--pa-danger, #ba1a1a);
	background: #fff6f5;
}

.pa-co .pa-co__card .form-row.woocommerce-invalid input.input-text:focus,
.pa-co .pa-co__card .form-row.woocommerce-invalid select:focus,
.pa-co .pa-co__card .form-row.woocommerce-invalid textarea:focus {
	outline: none;
	border-color: var(--pa-danger, #ba1a1a);
	box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.16);
}

/* Country and state are select2 widgets whose border is set with !important
 * further up the file, so matching it is the only way to recolour them. */
.pa-co .pa-co__card .form-row.woocommerce-invalid .select2-container .select2-selection--single {
	border-color: var(--pa-danger, #ba1a1a) !important;
}

/* ---- When should we deliver? ---------------------------------------------
 * The chooser is rendered into a plugin slot, so the shop manager can replace
 * it wholesale. These rules dress our fallback and any replacement that keeps
 * the same class names. The radios themselves reuse .pa-choice.
 */

.pa-co .pa-when .pa-when__time {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--pa-4);
	border: 1px dashed var(--pa-co-outline-variant);
	border-radius: 12px;
	background: var(--pa-co-surface-low);
}

/* The block is toggled with the hidden attribute, and a display value on the
 * element itself would quietly defeat it. */
.pa-co .pa-when .pa-when__time[hidden] {
	display: none;
}

.pa-co .pa-when .pa-choice[hidden] {
	display: none;
}

.pa-co .pa-when .pa-when__label {
	font-family: var(--pa-co-ui-face);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--pa-co-on-surface-variant);
}

.pa-co .pa-when input.pa-when__input {
	width: 100%;
	min-height: var(--pa-tap);
	padding: 10px 12px;
	border: 1px solid var(--pa-co-outline-variant);
	border-radius: 10px;
	background: var(--pa-co-surface-lowest);
	color: var(--pa-co-on-surface);
	font-family: var(--pa-co-ui-face);
	font-size: 1rem;
}

.pa-co .pa-when input.pa-when__input:focus {
	outline: none;
	border-color: var(--pa-co-primary);
	box-shadow: 0 0 0 3px rgba(143, 73, 87, 0.16);
}

/* ---- Address autocomplete -------------------------------------------------
 * Same suggestions the homepage delivery card uses, attached to the checkout
 * address field. The list overlays rather than pushing the form down, so the
 * row it belongs to becomes the positioning context.
 */

.pa-co .pa-co__card .form-row.pa-co__acrow {
	position: relative;
}

.pa-co .pa-co__ac {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 20;
	margin-top: 4px;
}

.pa-co .pa-co__ac[hidden] {
	display: none;
}

.pa-co .pa-co__aclist {
	max-height: 264px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--pa-co-outline-variant);
	border-radius: 12px;
	background: var(--pa-co-surface-lowest);
	box-shadow: 0 12px 28px rgba(37, 24, 26, 0.16);
}

.pa-co .pa-co__acoption {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--pa-co-on-surface);
	font-family: var(--pa-co-ui-face);
	font-size: 0.9375rem;
	line-height: 1.4;
	cursor: pointer;
}

.pa-co .pa-co__acoption.is-active,
.pa-co .pa-co__acoption:hover {
	background: var(--pa-co-container);
}

.pa-co .pa-co__acpin {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--pa-co-primary-container);
}

.pa-co .pa-co__acnote {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 6px 0 0;
	font-family: var(--pa-co-ui-face);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--pa-co-on-surface-variant);
}

.pa-co .pa-co__acnote[hidden] {
	display: none;
}

.pa-co .pa-co__acnote--yes {
	color: var(--pa-co-tertiary);
}

.pa-co .pa-co__acnote--no {
	color: #93000a;
}

.pa-co .pa-co__pickup-warning {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid #f0b8b8;
	border-radius: 12px;
	background: #fff1f1;
	color: #93000a;
	font-family: var(--pa-co-ui-face);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.45;
}

.pa-co .pa-co__pickup-warning[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.pa-co .pa-co__acoption {
		transition: none;
	}
}

/* End of Gilded Rose r24 */


/* =========================================================================
 * 25. Gilded Rose r25 - live order spacing, keyboard-safe bottom chrome
 * ====================================================================== */

/* --- 1. Live order card: keep a real gap under it. -----------------------
 * The homepage alignment pass re-declared this margin as
 * "var(--pa-4) var(--pa-4) 0", which quietly dropped the bottom margin an
 * earlier fix had added for exactly this reason. With nothing below it, the
 * card sat flush against the Delivery Info card and the full menu that
 * follow it, so the three read as one overlapping block. Declared last, and
 * as a longhand, so a later shorthand cannot silently undo it again. */
.pa-liveorder {
	position: relative;
	z-index: 1;
	margin-bottom: var(--pa-5, 20px);
}

@media (min-width: 1024px) {
	.pa-liveorder {
		margin-bottom: var(--pa-6, 24px);
	}
}

/* --- 2. Mobile keyboard: stand the bottom bars down. ---------------------
 * .pa-tabbar and .pa-cartbar are fixed to the layout viewport, and mobile
 * browsers do not shrink that viewport when the keyboard opens. Both bars
 * stayed pinned behind the keyboard while every rule that reserves room for
 * them carried on reserving it, which is what shoved the page around and
 * left a dead band under the field being typed into.
 *
 * app.js already measures the keyboard to position the search sheet; it now
 * also sets .pa-kb-open on <body>. Zeroing the two height tokens here
 * collapses every calc() that clears the bars, without editing any of
 * them, and both bars come straight back when the keyboard closes. */
body.pa-kb-open {
	--pa-tabbar-h: 0px;
	--pa-cartbar-h: 0px;
}

body.pa-kb-open .pa-tabbar,
body.pa-kb-open .pa-cartbar {
	display: none;
}

/* The checkout's own pinned Place order button is genuinely useful while
 * typing, so it rides above the keyboard instead of hiding behind it. */
body.pa-kb-open .pa-co #place_order {
	display: none;
}

@media (max-height: 520px) {
	.pa-co #place_order {
		position: static;
		width: 100%;
	}
}

/* End of Gilded Rose r25 */


/* ==========================================================================
   Gilded Rose r26
   One button colour everywhere, white labels on it, and block product media
   sized by the layout instead of by the uploaded file.
   ========================================================================== */

/* --- 1. WooCommerce and Gutenberg BLOCK buttons ---------------------------
 * Only two .wc-block selectors existed in this stylesheet, so every button
 * inside the Cart block, the Checkout block and the product grids was painted
 * by theme.json's button element instead of by the shop's button colour.
 * Selectors are doubled where the block stylesheets use their own single-class
 * rules, which wins on specificity without needing !important. */
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button.wc-block-components-button,
.wc-block-components-product-button__button.wc-block-components-product-button__button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-grid__product-add-to-cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--pa-tap, 44px);
	border: 0;
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-brand-btn);
	color: var(--pa-on-brand, #fff);
	font-family: var(--pa-font-ui, inherit);
	font-weight: 700;
	text-decoration: none;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-components-button.wc-block-components-button:hover,
.wc-block-components-product-button__button.wc-block-components-product-button__button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-grid__product-add-to-cart .button:hover {
	background: var(--pa-brand-btn-ink, var(--pa-brand));
	color: var(--pa-on-brand, #fff);
}

/* Quantity steppers are chrome, not actions, so they stay unfilled. */
.wc-block-components-quantity-selector__button.wc-block-components-quantity-selector__button {
	min-height: 0;
	background: transparent;
	color: var(--pa-ink, #25181a);
	font-weight: 600;
}

/* --- 2. Block product media ----------------------------------------------
 * Block grids print the image at whatever ratio was uploaded, which is why a
 * row of pastries came out at four different heights. Every card now crops to
 * one ratio and the tile decides the size, not the file. */
.wc-block-grid__product-image,
.wc-block-components-product-image,
.wp-block-woocommerce-product-image {
	display: block;
	overflow: hidden;
	border-radius: var(--pa-r, 14px);
}

.wc-block-grid__product-image img,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.wc-block-product-template img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--pa-r, 14px);
}

/* Cart block line items keep the square thumbnail the theme uses elsewhere. */
.wc-block-cart-item__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--pa-r-sm, 10px);
}

/* --- 3. Active order card ------------------------------------------------
 * The Track pill was a white chip. It is the same filled button as the rest of
 * the theme now; a hairline ring keeps it legible on the brand-coloured card. */
.pa-liveorder .pa-liveorder__cta {
	background: var(--pa-brand-btn);
	color: var(--pa-on-brand, #fff);
	border-color: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

.pa-liveorder .pa-liveorder__cta:hover,
.pa-liveorder .pa-liveorder__cta:focus-visible {
	background: var(--pa-brand-btn-ink, var(--pa-brand));
	color: var(--pa-on-brand, #fff);
}

/* --- 4. White labels on the button colour --------------------------------
 * Anything filled with the button colour carries a white label. Ghost, soft
 * and outlined buttons are untouched. */
.pa-searchform__submit,
.pa-item__add,
.pa-item .pa-btn--add,
.pa-homecontact__map,
#place_order,
a.button:not(.wc-backward),
button.button:not([name="update_cart"]),
input.button,
.pa-btn:not(.pa-btn--ghost):not(.pa-btn--soft):not(.pa-btn--outline) {
	color: var(--pa-on-brand, #fff);
}

/* End of Gilded Rose r26 */


/* ==========================================================================
   Gilded Rose r27 — cash on delivery
   ========================================================================== */

.pa-cash {
	display: grid;
	gap: var(--pa-2, 8px);
	margin: var(--pa-4, 16px) 0 0;
	padding: var(--pa-4, 16px);
	border: 1.5px solid var(--pa-line);
	border-radius: var(--pa-r, 14px);
	background: var(--pa-brand-soft, #fff0f1);
}

.pa-cash[hidden] {
	display: none;
}

.pa-cash__label {
	font-family: var(--pa-font-ui, inherit);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--pa-ink);
}

.pa-cash__row {
	display: flex;
	align-items: center;
	gap: var(--pa-2, 8px);
	padding: 0 var(--pa-3, 12px);
	border: 1.5px solid var(--pa-line);
	border-radius: var(--pa-r-sm, 10px);
	background: var(--pa-surface, #fff);
}

.pa-cash__symbol {
	font-weight: 700;
	color: var(--pa-muted);
}

.pa-cash .pa-cash__input {
	width: 100%;
	min-height: var(--pa-tap, 44px);
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--pa-ink);
}

.pa-cash .pa-cash__input:focus {
	outline: 0;
}

.pa-cash__row:focus-within {
	border-color: var(--pa-brand);
}

.pa-cash__note,
.pa-cash__hint {
	margin: 0;
	font-family: var(--pa-font-ui, inherit);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--pa-ink-2, #534345);
}

.pa-cash__note:empty {
	display: none;
}

.pa-cash__note {
	font-weight: 600;
}

.pa-cash__hint {
	color: var(--pa-muted);
}

.pa-cash.is-short .pa-cash__row {
	border-color: var(--pa-danger, #ba1a1a);
}

.pa-cash.is-short .pa-cash__note {
	color: var(--pa-danger, #ba1a1a);
}

/* End of Gilded Rose r27 */

/* ==========================================================================
   Gilded Rose r28 - Place order pill
   ========================================================================== */

/*
 * .pa-btn__total carries margin-left:auto globally, which on a full-width pill
 * shoves the label to the far left edge. Inside the checkout submit the group
 * reads better centred with a hairline divider before the amount.
 */

.pa-co #place_order .pa-btn__total {
	margin-left: 0;
	padding-left: var(--pa-2);
	border-left: 1px solid rgba(255, 255, 255, 0.35);
	font-variant-numeric: tabular-nums;
}

.pa-co #place_order .pa-icon {
	flex: 0 0 auto;
}

/* End of Gilded Rose r28 */

/* ==================================================================
 * Gilded Rose r29 - combined order confirmation + live tracking.
 *
 * One screen, .pa-otrack, backs both the order-received page and the
 * account "Track order" screen. Colours are scoped custom properties that
 * read the global brand tokens, so the shop manager's button colour keeps
 * flowing through untouched.
 * ================================================================== */

.pa-otrack {
	--pa-otrack-primary: var(--pa-brand, #8f4957);
	--pa-otrack-lowest: var(--pa-surface, #ffffff);
	--pa-otrack-low: var(--pa-brand-soft, #fff0f1);
	--pa-otrack-high: #fbe2e5;
	--pa-otrack-highest: #f5dddf;
	--pa-otrack-ink: var(--pa-ink, #25181a);
	--pa-otrack-ink-2: var(--pa-ink-2, #534345);
	--pa-otrack-line: var(--pa-line, #d7c1c3);

	display: flex;
	flex-direction: column;
	gap: var(--pa-5, 20px);
	width: 100%;
	max-width: var(--pa-content-max, 1180px);
	margin-inline: auto;
	padding: var(--pa-4, 16px);
}

/* ---- Heading ---------------------------------------------------- */

.pa-otrack__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pa-2, 8px);
}

.pa-otrack__title {
	margin: 0;
	font-family: var(--pa-font, Georgia, serif);
	font-size: 1.625rem;
	line-height: 1.23;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--pa-otrack-ink);
}

.pa-otrack__pillrow {
	margin: 0;
}

.pa-otrack__lede {
	margin: 0;
	max-width: 60ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--pa-otrack-ink-2);
}

/* ---- Map card and the delivery-updates panel above it ----------- */

.pa-otrack__mapcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pa-otrack-line);
	border-radius: var(--pa-r-lg, 20px);
	background: var(--pa-otrack-lowest);
	box-shadow: 0 2px 10px rgba(37, 24, 26, 0.06);
}

.pa-otrack__update {
	display: flex;
	flex-direction: column;
	gap: var(--pa-2, 8px);
	padding: var(--pa-5, 20px);
	border-bottom: 1px solid var(--pa-otrack-line);
	background: var(--pa-otrack-low);
}

.pa-otrack__updatetitle {
	margin: 0;
	font-family: var(--pa-font, Georgia, serif);
	font-size: 1.125rem;
	line-height: 1.4;
	font-weight: 600;
	color: var(--pa-otrack-ink);
}

.pa-otrack__etavalue {
	font-variant-numeric: tabular-nums;
}

.pa-otrack__updatemeta {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--pa-otrack-ink-2);
}

.pa-otrack__note {
	display: flex;
	align-items: flex-start;
	gap: var(--pa-3, 12px);
	margin-top: var(--pa-2, 8px);
	padding: var(--pa-3, 12px);
	border: 1px solid var(--pa-otrack-line);
	border-radius: var(--pa-r-sm, 10px);
	background: var(--pa-otrack-highest);
}

.pa-otrack__note p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--pa-otrack-ink-2);
}

.pa-otrack__noteicon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--pa-otrack-primary);
}

.pa-otrack__courier {
	margin-top: var(--pa-2, 8px);
}

.pa-otrack__map {
	position: relative;
	height: 260px;
}

.pa-otrack__map .pa-map,
.pa-otrack__map .pa-slot--tracking_map {
	height: 100%;
	min-height: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.pa-otrack__map img,
.pa-otrack__map canvas {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Order status accordion ------------------------------------- */

.pa-otrack__status {
	overflow: hidden;
	border: 1px solid var(--pa-otrack-line);
	border-radius: var(--pa-r-lg, 20px);
	background: var(--pa-otrack-low);
}

.pa-otrack__statushead {
	display: flex;
	align-items: center;
	gap: var(--pa-3, 12px);
	padding: var(--pa-4, 16px) var(--pa-5, 20px);
	cursor: pointer;
	list-style: none;
}

.pa-otrack__statushead::-webkit-details-marker {
	display: none;
}

.pa-otrack__statushead:focus-visible {
	outline: 2px solid var(--pa-otrack-primary);
	outline-offset: -2px;
}

.pa-otrack__statuslead {
	display: inline-flex;
	align-items: center;
	gap: var(--pa-3, 12px);
	min-width: 0;
}

.pa-otrack__statusicon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--pa-otrack-primary);
}

.pa-otrack__statustitle {
	font-family: var(--pa-font, Georgia, serif);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--pa-otrack-ink);
}

.pa-otrack__statusnow {
	display: inline-flex;
	align-items: center;
	gap: var(--pa-2, 8px);
	min-width: 0;
	margin-left: auto;
}

.pa-otrack__statusdot {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: var(--pa-r-pill, 999px);
	box-shadow: inset 0 0 0 2px var(--pa-otrack-primary);
}

.pa-otrack__statusdot::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-otrack-primary);
}

.pa-otrack__statustext {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pa-otrack__statusstep {
	font-size: 1rem;
	line-height: 1.2;
	font-weight: 600;
	color: var(--pa-otrack-primary);
}

.pa-otrack__statussub {
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--pa-otrack-ink-2);
	opacity: 0.7;
}

.pa-otrack__statuschev {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--pa-otrack-ink-2);
	transition: transform 0.24s var(--pa-ease, ease);
}

.pa-otrack__status[open] .pa-otrack__statuschev {
	transform: rotate(180deg);
}

.pa-otrack__statusbody {
	padding: var(--pa-2, 8px) var(--pa-5, 20px) var(--pa-6, 24px);
}

/* Vertical timeline, reusing the shared .pa-timeline markup. */

.pa-otrack__statusbody .pa-timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pa-5, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-otrack__statusbody .pa-timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	gap: var(--pa-3, 12px);
	min-height: 24px;
	margin: 0;
	padding: 0;
}

.pa-otrack__statusbody .pa-timeline__step::before {
	content: "";
	position: absolute;
	top: 24px;
	bottom: calc(var(--pa-5, 20px) * -1);
	left: 11px;
	width: 2px;
	height: auto;
	background: var(--pa-otrack-highest);
}

.pa-otrack__statusbody .pa-timeline__step:last-child::before {
	display: none;
}

.pa-otrack__statusbody .pa-timeline__dot {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 0;
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-otrack-highest);
	color: var(--pa-on-brand, #ffffff);
}

.pa-otrack__statusbody .pa-timeline__step.is-done .pa-timeline__dot {
	background: var(--pa-otrack-primary);
}

.pa-otrack__statusbody .pa-timeline__step.is-current .pa-timeline__dot {
	background: var(--pa-otrack-lowest);
	box-shadow: inset 0 0 0 2px var(--pa-otrack-primary);
}

.pa-otrack__statusbody .pa-timeline__step.is-current .pa-timeline__dot::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-otrack-primary);
}

.pa-otrack__statusbody .pa-timeline__label {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--pa-otrack-ink-2);
}

.pa-otrack__statusbody .pa-timeline__step.is-done .pa-timeline__label {
	opacity: 0.6;
	text-decoration: line-through;
}

.pa-otrack__statusbody .pa-timeline__step.is-current .pa-timeline__label {
	color: var(--pa-otrack-primary);
	font-weight: 700;
	opacity: 1;
	text-decoration: none;
}

.pa-otrack__statusbody .pa-timeline__step:not(.is-done):not(.is-current) .pa-timeline__label {
	opacity: 0.4;
}

/* ---- Bottom cards ---------------------------------------------- */

.pa-otrack__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pa-4, 16px);
}

.pa-otrack__card {
	display: flex;
	flex-direction: column;
	padding: var(--pa-5, 20px);
	border: 1px solid var(--pa-otrack-line);
	border-radius: var(--pa-r-lg, 20px);
	background: var(--pa-otrack-low);
}

.pa-otrack__cardtitle {
	display: flex;
	align-items: center;
	gap: var(--pa-2, 8px);
	margin: 0 0 var(--pa-4, 16px);
	font-family: var(--pa-font, Georgia, serif);
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--pa-otrack-ink);
}

.pa-otrack__cardicon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--pa-otrack-primary);
}

/* Items */

.pa-otrack__lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-otrack__line {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--pa-3, 12px);
	padding: var(--pa-3, 12px) 0;
	border-bottom: 1px solid var(--pa-otrack-line);
}

.pa-otrack__line:first-child {
	padding-top: 0;
}

.pa-otrack__qty {
	padding: 2px 8px;
	border-radius: var(--pa-r-sm, 10px);
	background: var(--pa-otrack-high);
	color: var(--pa-otrack-primary);
	font-size: 0.75rem;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pa-otrack__linename {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	font-weight: 600;
	color: var(--pa-otrack-ink);
}

.pa-otrack__linemeta {
	font-size: 0.8125rem;
	line-height: 1.4;
	font-weight: 400;
	color: var(--pa-otrack-ink-2);
}

.pa-otrack__linemeta p {
	margin: 0;
}

.pa-otrack__lineprice {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--pa-otrack-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pa-otrack__totals {
	margin: var(--pa-4, 16px) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--pa-2, 8px);
}

.pa-otrack__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pa-3, 12px);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--pa-otrack-ink-2);
}

.pa-otrack__total > span:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pa-otrack__total--grand {
	margin-top: var(--pa-2, 8px);
	padding-top: var(--pa-3, 12px);
	border-top: 1px solid var(--pa-otrack-line);
}

.pa-otrack__total--grand > span:first-child {
	font-family: var(--pa-font, Georgia, serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--pa-otrack-ink);
}

.pa-otrack__total--grand > span:last-child {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--pa-otrack-primary);
}

/* Delivering to */

.pa-otrack__who {
	display: flex;
	align-items: flex-start;
	gap: var(--pa-3, 12px);
	margin-bottom: auto;
}

.pa-otrack__avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-otrack-high);
	color: var(--pa-otrack-primary);
}

.pa-otrack__whobody {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.pa-otrack__whoname {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	font-weight: 700;
	color: var(--pa-otrack-ink);
}

.pa-otrack__whorule {
	width: 32px;
	height: 1px;
	margin: 2px 0;
	background: var(--pa-otrack-line);
}

.pa-otrack__whoaddress,
.pa-otrack__whopay {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--pa-otrack-ink-2);
}

/*
 * The address is printed one part per line now instead of as a single
 * run-on string, so give the lines their own rhythm and let the street
 * stand out from the postcode and city under it.
 */
.pa-otrack__whoaddress {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.pa-otrack__addrline {
	display: block;
}

.pa-otrack__addrline--street {
	font-weight: 600;
	color: var(--pa-otrack-ink, currentColor);
}

.pa-otrack__whophone {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
}

.pa-otrack__whophone a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/*
 * The delivered and cancelled panels are always in the page now, with the
 * one that does not apply hidden, so that a delivered order can be shown
 * without a reload. A class that sets display would otherwise beat the
 * browser's own [hidden] rule and both panels would show at once.
 */
.pa-otrack__done[hidden],
.pa-otrack__map[hidden] {
	display: none;
}

.pa-otrack__done--cancelled .pa-otrack__doneicon {
	color: var(--pa-danger, #b3261e);
}

.pa-otrack__cardactions {
	display: flex;
	flex-direction: column;
	gap: var(--pa-3, 12px);
	margin-top: var(--pa-5, 20px);
}

/* ---- Wider screens --------------------------------------------- */

@media (min-width: 640px) {
	.pa-otrack__head {
		flex-flow: row wrap;
		align-items: center;
		column-gap: var(--pa-3, 12px);
	}

	.pa-otrack__lede {
		flex: 1 0 100%;
	}

	.pa-otrack__map {
		height: 340px;
	}
}

@media (min-width: 768px) {
	.pa-otrack {
		gap: var(--pa-6, 24px);
		padding: var(--pa-6, 24px);
	}

	.pa-otrack__title {
		font-size: 2rem;
		line-height: 1.25;
	}

	.pa-otrack__updatetitle {
		font-size: 1.25rem;
	}

	.pa-otrack__update,
	.pa-otrack__statusbody {
		padding-inline: var(--pa-6, 24px);
	}

	.pa-otrack__card {
		padding: var(--pa-6, 24px);
	}

	.pa-otrack__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pa-5, 20px);
	}

	.pa-otrack__map {
		height: 400px;
	}
}

@media (min-width: 1024px) {
	.pa-otrack__map {
		height: 450px;
	}

	.pa-otrack__card {
		padding: var(--pa-8, 32px);
	}

	.pa-otrack__cardactions {
		flex-direction: row;
	}

	.pa-otrack__cardactions .pa-btn {
		flex: 1 1 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pa-otrack__statuschev {
		transition: none;
	}
}

/* End of Gilded Rose r29 */

/* =========================================================================
   Gilded Rose r30 - the combined order screen, corrected
   ========================================================================= */

/* The comp fills these cards with the literal #fff0f1. --pa-brand-soft is
   computed at runtime as tint( brand, 92 ), which lands on #f6f0f2, so the
   token is pinned here rather than inherited. */
.pa-otrack {
	--pa-otrack-low: #fff0f1;
}

/* The delivery plugin prints its own status line under the map. This screen
   already carries the status in the update card and in the timeline. */
.pa-otrack__map .pdt-status-text {
	display: none;
}

/* Delivered: the map gives way to a thank-you panel. */
.pa-otrack__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pa-3, 12px);
	min-height: 200px;
	padding: var(--pa-8, 32px) var(--pa-5, 20px);
	border-top: 1px solid var(--pa-otrack-line);
	background: var(--pa-otrack-low);
	text-align: center;
}

.pa-otrack__doneicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-otrack-primary);
	color: #ffffff;
}

.pa-otrack__donetitle {
	margin: 0;
	font-family: var(--pa-font, Georgia, serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--pa-otrack-ink);
}

.pa-otrack__donetext {
	margin: 0;
	max-width: 34ch;
	font-size: 0.9375rem;
	color: var(--pa-otrack-ink-2);
}

@media (min-width: 768px) {
	.pa-otrack__done {
		min-height: 260px;
	}

	.pa-otrack__donetitle {
		font-size: 1.5rem;
	}
}

/* =========================================================================
   Gilded Rose r31 - one tracking screen everywhere, and a map from the start
   ========================================================================= */

/* ---- 1. Every tracking surface gets the confirmation page's shell -------
   body.pa-tracking now covers the account "Track order" endpoint as well as
   the plugin's tracking page, so both drop the 240px account sidebar track
   and the 860px content cap that squeezed the screen into a thin column. */
body.pa-tracking .pa-main {
	max-width: var(--pa-content-max);
}

body.pa-tracking .woocommerce {
	display: block;
}

body.pa-tracking .woocommerce-MyAccount-content,
body.pa-tracking .pa-view,
body.pa-tracking .pa-view--tracking {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ---- 2. The screen sizes itself from its container, not the viewport ----
   The cards went two-up at a 768px viewport, which crammed them into 130px
   columns whenever the screen sat inside a narrow parent. Container queries
   make every surface lay out on the width it actually has. */
.pa-otrack {
	container: pa-otrack / inline-size;
}

.pa-otrack__title {
	font-size: 1.625rem;
}

.pa-otrack__cards {
	grid-template-columns: minmax(0, 1fr);
}

.pa-otrack__cardactions {
	flex-direction: column;
}

@container pa-otrack (min-width: 620px) {
	.pa-otrack__title {
		font-size: 2rem;
	}

	.pa-otrack__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pa-5, 20px);
	}
}

@container pa-otrack (min-width: 900px) {
	.pa-otrack__cardactions {
		flex-direction: row;
	}

	.pa-otrack__cardactions .pa-btn {
		flex: 1 1 0;
	}
}

/* ---- 3. A map before the courier exists --------------------------------
   The plugin only reveals its live section once a driver is moving, so every
   earlier step rendered an empty frame. The theme now draws the destination
   itself and steps aside the moment live tracking starts. */
.pa-otrack__premap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.pa-otrack__map:has(#pdt-live:not([hidden])) .pa-otrack__premap {
	display: none;
}

.pa-otrack__premapnote {
	position: absolute;
	inset: auto var(--pa-3, 12px) var(--pa-3, 12px) var(--pa-3, 12px);
	padding: 10px 14px;
	border-radius: var(--pa-r-sm, 10px);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 6px 20px rgba(37, 24, 26, 0.12);
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--pa-otrack-ink-2);
}

@container pa-otrack (min-width: 620px) {
	.pa-otrack__premapnote {
		inset: auto auto var(--pa-4, 16px) var(--pa-4, 16px);
		max-width: 42ch;
	}
}

/* End of Gilded Rose r31 */

/* ---------------------------------------------------------------------------
   Gilded Rose r32 - delivery updates sit under the map, not inside it
   --------------------------------------------------------------------------- */

/*
 * r29 boxed the whole tracking slot in a fixed-height frame, which crammed the
 * plugin's live readout inside the map itself. The frame now sizes to its
 * content and only the map keeps a height, so the readout flows underneath.
 */
.pa-otrack__map {
	--pa-otrack-maph: 260px;
	height: auto;
	min-height: 0;
}

.pa-otrack__map .pa-map,
.pa-otrack__map .pa-slot--tracking_map,
.pa-otrack__map .pdt-track,
.pa-otrack__map .pdt-track__live {
	height: auto;
	min-height: 0;
}

.pa-otrack__map .pdt-map,
.pa-otrack__map .pa-map__placeholder,
.pa-otrack__premap {
	height: var(--pa-otrack-maph, 260px);
}

/* The pre-live static map is a block in the flow now, not an overlay. */
.pa-otrack__premap {
	position: relative;
	inset: auto;
}

/*
 * The plugin owns the hidden attribute on this section, so it appears only
 * while there is a live delivery to report on.
 */
.pa-otrack__map .pdt-track__live {
	display: flex;
	flex-direction: column;
}

.pa-otrack__map .pdt-eta,
.pa-otrack__map .pdt-updated,
.pa-otrack__map .pdt-warning {
	margin: 0;
	padding: 0 var(--pa-5, 20px);
	font-family: var(--pa-font-ui, inherit);
	text-align: left;
}

.pa-otrack__map .pdt-eta {
	padding-top: var(--pa-4, 16px);
	border-top: 1px solid var(--pa-otrack-line, #d7c1c3);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pa-otrack-ink, #25181a);
}

.pa-otrack__map .pdt-updated {
	padding-top: var(--pa-1, 4px);
	padding-bottom: var(--pa-4, 16px);
	font-size: 0.8125rem;
	color: var(--pa-otrack-ink-2, #534345);
}

.pa-otrack__map .pdt-warning {
	padding-bottom: var(--pa-4, 16px);
	font-size: 0.8125rem;
	color: var(--pa-danger, #ba1a1a);
}

.pa-otrack__map .pdt-warning[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.pa-otrack__map {
		--pa-otrack-maph: 400px;
		height: auto;
	}
}

@media (min-width: 1024px) {
	.pa-otrack__map {
		--pa-otrack-maph: 450px;
		height: auto;
	}
}

/* End of Gilded Rose r32 */

/* ---------------------------------------------------------------------------
   Gilded Rose r33 - one map at a time
   ---------------------------------------------------------------------------
 * r32 handed the plugin's live section `display: flex` so its readout could
 * stack underneath the map. An author `display` declaration outranks the
 * `hidden` attribute, so that quietly cancelled the plugin's own guard and
 * every order rendered an empty map box, a placeholder "Driver is on the way"
 * and the still map all at once - three map regions where one belongs.
 * Display is now scoped to the revealed state, and the frame clips.
 */
.pa-otrack__map {
	overflow: hidden;
}

.pa-otrack__map .pdt-track__live {
	display: none;
}

.pa-otrack__map .pdt-track__live:not([hidden]) {
	display: flex;
	flex-direction: column;
}

/* The plugin's connection note only carries meaning while tracking is live.
   Before that there is no delivery to reach, so a failed poll must not shout
   on an order confirmation. */
.pa-otrack__map:has(#pdt-live[hidden]) .pdt-connection {
	display: none;
}

.pa-otrack__premapimg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* End of Gilded Rose r33 */

/* Sold by the kilo, and customer choices ---------------------------- item 3 */
.pa-qty__unit {
	padding-inline-end: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --pa-muted, #6b6b6b );
}

.pa-choices {
	display: grid;
	gap: 0.75rem;
	margin-block: 1rem;
}

.pa-choices .pa-select {
	width: 100%;
	min-height: 48px;
}

.pa-choices__status:empty {
	display: none;
}

.pa-choices__status {
	margin: 0;
	font-size: 0.9rem;
	color: var( --pa-danger, #a12525 );
}

/* A success notice should not wear the warning colour ------------------- X5 */
.pa-toast--success {
	background: var(--pa-brand-btn, var(--pa-brand));
	color: var(--pa-on-brand, #fff);
}


/* --------------------------------------------------------------------------
   Address picker and "use my location"
   -------------------------------------------------------------------------- */

.pa-dcheck__locate {
	display: inline-flex;
	flex: 0 1 auto;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	max-width: 100%;
	min-height: var(--pa-tap, 44px);
	padding: 0 var(--pa-3, 12px);
}

/* display:inline-flex above beats the browser's own rule for [hidden], so the
 * attribute has to be honoured explicitly - otherwise the button is visible
 * before script has decided the browser can locate the customer at all. */
.pa-dcheck__locate[hidden] {
	display: none;
}

.pa-dcheck__locate-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

/* The label shrinks and ellipsizes on a narrow phone rather than forcing the
 * row wider than the card it sits in. */
.pa-dcheck__locate-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 1024px) {

	.pa-dcheck__locate {
		min-height: 40px;
	}
}

.pa-dcheck__others {
	margin-top: 0.9rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
}

.pa-dcheck__others-title {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	opacity: 0.75;
}

.pa-dcheck__others-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.35rem;
}

.pa-dcheck__other {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	width: 100%;
	padding: 0.55rem 0.65rem;
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: 0.6rem;
	background: transparent;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pa-dcheck__other:hover,
.pa-dcheck__other:focus-visible {
	border-color: currentColor;
	background: rgba( 0, 0, 0, 0.04 );
}

.pa-dcheck__other-pin {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 0.1rem;
	opacity: 0.6;
}

.pa-dcheck__other-label {
	flex: 1 1 auto;
	line-height: 1.35;
}

/* ---------------------------------------------------------------------------
 * Account > Addresses        (woocommerce/myaccount/my-address.php)
 * Account > Order details    (woocommerce/myaccount/view-order.php)
 *
 * Mobile-first, as with the rest of this file. The 768px step turns the two
 * address slots into a side-by-side grid and lifts page actions inline; the
 * 1024px step splits order details into the 7/5 column layout.
 *
 * The palette below is the design's brand ramp. Where the theme already ships
 * an equivalent token (--pa-brand is brand-800, --pa-brand-btn is brand-500,
 * --pa-brand-soft is brand-100) that token is used with the ramp value as the
 * fallback, so a re-skinned shop stays consistent.
 * ------------------------------------------------------------------------- */

:root {
	--pa-ap-canvas: #fff8f7;
	--pa-ap-plum: #632b38;
	--pa-ap-ink: #3f2229;
	--pa-ap-body: #482c32;
	--pa-ap-muted: #7e6d72;
	--pa-ap-rose: #cf7b8a;
	--pa-ap-tint: #faecee;
	--pa-ap-line: #edd7da;
	--pa-ap-line-2: #f5e4e7;
	--pa-ap-r: 16px;
	--pa-ap-r-sm: 12px;
	--pa-ap-shadow: 0 1px 2px rgba(99, 43, 56, .05), 0 2px 10px rgba(99, 43, 56, .05);
	--pa-ap-amber-bg: #fffbeb;
	--pa-ap-amber-line: #fde68a;
	--pa-ap-amber-ink: #78350f;
	--pa-ap-amber-body: #92400e;
	--pa-ap-rose-bg: #fff1f2;
	--pa-ap-rose-line: #ffe4e6;
	--pa-ap-rose-ink: #9f1239;
	--pa-ap-rose-sub: #e11d48;
}

/* --- shared: breadcrumb ------------------------------------------------- */
.pa-addrpage__back,
.pa-vieworder__back {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .8125rem;
	font-weight: 600;
	color: var(--pa-brand, #8f4957);
	text-decoration: none;
	min-height: 32px;
}

.pa-addrpage__back:hover,
.pa-addrpage__back:focus-visible,
.pa-vieworder__back:hover,
.pa-vieworder__back:focus-visible {
	color: var(--pa-ap-plum);
	text-decoration: underline;
}

.pa-addrpage__back .pa-icon,
.pa-vieworder__back .pa-icon {
	transition: transform .18s ease;
}

.pa-addrpage__back:hover .pa-icon,
.pa-vieworder__back:hover .pa-icon {
	transform: translateX(-2px);
}

/* ===========================================================================
 * Addresses
 * ========================================================================= */
.pa-addrpage {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	color: var(--pa-ap-body);
}

.pa-addrpage__header {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .875rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--pa-ap-line-2);
}

.pa-addrpage__title {
	margin: 0;
	font-family: var(--pa-font-display, var(--pa-font));
	font-size: clamp(1.75rem, 6vw, 2.75rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--pa-ap-ink);
}

.pa-addrpage__lede {
	margin: .5rem 0 0;
	max-width: 38rem;
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--pa-ap-muted);
}

.pa-addrpage__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: var(--pa-tap, 44px);
	padding: .625rem 1.25rem;
	border: 1px solid var(--pa-ap-rose);
	border-radius: var(--pa-r-pill, 999px);
	background: rgba(255, 255, 255, .7);
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .8125rem;
	font-weight: 700;
	color: var(--pa-brand, #8f4957);
	text-decoration: none;
	box-shadow: var(--pa-ap-shadow);
	transition: background-color .18s ease, color .18s ease, transform .12s ease;
}

.pa-addrpage__add:hover,
.pa-addrpage__add:focus-visible {
	background: var(--pa-brand-btn, #d98695);
	border-color: var(--pa-brand-btn, #d98695);
	color: var(--pa-on-brand, #fff);
}

.pa-addrpage__add:active {
	transform: scale(.97);
}

/* --- delivery zone strip ------------------------------------------------ */
.pa-addrpage__zone {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: .875rem;
	border: 1px solid var(--pa-ap-line);
	border-radius: var(--pa-ap-r);
	background: linear-gradient(135deg, var(--pa-brand-soft, #fff0f1), #fae6e9);
	box-shadow: var(--pa-ap-shadow);
}

.pa-addrpage__zone-main {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
}

.pa-addrpage__zone-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-top: .125rem;
	border-radius: 50%;
	background: #fff;
	color: var(--pa-brand, #8f4957);
	box-shadow: 0 1px 3px rgba(99, 43, 56, .12);
}

.pa-addrpage__zone-title {
	margin: 0;
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .8125rem;
	font-weight: 700;
	color: var(--pa-ap-plum);
}

.pa-addrpage__zone-note {
	margin: .15rem 0 0;
	font-size: .6875rem;
	line-height: 1.45;
	color: var(--pa-ap-muted);
}

.pa-addrpage__zone-badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .25rem .625rem;
	border: 1px solid var(--pa-ap-line);
	border-radius: var(--pa-r-pill, 999px);
	background: rgba(255, 255, 255, .9);
	font-size: .625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pa-ap-plum);
}

.pa-addrpage__zone-dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10b981;
	animation: pa-ap-pulse 2s ease-in-out infinite;
}

@keyframes pa-ap-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

/* --- address cards ----------------------------------------------------- */
.pa-addrpage__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.pa-addrcard {
	display: flex;
	flex-direction: column;
	gap: .875rem;
	padding: 1rem;
	border: 1px solid var(--pa-ap-line);
	border-radius: var(--pa-ap-r);
	background: var(--pa-surface, #fff);
	box-shadow: var(--pa-ap-shadow);
	transition: box-shadow .2s ease;
}

.pa-addrcard:hover {
	box-shadow: 0 2px 4px rgba(99, 43, 56, .06), 0 8px 24px rgba(99, 43, 56, .07);
}

.pa-addrcard--shipping {
	border-width: 2px;
	border-color: #ecd4d7;
	background: linear-gradient(180deg, #fff, #fffafb);
}

.pa-addrcard__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .5rem;
	padding-bottom: .625rem;
	border-bottom: 1px solid var(--pa-ap-line-2);
}

.pa-addrcard__ident {
	display: flex;
	align-items: center;
	gap: .625rem;
	min-width: 0;
}

.pa-addrcard__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 10px;
	background: var(--pa-brand-soft, #fff0f1);
	color: var(--pa-brand, #8f4957);
}

.pa-addrcard--shipping .pa-addrcard__icon {
	background: var(--pa-brand-btn, #d98695);
	color: var(--pa-on-brand, #fff);
	box-shadow: 0 1px 3px rgba(99, 43, 56, .18);
}

.pa-addrcard__headings {
	display: block;
	min-width: 0;
}

.pa-addrcard__eyebrow {
	display: block;
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--pa-ap-rose);
}

.pa-addrcard__title {
	margin: .1rem 0 0;
	font-family: var(--pa-font-display, var(--pa-font));
	font-size: 1rem;
	line-height: 1.2;
	font-weight: 700;
	color: var(--pa-ap-plum);
}

.pa-addrcard__badge {
	flex: 0 0 auto;
	padding: .15rem .5rem;
	border: 1px solid var(--pa-ap-line);
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-ap-tint);
	font-size: .625rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--pa-ap-plum);
	white-space: nowrap;
}

.pa-addrcard--shipping .pa-addrcard__badge {
	border-color: transparent;
	background: var(--pa-brand-btn, #d98695);
	color: var(--pa-on-brand, #fff);
}

.pa-addrcard__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	font-size: .75rem;
}

.pa-addrcard__label {
	display: block;
	margin-bottom: .15rem;
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pa-ap-muted);
}

.pa-addrcard__name {
	margin: 0;
	font-size: .875rem;
	font-weight: 700;
	color: var(--pa-ap-plum);
}

.pa-addrcard__address {
	margin: 0;
	font-style: normal;
	line-height: 1.6;
	color: var(--pa-ap-body);
}

.pa-addrcard__empty {
	margin: 0;
	color: var(--pa-ap-muted);
}

.pa-addrcard__courier {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	padding: .625rem;
	border: 1px solid var(--pa-ap-line);
	border-radius: var(--pa-ap-r-sm);
	background: var(--pa-ap-tint);
}

.pa-addrcard__courier-icon {
	flex: 0 0 auto;
	color: var(--pa-brand, #8f4957);
	line-height: 1;
}

.pa-addrcard__courier-text {
	display: block;
	font-size: .6875rem;
	line-height: 1.5;
	color: var(--pa-ap-body);
}

.pa-addrcard__courier-text strong {
	display: block;
	color: var(--pa-ap-plum);
}

.pa-addrcard__contact {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	margin: 0;
	padding: .625rem 0 0;
	list-style: none;
	border-top: 1px solid var(--pa-ap-line-2);
}

.pa-addrcard__contact-item {
	display: flex;
	align-items: center;
	gap: .4rem;
	min-width: 0;
	font-size: .6875rem;
	color: var(--pa-ap-muted);
}

.pa-addrcard__contact-item .pa-icon {
	flex: 0 0 auto;
	color: var(--pa-ap-rose);
}

.pa-addrcard__contact-item a {
	color: inherit;
	text-decoration: none;
}

.pa-addrcard__contact-item a:hover {
	text-decoration: underline;
}

.pa-addrcard__contact-mail {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pa-addrcard__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding-top: .75rem;
	border-top: 1px solid var(--pa-ap-line-2);
}

.pa-addrcard__edit {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-height: 32px;
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .75rem;
	font-weight: 700;
	color: var(--pa-brand, #8f4957);
	text-decoration: none;
}

.pa-addrcard__edit:hover,
.pa-addrcard__edit:focus-visible {
	color: var(--pa-ap-plum);
	text-decoration: underline;
}

.pa-addrcard__notes {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: .3rem .75rem;
	border: 1px solid var(--pa-ap-line);
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-ap-canvas);
	font-size: .6875rem;
	font-weight: 600;
	color: var(--pa-ap-plum);
	text-decoration: none;
}

.pa-addrcard__notes:hover,
.pa-addrcard__notes:focus-visible {
	background: #fff;
	border-color: var(--pa-ap-rose);
}

.pa-addrcard__hint {
	font-size: .6875rem;
	font-style: italic;
	color: var(--pa-ap-muted);
}

/* --- gift / bulk notice ------------------------------------------------ */
.pa-addrpage__help {
	display: flex;
	flex-direction: column;
	gap: .875rem;
	padding: 1rem;
	border: 1px dashed var(--pa-ap-line);
	border-radius: var(--pa-ap-r);
	background: rgba(255, 255, 255, .7);
}

.pa-addrpage__help-main {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}

.pa-addrpage__help-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--pa-brand-soft, #fff0f1);
	color: var(--pa-brand, #8f4957);
}

.pa-addrpage__help-title {
	margin: 0;
	font-family: var(--pa-font-display, var(--pa-font));
	font-size: .9375rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--pa-ap-plum);
}

.pa-addrpage__help-note {
	margin: .25rem 0 0;
	font-size: .75rem;
	line-height: 1.55;
	color: var(--pa-ap-muted);
}

.pa-addrpage__help-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pa-tap, 44px);
	padding: .5rem 1.125rem;
	border: 1px solid var(--pa-ap-line);
	border-radius: var(--pa-r-pill, 999px);
	background: #fff;
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .75rem;
	font-weight: 700;
	color: var(--pa-ap-plum);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.pa-addrpage__help-link:hover,
.pa-addrpage__help-link:focus-visible {
	background: var(--pa-brand-soft, #fff0f1);
	border-color: var(--pa-ap-rose);
}

/* ===========================================================================
 * Order details
 * ========================================================================= */
.pa-vieworder {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	color: var(--pa-ap-body);
}

.pa-vieworder__crumbs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

.pa-vieworder__kind {
	flex: 0 0 auto;
	padding: .2rem .625rem;
	border: 1px solid var(--pa-ap-line);
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-brand-soft, #fff0f1);
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pa-brand, #8f4957);
}

/* --- header card ------------------------------------------------------- */
.pa-vieworder__header {
	display: flex;
	flex-direction: column;
	gap: .875rem;
	padding: 1rem;
	border: 1px solid var(--pa-ap-line);
	border-radius: var(--pa-ap-r);
	background: var(--pa-surface, #fff);
	box-shadow: var(--pa-ap-shadow);
}

.pa-vieworder__ident {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.pa-vieworder__num {
	margin: 0;
	font-family: var(--pa-font-display, var(--pa-font));
	font-size: clamp(1.375rem, 5.5vw, 2.25rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--pa-ap-plum);
}

.pa-vieworder__badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .15rem .625rem;
	border: 1px solid var(--pa-ap-line);
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-chip-bg, #ffe9eb);
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--pa-brand, #8f4957);
	white-space: nowrap;
}

.pa-vieworder__badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.pa-vieworder__badge--onhold {
	border-color: var(--pa-ap-amber-line);
	background: var(--pa-ap-amber-bg);
	color: var(--pa-ap-amber-body);
}

.pa-vieworder__badge--complete {
	border-color: #cfe3dd;
	background: #eef6f3;
	color: var(--pa-success, #43655f);
}

.pa-vieworder__badge--cancelled {
	border-color: var(--pa-ap-rose-line);
	background: var(--pa-ap-rose-bg);
	color: var(--pa-ap-rose-ink);
}

.pa-vieworder__badge--cancelled .pa-vieworder__badge-dot,
.pa-vieworder__badge--processing .pa-vieworder__badge-dot {
	animation: pa-ap-pulse 2s ease-in-out infinite;
}

.pa-vieworder__placed {
	margin: .375rem 0 0;
	font-size: .75rem;
	color: var(--pa-ap-muted);
}

.pa-vieworder__placed strong {
	font-weight: 600;
	color: var(--pa-ap-body);
}

.pa-vieworder__dot {
	margin: 0 .15rem;
	color: var(--pa-ap-line);
}

.pa-vieworder__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: .5rem;
}

.pa-vieworder__act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: var(--pa-tap, 44px);
	padding: .5rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--pa-ap-r-sm);
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, transform .12s ease;
}

.pa-vieworder__act--soft {
	border-color: #ecd4d7;
	background: var(--pa-brand-soft, #fff0f1);
	color: var(--pa-brand, #8f4957);
}

.pa-vieworder__act--soft:hover,
.pa-vieworder__act--soft:focus-visible {
	background: #f8dbe0;
}

.pa-vieworder__act--primary {
	background: var(--pa-brand-btn, #d98695);
	color: var(--pa-on-brand, #fff);
	box-shadow: var(--pa-ap-shadow);
}

.pa-vieworder__act--primary:hover,
.pa-vieworder__act--primary:focus-visible {
	background: #be6577;
}

.pa-vieworder__act:active {
	transform: scale(.97);
}

.pa-vieworder__act[disabled] {
	opacity: .6;
	cursor: default;
}

/* --- cancellation / refund notice -------------------------------------- */
.pa-vieworder__notice {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	padding: .75rem;
	border: 1px solid var(--pa-ap-amber-line);
	border-radius: var(--pa-ap-r-sm);
	background: var(--pa-ap-amber-bg);
}

.pa-vieworder__notice-icon {
	flex: 0 0 auto;
	margin-top: .1rem;
	color: #d97706;
	line-height: 1;
}

.pa-vieworder__notice-title {
	margin: 0;
	font-size: .75rem;
	font-weight: 700;
	color: var(--pa-ap-amber-ink);
}

.pa-vieworder__notice-body {
	margin: .15rem 0 0;
	font-size: .6875rem;
	line-height: 1.55;
	color: var(--pa-ap-amber-body);
}

/* Hook output (live tracking widget, third-party additions). `display:
 * contents` keeps an empty slot from opening a gap in the flex column. */
.pa-vieworder__slot {
	display: contents;
}

.pa-vieworder__slot:empty {
	display: none;
}

.pa-vieworder .pa-order-track {
	margin: 0;
}

/* --- grid -------------------------------------------------------------- */
.pa-vieworder__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.pa-vieworder__main,
.pa-vieworder__rail {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.pa-vieworder__card {
	padding: 1rem;
	border: 1px solid var(--pa-ap-line);
	border-radius: var(--pa-ap-r);
	background: var(--pa-surface, #fff);
	box-shadow: var(--pa-ap-shadow);
}

.pa-vieworder__card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: 1rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--pa-ap-line-2);
}

.pa-vieworder__card-title,
.pa-vieworder__rail-title {
	margin: 0;
	font-family: var(--pa-font-display, var(--pa-font));
	font-size: 1.0625rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--pa-ap-plum);
}

.pa-vieworder__rail-title {
	margin-bottom: .75rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--pa-ap-line-2);
}

.pa-vieworder__card-note {
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pa-ap-muted);
}

/* --- items ------------------------------------------------------------- */
.pa-vieworder__items {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-vieworder__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .75rem;
	border: 1px solid var(--pa-ap-line-2);
	border-radius: var(--pa-ap-r-sm);
	background: var(--pa-ap-canvas);
}

.pa-vieworder__item-lead {
	display: flex;
	align-items: center;
	gap: .625rem;
	min-width: 0;
}

.pa-vieworder__thumb {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	overflow: hidden;
	border: 1px solid var(--pa-ap-line);
	border-radius: 10px;
	background: var(--pa-brand-soft, #fff0f1);
	color: var(--pa-brand, #8f4957);
}

.pa-vieworder__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pa-vieworder__item-text {
	min-width: 0;
}

.pa-vieworder__item-name {
	margin: 0;
	font-family: var(--pa-font-display, var(--pa-font));
	font-size: .8125rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--pa-ink, #25181a);
}

.pa-vieworder__item-name a {
	color: inherit;
	text-decoration: none;
}

.pa-vieworder__item-name a:hover {
	text-decoration: underline;
}

.pa-vieworder__item-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin-top: .15rem;
	font-size: .6875rem;
	color: var(--pa-ap-muted);
}

.pa-vieworder__qty {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-weight: 700;
	color: var(--pa-ap-body);
}

.pa-vieworder__qty del {
	font-weight: 400;
	color: #b9a3a7;
}

.pa-vieworder__qty-chip {
	padding: 0 .375rem;
	border-radius: 6px;
	background: var(--pa-brand-soft, #fff0f1);
	font-size: .625rem;
	font-weight: 700;
	color: var(--pa-brand, #8f4957);
}

.pa-vieworder__sep {
	color: var(--pa-ap-line);
}

.pa-vieworder__item-attrs {
	margin: .25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .625rem;
	line-height: 1.5;
	color: var(--pa-ap-muted);
}

.pa-vieworder__item-attrs p {
	margin: 0;
	display: inline;
}

.pa-vieworder__item-total {
	flex: 0 0 auto;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--pa-ap-plum);
	text-align: right;
}

/* --- payment summary --------------------------------------------------- */
.pa-vieworder__summary {
	margin-top: 1rem;
	padding-top: .75rem;
	border-top: 1px solid var(--pa-ap-line-2);
}

.pa-vieworder__summary-title {
	margin: 0 0 .625rem;
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pa-brand, #8f4957);
}

.pa-vieworder__totals {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0;
	font-size: .75rem;
}

.pa-vieworder__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75rem;
}

.pa-vieworder__row dt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	margin: 0;
	font-weight: 400;
	color: var(--pa-ap-muted);
}

.pa-vieworder__row dd {
	margin: 0;
	font-weight: 600;
	color: var(--pa-ink, #25181a);
	text-align: right;
	white-space: nowrap;
}

.pa-vieworder__chip {
	padding: .05rem .375rem;
	border-radius: 6px;
	background: var(--pa-brand-soft, #fff0f1);
	font-size: .625rem;
	font-weight: 500;
	color: var(--pa-ap-body);
	white-space: nowrap;
}

.pa-vieworder__row-main {
	display: block;
	font-weight: 600;
	color: var(--pa-ink, #25181a);
}

.pa-vieworder__row-sub {
	display: block;
	margin-top: .1rem;
	font-size: .625rem;
	font-weight: 400;
	color: var(--pa-ap-muted);
}

.pa-vieworder__row--refund {
	align-items: center;
	padding: .5rem .625rem;
	border: 1px solid var(--pa-ap-rose-line);
	border-radius: 10px;
	background: var(--pa-ap-rose-bg);
}

.pa-vieworder__row--refund dt {
	display: block;
	color: var(--pa-ap-rose-ink);
}

.pa-vieworder__row--refund .pa-vieworder__row-main {
	color: var(--pa-ap-rose-ink);
}

.pa-vieworder__row--refund .pa-vieworder__row-sub {
	color: var(--pa-ap-rose-sub);
}

.pa-vieworder__row--refund dd {
	font-weight: 700;
	color: #be123c;
}

.pa-vieworder__row--total {
	align-items: baseline;
	margin-top: .25rem;
	padding-top: .75rem;
	border-top: 1px solid var(--pa-ap-line-2);
}

.pa-vieworder__row--total dt {
	display: block;
}

.pa-vieworder__row--total .pa-vieworder__row-main {
	font-family: var(--pa-font-display, var(--pa-font));
	font-size: 1rem;
	font-weight: 700;
	color: var(--pa-ap-plum);
}

.pa-vieworder__was {
	margin-right: .375rem;
	font-size: .75rem;
	font-weight: 400;
	color: var(--pa-ap-muted);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	text-decoration-color: #be6577;
}

.pa-vieworder__now {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--pa-brand, #8f4957);
	text-decoration: none;
}

/* --- card footer ------------------------------------------------------- */
.pa-vieworder__card-foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .625rem;
	margin-top: 1rem;
	padding-top: .75rem;
	border-top: 1px solid var(--pa-ap-line-2);
}

.pa-vieworder__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pa-tap, 44px);
	padding: .625rem 1.75rem;
	border: 0;
	border-radius: var(--pa-ap-r-sm);
	background: var(--pa-brand-btn, #d98695);
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pa-on-brand, #fff);
	cursor: pointer;
	box-shadow: var(--pa-ap-shadow);
	transition: background-color .18s ease, transform .12s ease;
}

.pa-vieworder__cta:hover,
.pa-vieworder__cta:focus-visible {
	background: #be6577;
}

.pa-vieworder__cta:active {
	transform: scale(.98);
}

.pa-vieworder__cta[disabled] {
	opacity: .6;
	cursor: default;
}

.pa-vieworder__help {
	font-size: .6875rem;
	font-weight: 500;
	color: var(--pa-ap-muted);
	text-align: center;
	text-decoration: underline;
	text-decoration-color: #ecd4d7;
	text-underline-offset: 3px;
}

.pa-vieworder__help:hover,
.pa-vieworder__help:focus-visible {
	color: var(--pa-brand, #8f4957);
}

/* --- order updates ----------------------------------------------------- */
.pa-vieworder__updates {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-vieworder__update {
	padding-left: .75rem;
	border-left: 2px solid #f8dbe0;
}

.pa-vieworder__update-when {
	margin: 0;
	font-size: .625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--pa-ap-muted);
}

.pa-vieworder__update-body {
	font-size: .75rem;
	line-height: 1.55;
	color: var(--pa-ap-body);
}

.pa-vieworder__update-body p {
	margin: .25rem 0 0;
}

/* --- fulfillment facts ------------------------------------------------- */
.pa-vieworder__facts {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: .75rem;
}

.pa-vieworder__fact {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75rem;
	padding: .5rem 0;
}

.pa-vieworder__fact + .pa-vieworder__fact {
	border-top: 1px solid var(--pa-ap-line-2);
}

.pa-vieworder__fact dt {
	margin: 0;
	font-weight: 400;
	color: var(--pa-ap-muted);
}

.pa-vieworder__fact dd {
	margin: 0;
	text-align: right;
}

.pa-vieworder__fact-main {
	display: block;
	font-weight: 700;
	color: var(--pa-ink, #25181a);
}

.pa-vieworder__fact-sub {
	display: block;
	margin-top: .1rem;
	font-size: .6875rem;
	color: var(--pa-ap-muted);
}

.pa-vieworder__timing {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .15rem .625rem;
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-brand-soft, #fff0f1);
	font-size: .6875rem;
	font-weight: 600;
	color: var(--pa-brand, #8f4957);
}

/* --- addresses --------------------------------------------------------- */
.pa-vieworder__addresses {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pa-vieworder__addr + .pa-vieworder__addr {
	padding-top: .875rem;
	border-top: 1px solid var(--pa-ap-line-2);
}

.pa-vieworder__addr-title {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0 0 .375rem;
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: .625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pa-brand, #8f4957);
}

/* The name and street arrive as WooCommerce's formatted address, which was
   inheriting the page's display serif, while the phone and email rows were a
   smaller interface sans - one card that read like two designs. The block sets
   the face and the size once, and every row inherits both. */
.pa-vieworder__addr-body {
	margin: 0;
	padding-left: .875rem;
	border-left: 2px solid #f8dbe0;
	font-family: var(--pa-font-ui, inherit);
	font-style: normal;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--pa-ap-body);
}

.pa-vieworder__addr-body .pa-vieworder__addr-line {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin-top: .25rem;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: var(--pa-ap-body);
}

.pa-vieworder__addr-line .pa-icon {
	flex: 0 0 auto;
	color: var(--pa-ap-rose);
}

/* ===========================================================================
 * 768px: two-up addresses, inline page actions, roomier cards
 * ========================================================================= */
@media (min-width: 768px) {

	.pa-addrpage {
		gap: 1.5rem;
	}

	.pa-addrpage__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1.5rem;
		padding-bottom: 1.5rem;
	}

	.pa-addrpage__lede {
		font-size: .875rem;
	}

	.pa-addrpage__add {
		flex: 0 0 auto;
		font-size: .875rem;
	}

	.pa-addrpage__zone {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.25rem;
		padding: 1.125rem;
	}

	.pa-addrpage__zone-icon {
		width: 2.5rem;
		height: 2.5rem;
		margin-top: 0;
	}

	.pa-addrpage__zone-title {
		font-size: .875rem;
	}

	.pa-addrpage__zone-note {
		font-size: .75rem;
	}

	.pa-addrpage__zone-badge {
		align-self: auto;
		font-size: .6875rem;
	}

	.pa-addrpage__grid {
		grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
		gap: 1.5rem;
	}

	.pa-addrcard {
		gap: 1.25rem;
		padding: 1.5rem;
	}

	.pa-addrcard__top {
		padding-bottom: 1rem;
	}

	.pa-addrcard__icon {
		width: 2.5rem;
		height: 2.5rem;
		border-radius: var(--pa-ap-r-sm);
	}

	.pa-addrcard__eyebrow {
		font-size: .625rem;
	}

	.pa-addrcard__title {
		font-size: 1.25rem;
	}

	.pa-addrcard__body {
		gap: 1rem;
		font-size: .875rem;
	}

	.pa-addrcard__name {
		font-size: 1rem;
	}

	.pa-addrcard__courier,
	.pa-addrcard__courier-text {
		font-size: .75rem;
	}

	.pa-addrcard__foot {
		padding-top: 1rem;
	}

	.pa-addrcard__edit {
		font-size: .875rem;
	}

	.pa-addrpage__help {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
		padding: 1.5rem;
	}

	.pa-addrpage__help-icon {
		width: 3rem;
		height: 3rem;
	}

	.pa-addrpage__help-title {
		font-size: 1.125rem;
	}

	.pa-addrpage__help-note {
		font-size: .875rem;
	}

	.pa-addrpage__help-link {
		flex: 0 0 auto;
		padding: .625rem 1.25rem;
		font-size: .875rem;
	}

	/* --- order details ------------------------------------------------- */
	.pa-vieworder {
		gap: 1.5rem;
	}

	.pa-vieworder__header {
		padding: 1.5rem;
		gap: 1.25rem;
	}

	.pa-vieworder__headline {
		display: flex;
		flex-direction: column;
	}

	.pa-vieworder__placed {
		font-size: .875rem;
	}

	.pa-vieworder__actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: .75rem;
	}

	.pa-vieworder__act {
		border-radius: var(--pa-r-pill, 999px);
		padding: .625rem 1.5rem;
	}

	.pa-vieworder__notice {
		padding: 1rem;
		border-radius: var(--pa-ap-r);
	}

	.pa-vieworder__notice-title {
		font-size: .875rem;
	}

	.pa-vieworder__notice-body {
		font-size: .8125rem;
	}

	.pa-vieworder__grid {
		gap: 1.5rem;
	}

	.pa-vieworder__card {
		padding: 1.5rem;
	}

	.pa-vieworder__card-title,
	.pa-vieworder__rail-title {
		font-size: 1.375rem;
	}

	.pa-vieworder__card-note {
		font-size: .75rem;
	}

	.pa-vieworder__items {
		gap: .75rem;
	}

	.pa-vieworder__item {
		padding: 1rem;
		border-radius: var(--pa-ap-r);
	}

	.pa-vieworder__item-lead {
		gap: .875rem;
	}

	.pa-vieworder__thumb {
		width: 3.5rem;
		height: 3.5rem;
		border-radius: var(--pa-ap-r-sm);
	}

	.pa-vieworder__item-name {
		font-size: 1.0625rem;
	}

	.pa-vieworder__item-meta {
		gap: .5rem;
		font-size: .75rem;
	}

	.pa-vieworder__item-total {
		font-size: 1.0625rem;
	}

	.pa-vieworder__summary {
		margin-top: 1.5rem;
		padding-top: 1.25rem;
	}

	.pa-vieworder__totals,
	.pa-vieworder__facts {
		font-size: .875rem;
	}

	.pa-vieworder__row--total .pa-vieworder__row-main {
		font-size: 1.25rem;
	}

	.pa-vieworder__was {
		font-size: .875rem;
	}

	.pa-vieworder__now {
		font-size: 1.75rem;
	}

	.pa-vieworder__card-foot {
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 1.5rem;
		padding-top: 1.25rem;
	}

	.pa-vieworder__cta {
		border-radius: var(--pa-r-pill, 999px);
		padding: .75rem 1.75rem;
		font-size: .75rem;
	}

	.pa-vieworder__help {
		text-align: left;
		font-size: .75rem;
	}

	.pa-vieworder__addr-body {
		padding-left: 1.25rem;
		font-size: .875rem;
	}

	.pa-vieworder__addr-title {
		font-size: .6875rem;
	}
}

/* ===========================================================================
 * 1024px: 7/5 order-details split
 * ========================================================================= */
@media (min-width: 1024px) {

	.pa-vieworder__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 2rem;
	}

	.pa-vieworder__header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"headline actions"
			"notice   notice";
		align-items: center;
		column-gap: 1.5rem;
		padding: 2rem;
	}

	.pa-vieworder__headline {
		grid-area: headline;
	}

	.pa-vieworder__actions {
		grid-area: actions;
		justify-content: flex-end;
	}

	.pa-vieworder__notice {
		grid-area: notice;
	}

	.pa-vieworder__card {
		border-radius: 20px;
		padding: 2rem;
	}

	.pa-vieworder__card--rail {
		padding: 1.75rem;
	}

	.pa-addrpage__title {
		font-size: 3rem;
	}

	.pa-addrcard {
		padding: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pa-addrpage__zone-dot,
	.pa-vieworder__badge-dot {
		animation: none;
	}

	.pa-addrpage__back .pa-icon,
	.pa-vieworder__back .pa-icon,
	.pa-addrpage__add,
	.pa-addrcard,
	.pa-vieworder__act,
	.pa-vieworder__cta {
		transition: none;
	}

	.pa-addrpage__back:hover .pa-icon,
	.pa-vieworder__back:hover .pa-icon {
		transform: none;
	}

	.pa-addrpage__add:active,
	.pa-vieworder__act:active,
	.pa-vieworder__cta:active {
		transform: none;
	}
}

/* ===========================================================================
 * Account > Addresses / Order details - page shell (all platforms)
 *
 * Both screens render inside .woocommerce-MyAccount-content, which the shared
 * account rules (a) place in a `240px minmax(0, 1fr)` sidebar grid from 768px
 * up and (b) cap at 860px from 1024px up. Account::dedupe_dashboard_nav()
 * removes the account navigation on *every* account screen, so the content div
 * was becoming the first grid item and getting trapped in the fixed 240px
 * sidebar track while column 2 sat empty - which is why these pages only ever
 * looked correct on a phone. The sidebar grid is now guarded with :has()
 * further up the file; the rest of the escape lives here, mirroring the
 * existing body.pa-orders-screen and body.pa-tracking treatments.
 * ========================================================================= */

/* page.php prints <h1 class="pa-page__title">the_title()</h1>, which
 * WooCommerce rewrites to the endpoint title ("Addresses", "Order #123").
 * Both screens print their own heading, so this one is a duplicate. Same
 * treatment as body.pa-orders-screen. */
body.pa-addresses-screen .pa-page__title,
body.pa-vieworder-screen .pa-page__title {
	display: none;
}

/* Lift the shared 860px content cap so the comps' 72rem shell can breathe. */
body.pa-addresses-screen .woocommerce-MyAccount-content,
body.pa-vieworder-screen .woocommerce-MyAccount-content {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Both comps run a centred max-w-6xl (72rem) shell. Horizontal page padding is
 * already supplied by .pa-main, so only the cap and the centring belong here -
 * adding padding would double it up. */
.pa-addrpage,
.pa-vieworder {
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	/* Desktop and iPad landscape: the comps' full rhythm (gap-8 / mb-10). */
	.pa-addrpage {
		gap: 2rem;
	}

	/* The comp is md:grid-cols-2 with gap-8. auto-fit rather than a fixed
	 * repeat(2, ...) so a lone card - shipping disabled, or ship-to-billing
	 * only - stretches to full width instead of being stranded in a half
	 * track. A 24rem floor keeps it at exactly two columns inside 72rem. */
	.pa-addrpage__grid {
		grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
		gap: 2rem;
	}

	.pa-vieworder {
		gap: 1.5rem;
	}
}


/* -------------------------------------------------------------------------
 * Per-option choice rows, the way a delivery app does them
 * ---------------------------------------------------------------------- */

.pa-cgroup {
	border: 1px solid var( --pa-line );
	border-radius: 14px;
	margin-bottom: 12px;
	overflow: hidden;
}

.pa-cgroup__head {
	align-items: baseline;
	background: var( --pa-brand-soft );
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	padding: 10px 14px;
}

.pa-cgroup__name {
	color: var( --pa-ink );
	font-size: 0.9375rem;
	font-weight: 600;
}

.pa-cgroup__note {
	color: var( --pa-muted );
	font-size: 0.75rem;
	text-transform: lowercase;
}

.pa-cgroup__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pa-crow {
	align-items: center;
	border-top: 1px solid var( --pa-line );
	display: flex;
	gap: 12px;
	justify-content: space-between;
	min-height: var( --pa-tap );
	padding: 8px 14px;
}

.pa-cgroup__list > .pa-crow:first-child {
	border-top: 0;
}

.pa-crow__text {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.pa-crow__label {
	color: var( --pa-ink );
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.pa-crow__price {
	color: var( --pa-brand );
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

.pa-crow__qty {
	flex: 0 0 auto;
}

/* A zero reads as "not taken", so it should not shout. */
.pa-crow__qty .pa-qty__input[value="0"] {
	color: var( --pa-muted );
}

/* -------------------------------------------------------------------------
 * What the pastry comes with: ticked to start, tapped off to leave out
 * ---------------------------------------------------------------------- */

.pa-keep {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 10px;
	min-height: var( --pa-tap );
	min-width: 0;
	position: relative;
	width: 100%;
}

.pa-keep input {
	border: 0;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.pa-keep__box {
	border: 1px solid var( --pa-line );
	border-radius: 6px;
	flex: 0 0 auto;
	height: 22px;
	position: relative;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	width: 22px;
}

.pa-keep__box::after {
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	content: "";
	height: 5px;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 47%;
	transform: translate( -50%, -50% ) rotate( -45deg );
	width: 10px;
}

.pa-keep input:checked + .pa-keep__box {
	background: var( --pa-brand );
	border-color: var( --pa-brand );
}

.pa-keep input:checked + .pa-keep__box::after {
	opacity: 1;
}

.pa-keep input:focus-visible + .pa-keep__box {
	outline: 2px solid var( --pa-brand );
	outline-offset: 2px;
}

/* A line turned off stays readable, but clearly is not coming. */
.pa-keep input:not( :checked ) ~ .pa-crow__label {
	color: var( --pa-muted );
	text-decoration: line-through;
}

.pa-unit--each {
	color: var( --pa-muted );
	font-size: 0.8125rem;
	white-space: nowrap;
}

@media ( max-width: 380px ) {
	.pa-crow {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.pa-crow__qty {
		align-self: flex-end;
	}
}

/* ------------------------------------------------------------------ *
 * weight picker
 * ------------------------------------------------------------------ */

.pa-weight {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1 1 auto;
	min-width: 0;
}

.pa-weight__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pa-weight__chip {
	min-height: 2.5rem;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--pa-line);
	border-radius: 999px;
	background: #fff;
	color: var(--pa-ink);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pa-weight__chip:hover {
	border-color: var(--pa-brand);
}

.pa-weight__chip.is-on {
	border-color: var(--pa-brand);
	background: var(--pa-brand-soft);
	color: var(--pa-brand);
}

.pa-weight__chip:focus-visible {
	outline: 2px solid var(--pa-brand);
	outline-offset: 2px;
}

.pa-weight__tune {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	align-self: flex-start;
	padding: 0.25rem;
	border: 1px solid var(--pa-line);
	border-radius: 999px;
	background: #fff;
}

.pa-weight__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--pa-brand);
	cursor: pointer;
}

.pa-weight__btn:hover {
	background: var(--pa-brand-soft);
}

.pa-weight__btn:focus-visible {
	outline: 2px solid var(--pa-brand);
	outline-offset: -2px;
}

.pa-weight__value {
	min-width: 4.5rem;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--pa-ink);
}

@media (min-width: 480px) {
	.pa-weight__chip {
		min-height: 2.75rem;
	}

	.pa-weight__btn {
		width: 2.75rem;
		height: 2.75rem;
	}
}

/* --------------------------------------------------------------------------
   Order tracking - every price in one voice

   WooCommerce hands money over as nested markup:

       span.woocommerce-Price-amount > bdi > span.woocommerce-Price-currencySymbol

   The totals rules above pick spans out by position, and a descendant
   selector does not stop at the row: the amount span inside a total is also
   "the first span", and the currency symbol inside that is also "the last
   span". So a price quietly took the label's serif face or the grand total's
   colour, and the same figure came out in a different font from everything
   around it. Those rules now reach their own row only, and the markup inside
   a price inherits from the row it sits in.
   -------------------------------------------------------------------------- */

.pa-otrack__totals .woocommerce-Price-amount,
.pa-otrack__totals .woocommerce-Price-currencySymbol,
.pa-otrack__totals bdi,
.pa-otrack__totals ins,
.pa-otrack__lineprice .woocommerce-Price-amount,
.pa-otrack__lineprice .woocommerce-Price-currencySymbol,
.pa-otrack__lineprice bdi,
.pa-otrack__linemeta .woocommerce-Price-amount,
.pa-otrack__linemeta .woocommerce-Price-currencySymbol,
.pa-otrack__linemeta bdi {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-decoration: none;
	background: none;
}

.pa-otrack__totals .woocommerce-Price-amount,
.pa-otrack__lineprice .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* "(includes 3,91 tax)" is an aside, so it reads as one instead of shouting
   beside the grand total at the grand total's size. */
.pa-otrack__total small,
.pa-otrack__total .includes_tax {
	display: block;
	margin-top: 2px;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--pa-otrack-ink-2);
	white-space: normal;
}


/* The tax aside is wider than the amount itself, so the value column took the
   aside's width and the price drifted away from the card edge. Anchor the whole
   column to the right so the money lines up with the rows above it. */
.pa-otrack__total > span:last-child {
	text-align: right;
}

.pa-otrack__total > span:last-child small,
.pa-otrack__total > span:last-child .includes_tax {
	display: block;
	text-align: right;
}


/* ===========================================================================
 * Account > Addresses > Edit (billing / shipping) - every platform
 *
 * WooCommerce's form-edit-address.php ships without a layout of its own, so
 * this screen inherited the account area's sidebar grid: the heading sat alone
 * while the fields were squeezed into a narrow column beside it, and nothing
 * about it answered the viewport. The theme now owns the template; this is its
 * layout. One card, a single-column stack on phones, two fields per row from
 * 640px, and the roomier rhythm the Addresses list uses from 1024px.
 * ========================================================================= */

/* page.php also prints the endpoint title, so that one is a duplicate here -
   the same treatment body.pa-addresses-screen already gets. */
body.pa-editaddress-screen .pa-page__title {
	display: none;
}

/* The shared account rules place the content div in a "240px minmax(0, 1fr)"
   sidebar grid from 768px up, and cap it at 860px from 1024px up.
   Account::dedupe_dashboard_nav() removes the account navigation on every
   account screen, so the content can become the first grid item and get
   trapped in the fixed 240px track. That is the narrow column in the report.
   Same escape the Addresses list and the order-details page already use. */
body.pa-editaddress-screen .woocommerce-account .woocommerce {
	display: block;
}

body.pa-editaddress-screen .woocommerce-MyAccount-content {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.pa-editaddr {
	width: 100%;
	max-width: 48rem;
	margin-inline: auto;
	color: var(--pa-ap-body, var(--pa-ink, #25181a));
}

.pa-editaddr__header {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	margin-bottom: 1rem;
}

.pa-editaddr__back {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	align-self: flex-start;
	min-height: var(--pa-tap, 44px);
	font-family: var(--pa-font-ui, inherit);
	font-size: .8125rem;
	font-weight: 600;
	color: var(--pa-muted, #857375);
	text-decoration: none;
}

.pa-editaddr__back:hover,
.pa-editaddr__back:focus-visible {
	color: var(--pa-brand, #8f4957);
}

.pa-editaddr__backarrow {
	font-size: 1rem;
	line-height: 1;
}

.pa-editaddr__title {
	margin: 0;
	font-family: var(--pa-font-display, inherit);
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 700;
	color: var(--pa-ink, #25181a);
}

.pa-editaddr__blurb {
	margin: 0;
	font-family: var(--pa-font-ui, inherit);
	font-size: .875rem;
	line-height: 1.5;
	color: var(--pa-muted, #857375);
}

.pa-editaddr__card {
	padding: 1rem;
	border: 1px solid var(--pa-line, #d7c1c3);
	border-color: color-mix(in srgb, var(--pa-line, #d7c1c3) 55%, transparent);
	border-radius: 16px;
	background: var(--pa-surface, #fff);
}

/* One field per row on a phone. */
.pa-editaddr__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .875rem 1rem;
	margin: 0;
}

/* WooCommerce prints every field as <p class="form-row">, and its own width
   classes (form-row-first / -last / -wide) assume a float layout. Inside a grid
   they only need to say how many tracks to span, so the floats and the 50%
   widths are cleared here. */
.pa-editaddr__grid .form-row,
.pa-editaddr__grid .woocommerce-input-wrapper {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	float: none;
	box-sizing: border-box;
}

.pa-editaddr__grid .form-row label {
	display: block;
	margin-bottom: .25rem;
	font-family: var(--pa-font-ui, inherit);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--pa-ink, #25181a);
}

.pa-editaddr__grid .form-row label .optional {
	font-weight: 500;
	color: var(--pa-muted, #857375);
}

.pa-editaddr__grid .form-row .required {
	color: var(--pa-danger, #ba1a1a);
	text-decoration: none;
}

.pa-editaddr__grid input.input-text,
.pa-editaddr__grid textarea,
.pa-editaddr__grid select,
.pa-editaddr__grid .select2-container .select2-selection--single {
	width: 100%;
	min-height: var(--pa-tap, 44px);
	box-sizing: border-box;
	padding: .625rem .75rem;
	border: 1px solid var(--pa-line, #d7c1c3);
	border-radius: 10px;
	background: var(--pa-surface, #fff);
	font-family: var(--pa-font-ui, inherit);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--pa-ink, #25181a);
}

.pa-editaddr__grid textarea {
	min-height: 88px;
	resize: vertical;
}

.pa-editaddr__grid input.input-text:focus,
.pa-editaddr__grid textarea:focus,
.pa-editaddr__grid select:focus {
	outline: 2px solid var(--pa-brand, #8f4957);
	outline-offset: 1px;
}

/* select2 is the country / state widget WooCommerce loads on this form. */
.pa-editaddr__grid .select2-container {
	width: 100% !important;
}

.pa-editaddr__grid .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: auto;
}

.pa-editaddr__grid .select2-container .select2-selection__arrow {
	height: 100%;
}

/* A field the shop chose to hide leaves no empty cell behind in a grid. */
.pa-editaddr__grid .psm-field-hidden {
	display: none !important;
}

.pa-editaddr__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .625rem;
	margin-top: 1rem;
}

.pa-editaddr__save {
	width: 100%;
	min-height: var(--pa-tap, 44px);
}

.pa-editaddr__cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pa-tap, 44px);
	font-family: var(--pa-font-ui, inherit);
	font-size: .875rem;
	font-weight: 600;
	color: var(--pa-muted, #857375);
	text-decoration: none;
}

.pa-editaddr__cancel:hover,
.pa-editaddr__cancel:focus-visible {
	color: var(--pa-brand, #8f4957);
}

/* Large phones, tablets and up: two fields per row. The street lines, the
   country picker and the email stay full width, because those are longer than
   half a card. */
@media (min-width: 640px) {

	.pa-editaddr__card {
		padding: 1.5rem;
	}

	.pa-editaddr__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pa-editaddr__grid .form-row-wide,
	.pa-editaddr__grid #billing_address_1_field,
	.pa-editaddr__grid #billing_address_2_field,
	.pa-editaddr__grid #billing_email_field,
	.pa-editaddr__grid #billing_country_field,
	.pa-editaddr__grid #shipping_address_1_field,
	.pa-editaddr__grid #shipping_address_2_field,
	.pa-editaddr__grid #shipping_country_field {
		grid-column: 1 / -1;
	}

	.pa-editaddr__actions {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 1rem;
	}

	.pa-editaddr__save {
		width: auto;
		min-width: 12rem;
	}
}

/* Tablet landscape, iPad and desktop: the Addresses list's rhythm. */
@media (min-width: 1024px) {

	.pa-editaddr {
		max-width: 56rem;
	}

	.pa-editaddr__header {
		gap: .5rem;
		margin-bottom: 1.5rem;
	}

	.pa-editaddr__title {
		font-size: 2rem;
	}

	.pa-editaddr__card {
		padding: 2rem;
	}

	.pa-editaddr__grid {
		gap: 1.125rem 1.5rem;
	}
}


/* ==========================================================================
   Language switcher
   Rendered by Pastry Translate in both headers. Sized to sit beside the icon
   buttons without crowding them.
   ========================================================================== */

.pa-langswitch {
	display: flex;
	align-items: center;
}

.pa-langswitch .pt-switcher {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--pa-line, rgba(0, 0, 0, 0.08));
	border-radius: var(--pa-r-pill, 999px);
	background: var(--pa-surface, #fff);
}

.pa-langswitch .pt-switcher__link {
	display: grid;
	place-items: center;
	min-width: 36px;
	height: 32px;
	padding: 0 9px;
	border-radius: var(--pa-r-pill, 999px);
	color: var(--pa-ink-2, #6b6b6b);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s var(--pa-ease, ease), color 0.18s var(--pa-ease, ease);
}

.pa-langswitch .pt-switcher__link:hover,
.pa-langswitch .pt-switcher__link:focus-visible {
	color: var(--pa-ink, #1a1a1a);
	background: color-mix(in srgb, var(--pa-brand, #c2185b) 10%, transparent);
}

.pa-langswitch .pt-switcher__link.is-current {
	color: #fff;
	background: var(--pa-brand, #c2185b);
}

/* In the top bar it sits at the far end, past the title. */
.pa-langswitch--top {
	margin-inline-start: auto;
}

@media (max-width: 380px) {
	.pa-langswitch--top .pt-switcher__link {
		min-width: 32px;
		padding: 0 7px;
		font-size: 11px;
	}
}


/* ==================================================================
 * Contact page & product page redesign (1.16.0)
 *
 * One set of rules for every screen. The phone gets the stacked cards,
 * a tablet gets wider cards, and from 1024px the same markup falls into
 * the two column layout - nothing is duplicated or hidden per device.
 *
 * Appended last on purpose: these rules are meant to win over the older
 * single-column product styles further up the file.
 * ================================================================== */

/* Small caps label used above headings on both screens. */
.pa-eyebrow {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-brand);
}

/* Both redesigned screens get the wide content column on desktop. */
@media (min-width: 1024px) {
	body.pa-contact-screen .pa-main,
	body.single-product .pa-main {
		max-width: var(--pa-content-max);
	}
}

/* ------------------------------------------------------------------ *
 * Contact
 * ------------------------------------------------------------------ */

.pa-view--contact {
	display: grid;
	gap: var(--pa-5);
	padding: 0 var(--pa-4) var(--pa-8);
}

.pa-contact__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pa-2);
}

.pa-view--contact .pa-crumbs,
.pa-product__bar .pa-crumbs {
	margin-bottom: 0;
}

.pa-contact__back,
.pa-product__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--pa-tap);
	color: var(--pa-brand);
	font-size: 0.85rem;
	font-weight: 650;
	text-decoration: none;
}

.pa-contact__back:hover,
.pa-product__back:hover {
	text-decoration: underline;
}

.pa-contact__intro {
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
}

.pa-contact__title {
	font-family: var(--pa-font-display, inherit);
	font-size: clamp(1.75rem, 6vw, 2.75rem);
	line-height: 1.1;
	margin: var(--pa-2) 0 0;
}

.pa-contact__lead {
	margin: var(--pa-3) auto 0;
	max-width: 58ch;
	color: var(--pa-ink-2);
	line-height: 1.6;
}

.pa-contact__grid {
	display: grid;
	gap: var(--pa-4);
}

.pa-contact__main,
.pa-contact__side {
	display: grid;
	gap: var(--pa-4);
	align-content: start;
}

.pa-view--contact .pa-card {
	padding: var(--pa-5);
	border-radius: var(--pa-r-xl);
}

/* --- The shop itself ------------------------------------------------ */

.pa-shopcard {
	display: grid;
	gap: var(--pa-4);
}

.pa-shopcard__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pa-3);
}

.pa-shopcard__name {
	font-family: var(--pa-font-display, inherit);
	font-size: clamp(1.25rem, 4.5vw, 1.6rem);
	line-height: 1.2;
	margin: 4px 0 0;
}

.pa-shopcard__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: var(--pa-3);
}

.pa-shopcard__actions .pa-btn {
	width: 100%;
}

.pa-view--contact .pa-btn--ghost {
	background: transparent;
	border: 1px solid var(--pa-line);
	color: var(--pa-brand-ink);
}

.pa-view--contact .pa-btn--ghost:hover {
	background: var(--pa-brand-soft);
	border-color: transparent;
}

.pa-shopcard__facts {
	display: grid;
	gap: var(--pa-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-factrow {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	align-items: start;
	gap: var(--pa-3);
	padding: var(--pa-3);
	border-radius: var(--pa-r);
	background: var(--pa-canvas);
}

.pa-factrow__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--pa-brand-soft);
	color: var(--pa-brand);
}

.pa-factrow__body {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.pa-factrow__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--pa-muted);
}

.pa-factrow__value {
	font-weight: 600;
	color: var(--pa-ink);
	overflow-wrap: anywhere;
}

.pa-factrow__note {
	color: var(--pa-muted);
	font-size: 0.85rem;
}

.pa-factrow__pair {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

.pa-factrow__key {
	min-width: 3.4rem;
	color: var(--pa-muted);
	font-size: 0.8rem;
}

.pa-factrow a {
	color: var(--pa-brand-ink);
	font-weight: 650;
	overflow-wrap: anywhere;
}

/* --- Decorative map card -------------------------------------------- *
 * Drawn in CSS rather than embedded: no API key to buy, no third-party
 * script watching customers, and it still opens their own maps app.
 */

.pa-shopmap {
	position: relative;
	height: clamp(9rem, 30vw, 13rem);
	border-radius: var(--pa-r-lg);
	border: 1px solid var(--pa-line);
	background: linear-gradient(140deg, var(--pa-brand-soft), var(--pa-canvas) 60%);
	overflow: hidden;
}

.pa-shopmap__canvas {
	position: absolute;
	inset: 0;
}

.pa-shopmap__road {
	position: absolute;
	background: rgba(255, 255, 255, 0.85);
	border-radius: var(--pa-r-pill);
}

.pa-shopmap__road--a {
	inset-inline: -10%;
	top: 32%;
	height: 12px;
	transform: rotate(-8deg);
}

.pa-shopmap__road--b {
	inset-block: -10%;
	left: 26%;
	width: 10px;
	transform: rotate(6deg);
}

.pa-shopmap__road--c {
	inset-inline: 18%;
	bottom: 22%;
	height: 8px;
	transform: rotate(4deg);
}

.pa-shopmap__pin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	justify-items: center;
	gap: 6px;
}

.pa-shopmap__flag {
	max-width: 12rem;
	padding: 5px 10px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-surface);
	box-shadow: var(--pa-shadow);
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pa-shopmap__dot {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--pa-brand);
	color: var(--pa-on-brand);
	box-shadow: 0 0 0 6px rgba(143, 73, 87, 0.15);
}

.pa-shopmap__link {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 2.25rem;
	padding: 0 12px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-surface);
	box-shadow: var(--pa-shadow);
	color: var(--pa-brand-ink);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.pa-contact__prose > :first-child {
	margin-top: 0;
}

.pa-contact__prose > :last-child {
	margin-bottom: 0;
}

/* --- Get in touch --------------------------------------------------- */

.pa-reach {
	display: grid;
	gap: var(--pa-4);
}

.pa-reach__title {
	font-family: var(--pa-font-display, inherit);
	font-size: 1.25rem;
	margin: 4px 0 0;
}

.pa-reach__sub {
	margin: 6px 0 0;
	color: var(--pa-ink-2);
	font-size: 0.9rem;
	line-height: 1.55;
}

.pa-reach__list {
	display: grid;
	gap: var(--pa-2);
}

.pa-reach__row {
	display: flex;
	align-items: center;
	gap: var(--pa-3);
	min-height: 3.75rem;
	padding: var(--pa-3);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-r);
	background: var(--pa-surface);
	color: inherit;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pa-reach__row:hover,
.pa-reach__row:focus-visible {
	background: var(--pa-brand-soft);
	border-color: transparent;
}

.pa-reach__row--primary {
	background: var(--pa-brand-soft);
	border-color: transparent;
}

.pa-reach__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--pa-brand);
	color: var(--pa-on-brand);
}

.pa-reach__text {
	flex: 1 1 auto;
	display: grid;
	gap: 2px;
	min-width: 0;
}

.pa-reach__value {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.pa-reach__row > .pa-icon {
	flex: 0 0 auto;
	color: var(--pa-muted);
}

/* --- Questions ------------------------------------------------------ */

.pa-faqs {
	display: grid;
	gap: var(--pa-2);
}

.pa-faqs__title {
	font-family: var(--pa-font-display, inherit);
	font-size: 1.25rem;
	margin: 0 0 var(--pa-2);
}

.pa-faq + .pa-faq {
	border-top: 1px solid var(--pa-line);
	padding-top: var(--pa-3);
}

.pa-faq__q {
	margin: 0 0 4px;
	font-size: 0.98rem;
	font-weight: 700;
}

.pa-faq__a {
	margin: 0;
	color: var(--pa-ink-2);
	font-size: 0.9rem;
	line-height: 1.55;
}

.pa-faqs__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--pa-2);
	font-weight: 650;
}

@media (min-width: 768px) {
	.pa-view--contact {
		gap: var(--pa-6);
	}

	.pa-shopcard__actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 26rem;
	}
}

@media (min-width: 1024px) {
	.pa-contact__grid {
		grid-template-columns: 7fr 5fr;
		align-items: start;
		gap: var(--pa-6);
	}

	.pa-view--contact .pa-card {
		padding: var(--pa-6);
	}

	.pa-contact__side {
		position: sticky;
		top: calc(var(--pa-topbar-h) + var(--pa-4));
	}
}

/* ------------------------------------------------------------------ *
 * Product page
 * ------------------------------------------------------------------ */

.pa-product__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pa-2);
	margin-bottom: var(--pa-4);
}

.pa-view--product .pa-product__grid {
	gap: var(--pa-5);
}

.pa-product__media {
	position: relative;
	border-radius: var(--pa-r-xl);
	border: 1px solid var(--pa-line);
	background: var(--pa-surface);
	overflow: hidden;
}

.pa-view--product .woocommerce-product-gallery {
	margin: 0;
	width: 100% !important;
}

.pa-view--product .woocommerce-product-gallery__image img,
.pa-view--product .woocommerce-product-gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.pa-product__fav {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 50%;
	box-shadow: var(--pa-shadow);
}

.pa-product__summary {
	display: grid;
	gap: var(--pa-3);
	align-content: start;
}

.pa-view--product .pa-product__meta {
	margin: 0;
	gap: var(--pa-2) var(--pa-3);
}

.pa-view--product .pa-product__price {
	font-family: var(--pa-font-display, inherit);
	font-size: clamp(1.35rem, 5vw, 1.8rem);
	color: var(--pa-brand-ink);
}

.pa-view--product .pa-product__price del {
	color: var(--pa-muted);
	font-size: 0.75em;
	font-weight: 500;
}

.pa-product__excerpt {
	color: var(--pa-ink-2);
	font-size: 0.95rem;
	line-height: 1.6;
}

.pa-product__excerpt > :first-child {
	margin-top: 0;
}

.pa-product__excerpt > :last-child {
	margin-bottom: 0;
}

.pa-facts--tiles {
	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
	gap: var(--pa-2);
	padding: var(--pa-2);
	background: var(--pa-brand-soft);
	border-radius: var(--pa-r-lg);
}

.pa-facts--tiles .pa-fact {
	justify-items: center;
	text-align: center;
	gap: 4px;
	padding: var(--pa-3) var(--pa-2);
	border-radius: var(--pa-r);
	background: var(--pa-surface);
}

.pa-facts--tiles .pa-fact .pa-icon {
	color: var(--pa-brand);
}

.pa-facts--tiles .pa-fact__value {
	font-size: 0.9rem;
}

.pa-facts--tiles .pa-fact__label {
	font-size: 0.72rem;
}

/* Purchase block. The quantity box is hidden by
 * Woo::single_quantity_args(); this collapses the empty wrapper Woo still
 * prints around the hidden field so it leaves no gap above the button. */
.pa-view--product .pa-product__form {
	margin: var(--pa-2) 0 0;
	gap: var(--pa-2);
}

.pa-view--product .quantity.hidden {
	display: none;
}

.pa-view--product form.cart {
	display: grid;
	gap: var(--pa-3);
	margin: 0;
}

.pa-view--product form.cart .single_add_to_cart_button,
.pa-view--product form.cart button[type="submit"] {
	width: 100%;
	min-height: 3.25rem;
	border-radius: var(--pa-r-pill);
	font-weight: 750;
}

.pa-stockwarn {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--pa-r);
	background: var(--pa-warn-soft);
	color: var(--pa-warn);
	font-size: 0.88rem;
	font-weight: 650;
	line-height: 1.45;
}

.pa-stockwarn[hidden] {
	display: none;
}

.pa-view--product .product_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px var(--pa-3);
	margin: 0;
	padding-top: var(--pa-3);
	border-top: 1px solid var(--pa-line);
	color: var(--pa-muted);
	font-size: 0.82rem;
}

.pa-view--product .product_meta a {
	color: var(--pa-brand-ink);
}

.pa-view--product .pa-product__info {
	gap: var(--pa-2);
	margin-top: var(--pa-6);
}

.pa-reviews {
	margin-top: var(--pa-6);
}

@media (min-width: 768px) {
	.pa-view--product .woocommerce-product-gallery__image img,
	.pa-view--product .woocommerce-product-gallery img {
		aspect-ratio: 3 / 2;
	}
}

@media (min-width: 1024px) {
	.pa-view--product .pa-product {
		max-width: var(--pa-content-max);
	}

	.pa-view--product .pa-product__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--pa-8);
	}

	.pa-view--product .woocommerce-product-gallery__image img,
	.pa-view--product .woocommerce-product-gallery img {
		aspect-ratio: 1 / 1;
	}

	.pa-product__media {
		position: sticky;
		top: calc(var(--pa-topbar-h) + var(--pa-4));
	}

	.pa-view--product .pa-product__info {
		max-width: 54rem;
		margin-inline: auto;
	}
}

/* Wide desktops: keep the reading measure sane rather than stretching
 * the summary text across the whole window. */
@media (min-width: 1280px) {
	.pa-view--product .pa-product__grid {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pa-reach__row {
		transition: none;
	}
}


/* ==================================================================
 * Product purchase sheet refinements (1.16.1)
 * ================================================================== */

/* The full product image is a supporting card, not a full-column billboard. */
.pa-view--product .pa-product__media {
	width: 100%;
	max-width: 34rem;
	margin-inline: auto;
}

.pa-view--product .woocommerce-product-gallery__image img,
.pa-view--product .woocommerce-product-gallery img {
	aspect-ratio: 4 / 3;
	max-height: 30rem;
}

/* Checkbox extras keep the same 0/1 values the manager already prices. */
.pa-choicecheck {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: var(--pa-tap);
	cursor: pointer;
}

.pa-choicecheck > input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.pa-choicecheck__box {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 1px solid var(--pa-line);
	border-radius: 6px;
	background: var(--pa-surface);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pa-choicecheck__box::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 47%;
	width: 10px;
	height: 5px;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	opacity: 0;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.pa-choicecheck > input:checked + .pa-choicecheck__box {
	background: var(--pa-brand);
	border-color: var(--pa-brand);
}

.pa-choicecheck > input:checked + .pa-choicecheck__box::after {
	opacity: 1;
}

.pa-choicecheck > input:focus-visible + .pa-choicecheck__box {
	outline: 2px solid var(--pa-brand);
	outline-offset: 2px;
}

@media (min-width: 1024px) {
	.pa-view--product .pa-product__grid {
		grid-template-columns: minmax(18rem, 5fr) minmax(0, 7fr);
	}

	.pa-view--product .woocommerce-product-gallery__image img,
	.pa-view--product .woocommerce-product-gallery img {
		aspect-ratio: 4 / 3;
	}
}


/* r20: header status uses the same visual edge as the homepage hero. */
@media (min-width:1024px) {
 .pa-dheader__strip { width:min(100%, var(--pa-content-max)); max-width:var(--pa-content-max); padding-inline:16px; box-sizing:border-box; }

 /* Generic hero chips use white text. Give both desktop header states the
  * same accessible chip treatment on the light status strip. */
 .pa-dheader__strip .pa-chipstat--open,
 .pa-dheader__strip .pa-chipstat--closed {
  background: var(--pa-brand-soft);
  color: var(--pa-brand-ink);
 }
}


/* r22: account dashboard matches the supplied asymmetric reference. */
@media (min-width:1024px) {
 body.pa-account-home .pa-main { padding-top:80px; padding-bottom:80px; }
 .pa-account .pa-tiles--bento { display:grid; grid-template-columns:repeat(4,84px); gap:16px; max-width:384px; margin:0 0 40px; overflow:visible; }
 .pa-account .pa-tiles--bento .pa-tile { width:84px; min-height:118px; padding:20px 8px; }
 .pa-account__feature { min-height:600px; }
}


/* Exact configured Mapbox GL style over the pre-delivery image fallback. */
.pa-otrack__premapcanvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .18s ease;
}
.pa-otrack__premapcanvas.is-ready { opacity: 1; }
.pa-otrack__premapnote { z-index: 2; }

/* =====================================================================
 * Product sheet, location control and cart recommendations — v1.16.8
 * ================================================================== */
.pa-sheet[data-kind="product"] .pa-sheet__panel {
	max-width: min(680px, calc(100vw - 24px));
	max-height: min(88dvh, 860px);
	border: 1px solid var(--pa-line);
}

.pa-sheet[data-kind="product"] .pa-sheet__content {
	scrollbar-gutter: stable;
}

.pa-sheet[data-kind="product"] .pa-psheet__media {
	aspect-ratio: 16 / 8;
	max-height: 280px;
}

.pa-sheet[data-kind="product"] .pa-psheet__body {
	gap: var(--pa-4, 16px);
	padding: var(--pa-5, 20px);
}

.pa-sheet[data-kind="product"] .pa-psheet__title {
	padding-inline-end: 42px;
	font-family: var(--pa-font-display, inherit);
	font-size: clamp(1.35rem, 5vw, 1.8rem);
	line-height: 1.15;
}

.pa-sheet[data-kind="product"] .pa-psheet__buy {
	z-index: 3;
	bottom: calc(-1 * var(--pa-5, 20px));
	margin: 0 calc(-1 * var(--pa-5, 20px));
	padding: var(--pa-3, 12px) var(--pa-5, 20px) calc(var(--pa-3, 12px) + var(--pa-safe-bottom));
	border-top: 1px solid var(--pa-line);
	box-shadow: 0 -10px 24px rgba(20, 17, 15, 0.06);
}

.pa-sheet[data-kind="product"] .pa-sheet__close {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--pa-line);
	border-radius: 50%;
	background: var(--pa-surface);
	box-shadow: var(--pa-shadow);
}

.pa-dcheck__tools {
	align-items: stretch;
}

.pa-dcheck__locate {
	width: 100%;
	min-height: 46px;
	padding-inline: var(--pa-4, 16px);
	border: 1.5px solid var(--pa-brand);
	background: var(--pa-surface);
	color: var(--pa-brand);
	box-shadow: none;
	font-weight: 700;
}

.pa-dcheck__locate:hover,
.pa-dcheck__locate:focus-visible {
	background: var(--pa-brand-soft);
	color: var(--pa-brand-ink);
}

.pa-dcheck__locate-icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pa-brand-soft);
}

.pa-dcheck__locate.is-busy .pa-dcheck__locate-icon {
	opacity: 0.55;
}

.woocommerce-cart .wc-block-grid__product-add-to-cart .button.is-busy,
.woocommerce-cart .cross-sells .button.is-busy {
	pointer-events: none;
	opacity: 0.65;
}

@media (min-width: 768px) {
	.pa-sheet[data-kind="product"] .pa-sheet__panel {
		left: 50%;
		right: auto;
		width: min(680px, calc(100vw - 24px));
		transform: translate(-50%, calc(100% + var(--pa-3, 12px)));
	}
	.pa-sheet[data-kind="product"].is-open .pa-sheet__panel {
		transform: translate(-50%, 0);
	}
	.pa-dcheck__locate {
		width: auto;
		min-width: 190px;
	}
}

/* Product-sheet treatment based on the supplied reference — v1.16.13 */
.pa-sheet[data-kind="product"] .pa-sheet__scrim {
	background: rgba(0, 0, 0, .58);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.pa-sheet[data-kind="product"] .pa-sheet__panel {
	width: min(520px, calc(100vw - 24px));
	max-width: min(520px, calc(100vw - 24px));
	max-height: min(88dvh, 820px);
	border: 1px solid color-mix(in srgb, var(--pa-line) 72%, transparent);
	border-radius: 30px;
	background: #fff;
	box-shadow: 0 24px 70px rgba(37, 24, 26, .24);
}

.pa-sheet[data-kind="product"] .pa-sheet__content {
	padding-bottom: 0;
	scrollbar-width: none;
}
.pa-sheet[data-kind="product"] .pa-sheet__content::-webkit-scrollbar { display: none; }

.pa-sheet[data-kind="product"] .pa-sheet__grab {
	position: absolute;
	z-index: 5;
	top: 0;
	left: 50%;
	width: 72px;
	transform: translateX(-50%);
}
.pa-sheet[data-kind="product"] .pa-sheet__grab::before {
	width: 42px;
	background: rgba(255,255,255,.72);
	box-shadow: 0 1px 3px rgba(37,24,26,.14);
}

.pa-sheet[data-kind="product"] .pa-sheet__close {
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255,255,255,.5);
	border-radius: 50%;
	background: rgba(255,255,255,.88);
	color: #25181a;
	box-shadow: 0 5px 16px rgba(37,24,26,.14);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.pa-sheet[data-kind="product"] .pa-psheet__media {
	position: relative;
	height: clamp(250px, 36vh, 320px);
	max-height: none;
	aspect-ratio: auto;
	background: var(--pa-brand-soft);
}
.pa-sheet[data-kind="product"] .pa-psheet__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0,0,0,.28), transparent 42%, rgba(0,0,0,.06));
}
.pa-sheet[data-kind="product"] .pa-psheet__media img {
	transition: transform .45s ease;
}
.pa-sheet[data-kind="product"] .pa-psheet__media:hover img { transform: scale(1.025); }

.pa-sheet[data-kind="product"] .pa-psheet__body {
	display: grid;
	gap: 20px;
	padding: 20px 20px 0;
}

.pa-sheet[data-kind="product"] .pa-psheet__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.pa-sheet[data-kind="product"] .pa-psheet__title {
	min-width: 0;
	padding: 0;
	font-family: var(--pa-font-display, inherit);
	font-size: clamp(1.45rem, 5vw, 1.72rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -.025em;
}
.pa-sheet[data-kind="product"] .pa-psheet__meta {
	display: grid;
	flex: 0 0 auto;
	justify-items: end;
	gap: 4px;
	text-align: right;
}
.pa-sheet[data-kind="product"] .pa-psheet__price {
	font-size: clamp(1.18rem, 4vw, 1.48rem);
	font-weight: 800;
	white-space: nowrap;
}
.pa-sheet[data-kind="product"] .pa-psheet__desc {
	margin: -8px 0 0;
	font-size: .9rem;
	line-height: 1.65;
}

.pa-sheet[data-kind="product"] .pa-option__legend,
.pa-sheet[data-kind="product"] .pa-field__label {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .075em;
	text-transform: uppercase;
}

.pa-sheet[data-kind="product"] .pa-weight__chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 9px;
}
.pa-sheet[data-kind="product"] .pa-weight__chip {
	min-width: 0;
	min-height: 52px;
	padding: 8px 6px;
	border: 1px solid var(--pa-line);
	border-radius: 16px;
	background: #fff;
	font-size: .82rem;
	font-weight: 700;
	box-shadow: 0 3px 12px rgba(143,73,87,.05);
}
.pa-sheet[data-kind="product"] .pa-weight__chip.is-on {
	border: 2px solid var(--pa-brand-btn, var(--pa-brand));
	background: var(--pa-brand-soft);
	color: var(--pa-brand-ink);
}

.pa-sheet[data-kind="product"] .pa-field--note textarea {
	min-height: 76px;
	padding: 13px 14px;
	border: 1px solid var(--pa-line);
	border-radius: 16px;
	background: #fffafb;
	font-size: .82rem;
	resize: none;
}
.pa-sheet[data-kind="product"] .pa-field--note textarea:focus {
	border-color: var(--pa-brand-btn, var(--pa-brand));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-brand) 13%, transparent);
	outline: 0;
}

.pa-sheet[data-kind="product"] .pa-acc--sheet {
	border: 1px solid var(--pa-line);
	border-radius: 16px;
	background: var(--pa-canvas);
	overflow: hidden;
}
.pa-sheet[data-kind="product"] .pa-acc--sheet summary { padding: 13px 14px; }

.pa-sheet[data-kind="product"] .pa-psheet__buy {
	z-index: 4;
	bottom: 0;
	order: 100;
	margin: 0 -20px;
	padding: 14px 20px calc(14px + var(--pa-safe-bottom));
	border-top: 1px solid var(--pa-line);
	background: rgba(255,255,255,.96);
	box-shadow: 0 -10px 32px rgba(37,24,26,.08);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.pa-sheet[data-kind="product"] .pa-weight__tune {
	min-width: 116px;
	min-height: 48px;
	border-radius: var(--pa-r-pill);
	background: var(--pa-canvas);
}
.pa-sheet[data-kind="product"] [data-pa-sheet-add] {
	min-height: 50px;
	border-radius: var(--pa-r-pill);
	box-shadow: 0 8px 24px rgba(215,133,148,.38);
	font-size: .92rem;
	font-weight: 750;
}
.pa-sheet[data-kind="product"] .pa-psheet__foot { order: 90; margin-bottom: 4px; }

@media (max-width: 520px) {
	.pa-sheet[data-kind="product"] .pa-sheet__panel {
		inset: auto 0 0;
		width: 100%;
		max-width: none;
		max-height: 92dvh;
		border-radius: 30px 30px 0 0;
	}
	.pa-sheet[data-kind="product"] .pa-weight__chips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}



/* Popup gesture and mobile navigation corrections — v1.16.14 */
.pa-sheet[data-kind="product"] .pa-psheet__media,
.pa-sheet[data-kind="product"] [data-pa-psheet-image] {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	touch-action: none;
}

/* Keep weight presets and tune controls together in their original purchase area. */
.pa-sheet[data-kind="product"] .pa-psheet__buy .pa-weight {
	position: static;
	order: 0;
}

@media (max-width: 1023.98px) {
	:root { --pa-tabbar-h: 64px; }

	.pa-tabbar {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		inset: auto 0 0 !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		width: 100% !important;
		max-width: none !important;
		min-height: calc(64px + var(--pa-safe-bottom));
		padding: 7px 8px calc(7px + var(--pa-safe-bottom));
		border-radius: 0;
		background: color-mix(in srgb, var(--pa-surface) 94%, transparent);
		box-shadow: 0 -8px 28px rgba(37,24,26,.09);
		-webkit-backdrop-filter: saturate(180%) blur(16px);
		backdrop-filter: saturate(180%) blur(16px);
	}

	.pa-tabbar .pa-tab {
		min-width: 0;
		min-height: 48px;
		padding: 4px 2px;
	}

	.pa-tabbar .pa-tab--search {
		display: flex !important;
		position: relative;
		flex: 0 0 52px;
		width: 52px;
		height: 52px;
		min-width: 52px;
		min-height: 52px;
		padding: 0;
		transform: none;
		border: 0;
		border-radius: 50%;
		background: var(--pa-brand-btn, var(--pa-brand));
		color: #fff !important;
		box-shadow: 0 7px 20px color-mix(in srgb, var(--pa-brand) 30%, transparent);
	}

	.pa-tabbar .pa-tab--search .pa-tab__icon { height: 24px; }
	.pa-tabbar .pa-tab--search .pa-tab__label { display: none !important; }

	body.pa-searching .pa-tabbar,
	body.pa-kb-open .pa-tabbar {
		display: none !important;
	}

	body.pa-has-tabbar .pa-main {
		padding-bottom: calc(64px + var(--pa-safe-bottom) + 28px);
	}

	.pa-sheet[data-kind="search"] .pa-sheet__panel {
		width: min(560px, calc(100vw - 20px));
		max-width: min(560px, calc(100vw - 20px));
		max-height: min(78dvh, 680px);
		border-radius: 26px 26px 0 0;
	}

	.pa-sheet[data-kind="search"] .pa-search {
		padding: 54px 14px 18px;
	}

	.pa-sheet[data-kind="search"] .pa-search__field {
		padding: 0 0 14px;
	}

	.pa-sheet[data-kind="search"] .pa-search__input {
		height: 52px;
		font-size: 16px; /* Prevent iOS input zoom. */
	}

	.pa-sheet[data-kind="search"] .pa-search__results .pa-item {
		grid-template-columns: minmax(0, 1fr) 96px;
		min-height: 132px;
		padding: 12px;
	}

	.pa-sheet[data-kind="search"] .pa-search__results .pa-item__name {
		font-size: 1.05rem;
		line-height: 1.25;
	}

	.pa-sheet[data-kind="search"] .pa-search__results .pa-item__desc {
		font-size: .84rem;
		line-height: 1.45;
	}

	.pa-sheet[data-kind="search"] .pa-search__results .pa-item__link,
	.pa-sheet[data-kind="search"] .pa-search__results .pa-item__name,
	.pa-sheet[data-kind="search"] .pa-search__results .pa-item__desc,
	.pa-sheet[data-kind="search"] .pa-search__results .pa-item__price {
		text-decoration: none;
	}

	.pa-sheet[data-kind="search"] .pa-search__results .pa-item__media {
		width: 96px;
		height: 96px;
	}
}


/* Search top panel and interaction corrections — v1.16.15 */
.pa-sheet[data-kind="product"] .pa-psheet__media:hover img,
.pa-sheet[data-kind="product"] [data-pa-psheet-image]:hover {
	transform: none !important;
}
.pa-sheet[data-kind="product"] .pa-psheet__media img {
	transition: none !important;
}

@media (max-width: 1023.98px) {
	.pa-tabbar .pa-tab--search {
		display: grid !important;
		place-items: center !important;
		align-self: center;
	}
	.pa-tabbar .pa-tab--search .pa-tab__icon {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		width: 100%;
		height: 100%;
		margin: 0;
	}

	.pa-sheet[data-kind="search"] .pa-sheet__panel {
		top: calc(var(--pa-safe-top, 0px) + 12px) !important;
		bottom: auto !important;
		inset-block-end: auto !important;
		max-height: min(72dvh, calc(100dvh - var(--pa-kb, 0px) - var(--pa-safe-top, 0px) - 24px));
		border-radius: 26px;
		transform: translateY(-18px);
		opacity: 0;
		transition: transform .22s var(--pa-ease-out), opacity .18s ease;
	}
	.pa-sheet[data-kind="search"].is-open .pa-sheet__panel {
		transform: translateY(0);
		opacity: 1;
	}
	.pa-sheet[data-kind="search"] .pa-sheet__close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
		border: 1px solid var(--pa-line);
		border-radius: 50%;
		background: var(--pa-surface);
		box-shadow: 0 5px 16px rgba(37,24,26,.1);
	}
	.pa-sheet[data-kind="search"] .pa-search {
		padding-top: 62px;
	}
}


/* Checkout line-item alignment and metadata rhythm — v1.16.17 */
.pa-co table.pa-co__table tbody.pa-co__items {
	gap: 0;
}
.pa-co table.pa-co__table tr.pa-co__item {
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--pa-co-outline-variant) 65%, transparent);
}
.pa-co table.pa-co__table tr.pa-co__item:first-child { padding-top: 0; }
.pa-co table.pa-co__table tr.pa-co__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.pa-co table.pa-co__table td.pa-co__itemmain {
	align-items: flex-start;
	gap: 12px;
}
.pa-co__thumb {
	width: 58px;
	height: 58px;
	margin-top: 1px;
}
.pa-co__itemtext {
	gap: 3px;
	line-height: 1.35;
}
.pa-co__itemname {
	overflow: visible;
	line-height: 1.35;
	text-overflow: clip;
	white-space: normal;
}
.pa-co table.pa-co__table td.pa-co__itemprice {
	flex: 0 0 76px;
	padding-top: 1px;
	font-variant-numeric: tabular-nums;
}
.pa-co__itemtext dl.variation,
.pa-co__itemtext .variation {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 2px 7px;
	margin: 4px 0 0;
	padding: 0;
	font-size: .78rem;
	line-height: 1.35;
	color: var(--pa-co-on-surface-variant);
}
.pa-co__itemtext dl.variation dt,
.pa-co__itemtext dl.variation dd,
.pa-co__itemtext .variation dt,
.pa-co__itemtext .variation dd {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
}
.pa-co__itemtext dl.variation dt,
.pa-co__itemtext .variation dt { font-weight: 600; }
.pa-co__itemtext dl.variation dd,
.pa-co__itemtext .variation dd { min-width: 0; }
.pa-co__itemtext dl.variation p,
.pa-co__itemtext .variation p { margin: 0; }

@media (max-width: 420px) {
	.pa-co table.pa-co__table tr.pa-co__item { gap: 8px; }
	.pa-co table.pa-co__table td.pa-co__itemmain { gap: 9px; }
	.pa-co__thumb { width: 52px; height: 52px; }
	.pa-co table.pa-co__table td.pa-co__itemprice { flex-basis: 66px; font-size: .82rem; }
}

/* ================================================================== *
 * 1.16.24 — compact menu-style Best sellers cards
 * ================================================================== */
.pa-items--scroller.pa-items--compact {
	grid-auto-columns: minmax(0, 286px);
	align-items: stretch;
}

.pa-items--compact .pa-item--list {
	width: 100%;
	height: 126px;
	min-height: 126px;
	padding: 8px;
	gap: 10px;
	overflow: hidden;
}

.pa-items--compact .pa-item--list .pa-item__link {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	height: 100%;
	min-width: 0;
}

.pa-items--compact .pa-item--list .pa-item__media {
	flex: 0 0 108px;
	width: 108px;
	height: 108px;
	min-height: 108px;
	aspect-ratio: 1;
	border-radius: calc(var(--pa-r-lg) - 5px);
}

.pa-items--compact .pa-item--list .pa-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.pa-items--compact .pa-item--list .pa-item__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	padding: 4px 34px 4px 0;
}

.pa-items--compact .pa-item__desc,
.pa-items--compact .pa-rating {
	display: none;
}

.pa-items--compact .pa-item__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 0.9rem;
	line-height: 1.3;
}

.pa-items--compact .pa-item__foot {
	margin-top: auto;
}

.pa-items--compact .pa-item__add {
	right: 8px;
	bottom: 8px;
	width: 32px;
	height: 32px;
}

.pa-items--compact .pa-fav {
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
}

@media (max-width: 479px) {
	.pa-items--scroller.pa-items--compact {
		grid-auto-columns: minmax(0, 268px);
	}
}

/* 1.16.25 — Best sellers use one compact size and no favourite heart. */
.pa-items--scroller.pa-items--compact {
	grid-auto-columns: 286px;
}

.pa-items--compact .pa-item--list {
	width: 286px;
	min-width: 286px;
	max-width: 286px;
	height: 126px;
	min-height: 126px;
	max-height: 126px;
}

.pa-items--compact .pa-item__fav,
.pa-items--compact .pa-fav {
	display: none !important;
}

.pa-items--compact .pa-item--list .pa-item__body {
	padding-right: 4px;
}

@media (max-width: 479px) {
	.pa-items--scroller.pa-items--compact {
		grid-auto-columns: 286px;
	}

	.pa-items--compact .pa-item--list {
		width: 286px;
		min-width: 286px;
		max-width: 286px;
	}
}

/* 1.16.26 — tighter Best sellers rail and card-level Popular badge. */
.pa-items--scroller.pa-items--compact {
	justify-content: start;
	justify-items: stretch;
	gap: 16px;
	column-gap: 16px;
}

/* The badge is rendered inside the media element. Making media static
 * positions the absolute badge against the card instead. */
.pa-items--compact .pa-item--list .pa-item__media {
	position: static;
}

.pa-items--compact .pa-item__badge,
.pa-items--compact .pa-item__badge--popular {
	top: 8px;
	left: 8px;
	right: auto;
	z-index: 3;
}


/* 1.16.27 — compact rail with fixed adjacent cards and top-right badge. */
.pa-items--scroller.pa-items--compact {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 14px;
	overflow-x: auto;
}

.pa-items--scroller.pa-items--compact > .pa-item--list {
	flex: 0 0 286px;
	width: 286px;
	min-width: 286px;
	max-width: 286px;
}

.pa-items--compact .pa-item__badge,
.pa-items--compact .pa-item__badge--popular {
	top: 8px;
	right: 8px;
	left: auto;
}

/* 1.16.28 — inset Popular badge inside the product image. */
.pa-items--compact .pa-item--list .pa-item__media {
	position: relative;
}

.pa-items--compact .pa-item__media .pa-item__badge,
.pa-items--compact .pa-item__media .pa-item__badge--popular {
	top: 6px;
	left: 6px;
	right: auto;
	z-index: 3;
}


/* 1.16.29 — top-right image badge and complete disabled sold-out sheet. */
.pa-items--compact .pa-item--list .pa-item__media {
	position: relative;
}

.pa-items--compact .pa-item__media .pa-item__badge,
.pa-items--compact .pa-item__media .pa-item__badge--popular {
	top: 6px;
	right: 6px;
	left: auto;
}

.pa-psheet__controls {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pa-psheet__controls.is-disabled :is(input, textarea, select, button) {
	cursor: not-allowed;
}

.pa-psheet__controls.is-disabled .pa-option__item,
.pa-psheet__controls.is-disabled .pa-crow,
.pa-psheet__controls.is-disabled .pa-field,
.pa-psheet__controls.is-disabled .pa-qty {
	opacity: 0.58;
}

.pa-psheet__controls.is-disabled [data-pa-sheet-add] {
	opacity: 0.68;
}


/* 1.16.30 — allergens belong directly below Special instructions. */
.pa-sheet[data-kind="product"] .pa-psheet__allergens {
	margin-top: 8px;
	padding: 11px 13px;
	border: 1px solid color-mix(in srgb, var(--pa-danger, #b42318) 24%, var(--pa-line));
	border-radius: 14px;
	background: color-mix(in srgb, var(--pa-danger, #b42318) 5%, var(--pa-surface));
	color: var(--pa-ink);
}

.pa-sheet[data-kind="product"] .pa-psheet__allergens-title {
	display: block;
	margin-bottom: 3px;
	font-size: 0.82rem;
}

.pa-sheet[data-kind="product"] .pa-psheet__allergens p {
	margin: 0;
	color: var(--pa-ink-2);
	font-size: 0.8rem;
	line-height: 1.45;
}

/* ================================================================== *
 * 1.16.31 — modern Favorites page
 * ================================================================== */
.pa-favorites-page {
	display: grid;
	gap: clamp(18px, 3vw, 30px);
}

.pa-favorites-hero {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: clamp(20px, 4vw, 34px);
	border: 1px solid color-mix(in srgb, var(--pa-brand) 22%, var(--pa-line));
	border-radius: 24px;
	background:
		radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--pa-brand) 16%, transparent), transparent 34%),
		linear-gradient(135deg, var(--pa-surface), color-mix(in srgb, var(--pa-brand-soft) 72%, #fff));
	overflow: hidden;
}

.pa-favorites-hero__icon,
.pa-favorites-empty__icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: var(--pa-brand);
	color: var(--pa-on-brand);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--pa-brand) 24%, transparent);
}

.pa-favorites-hero__eyebrow {
	margin: 0 0 4px;
	color: var(--pa-brand);
	font-family: var(--pa-font-ui, var(--pa-font));
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pa-favorites-hero__title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.08;
}

.pa-favorites-hero__text {
	max-width: 54ch;
	margin: 7px 0 0;
	color: var(--pa-ink-2);
	line-height: 1.55;
}

.pa-favorites-hero__count {
	display: grid;
	place-items: center;
	min-width: 104px;
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, var(--pa-brand) 20%, var(--pa-line));
	border-radius: 18px;
	background: rgba(255,255,255,.76);
	box-shadow: var(--pa-shadow-sm);
	text-align: center;
}

.pa-favorites-hero__count strong {
	color: var(--pa-brand);
	font-size: 1.65rem;
	line-height: 1;
}

.pa-favorites-hero__count span {
	margin-top: 5px;
	color: var(--pa-ink-2);
	font-size: 0.75rem;
	font-weight: 650;
}

.pa-favorites-toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
}

.pa-favorites-toolbar__title {
	margin: 0;
	font-size: clamp(1.2rem, 3vw, 1.55rem);
}

.pa-favorites-toolbar__hint {
	margin: 5px 0 0;
	color: var(--pa-ink-2);
	font-size: 0.88rem;
}

.pa-favorites-toolbar__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

.pa-favorites-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}

.pa-favorites-card {
	min-width: 0;
	transition: opacity .18s ease, transform .18s ease;
}

.pa-favorites-card.is-removing {
	opacity: 0;
	transform: scale(.96);
}

.pa-favorites-card .pa-item--tile {
	height: 100%;
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(37,24,26,.06);
}

.pa-favorites-card .pa-item--tile .pa-item__media {
	aspect-ratio: 4 / 3;
}

.pa-favorites-card .pa-item--tile .pa-item__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding-bottom: 54px;
}

.pa-favorites-card .pa-item__foot {
	margin-top: auto;
}

.pa-favorites-card .pa-fav {
	background: #fff;
	color: var(--pa-danger);
	box-shadow: 0 5px 18px rgba(37,24,26,.16);
}

.pa-favorites-card .pa-fav svg {
	fill: currentColor;
}

.pa-favorites-empty {
	display: grid;
	place-items: center;
	min-height: 340px;
	padding: 38px 20px;
	border: 1px dashed color-mix(in srgb, var(--pa-brand) 38%, var(--pa-line));
	border-radius: 24px;
	background: color-mix(in srgb, var(--pa-brand-soft) 52%, var(--pa-surface));
	text-align: center;
}

.pa-favorites-empty[hidden],
.pa-favorites-grid[hidden],
.pa-favorites-toolbar[hidden] {
	display: none !important;
}

.pa-favorites-empty h2 {
	margin: 18px 0 6px;
}

.pa-favorites-empty p {
	max-width: 40ch;
	margin: 0 0 20px;
	color: var(--pa-ink-2);
}

@media (max-width: 767px) {
	.pa-favorites-hero {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
	}

	.pa-favorites-hero__count {
		grid-column: 1 / -1;
		grid-template-columns: auto auto;
		justify-content: center;
		gap: 7px;
		width: 100%;
		min-width: 0;
		padding: 10px 14px;
	}

	.pa-favorites-hero__count span {
		margin: 0;
	}

	.pa-favorites-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.pa-favorites-toolbar__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.pa-favorites-toolbar__actions .pa-btn {
		width: 100%;
	}

	.pa-favorites-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (max-width: 430px) {
	.pa-favorites-hero__icon {
		width: 48px;
		height: 48px;
		border-radius: 15px;
	}

	.pa-favorites-grid {
		grid-template-columns: 1fr;
	}
}

.pa-otrack__notify { margin-top: .75rem; }
.pa-otrack__notify .pa-btn { display: inline-flex; align-items: center; gap: .45rem; }

/* ================================================================== *
 * 1.16.33 — keep the raised mobile Search action at the viewport centre
 * ================================================================== */
@media (max-width: 767.98px) {
	.pa-tabbar > .pa-tab--search {
		position: absolute !important;
		left: 50% !important;
		right: auto !important;
		top: -18px !important;
		bottom: auto !important;
		width: 58px !important;
		height: 58px !important;
		min-width: 58px !important;
		min-height: 58px !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: translateX(-50%) !important;
		align-self: auto !important;
		z-index: 3;
	}
}

/* ================================================================== *
 * 1.16.34 — compact raised Search action and clearer cart-bar spacing
 * ================================================================== */
@media (max-width: 767.98px) {
	.pa-tabbar > .pa-tab--search {
		top: -17px !important;
		width: 55px !important;
		height: 55px !important;
		min-width: 55px !important;
		min-height: 55px !important;
		border: 4px solid color-mix(in srgb, var(--pa-surface) 94%, transparent) !important;
		background-clip: padding-box;
	}

	/* Lift View order slightly farther away from the raised navigation. */
	.pa-cartbar {
		bottom: calc(var(--pa-tabbar-h) + var(--pa-safe-bottom) + 24px) !important;
	}
}