/**
 * 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);
	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);
	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-ink);
	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-success); }
.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) {
	.pa-viewport {
		background: #efeae4;
	}

	.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 */

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

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

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

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

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

.pa-auth__foot {
	margin-top: var(--pa-5);
	display: flex;
	align-items: center;
	gap: var(--pa-2);
	color: var(--pa-muted);
	font-size: 0.85rem;
}

/* ------------------------------------------------------------------ *
 * 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-auth--split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.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) {
	.woocommerce-account .woocommerce {
		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);
	border-color: 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-tab--search {
    position: relative;
    transform: translateY(-14px);
    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; }

.pa-ordrow__btn--primary { background: var(--pa-brand, #b4532a); color: #fff; }
.pa-ordrow__btn--primary:hover { background: var(--pa-brand-ink, #8f3f1f); color: #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);
	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
 * ================================================================= */