/**
 * DoughBoss storefront styles. Scoped under .db-app to avoid clashing with
 * the active theme.
 */

/* Self-hosted brand fonts (woff2, latin) — no third-party request, no CLS
 * (Impact/Arial fallbacks in the stack). Files live in public/fonts/, served
 * directly by WordPress; url() is relative to this stylesheet (css/ -> ../fonts/). */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
	src:url('../fonts/bebasneue-400.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
	src:url('../fonts/barlow-400.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
	src:url('../fonts/barlow-500.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
	src:url('../fonts/barlow-600.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
	src:url('../fonts/barlow-700.woff2') format('woff2');}

.db-app {
	--db-accent: #111111; /* mono brand accent (ex-red) — matches the 2026 ink/paper logo */
	--db-accent-dark: #000000;
	--db-border: #e6e1da;
	--db-muted: #6b6b6b;
	--db-r-sm: 10px;
	--db-r-md: 14px;
	--db-r-lg: 18px;
	--db-r-xl: 24px;
	--db-r-pill: 999px;
	--db-shadow-1: 0 1px 2px rgba(20, 16, 12, 0.05), 0 4px 12px rgba(20, 16, 12, 0.06);
	--db-shadow-2: 0 2px 6px rgba(20, 16, 12, 0.07), 0 12px 28px rgba(20, 16, 12, 0.10);
	--db-ease: cubic-bezier(0.32, 0.72, 0.33, 1);
	--db-t-fast: 150ms;
	--db-t-med: 220ms;
	--db-ink: #0d0d0d;
	--db-paper: #f7f5f0;
	--db-surface: #ffffff;
	--db-text: #2b2b2b;
	font-size: 16px;
	line-height: 1.5;
	color: #2b2b2b;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
}

/* Accessibility: visible keyboard focus + respect reduced motion (audit P4). */
.db-app :focus-visible {
	outline: 3px solid var(--db-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.db-app *,
	.db-app *::before,
	.db-app *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Non-blocking toast for transient errors (replaces alert()). */
.db-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 99999;
	background: #0d0d0d;
	color: #fff;
	padding: 13px 20px;
	border-radius: 14px;
	font-size: 14px;
	max-width: 90vw;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	border-left: 3px solid var(--db-accent);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
	.db-toast {
		background: rgba(13, 13, 13, 0.78);
		backdrop-filter: blur(12px) saturate(1.4);
		-webkit-backdrop-filter: blur(12px) saturate(1.4);
	}
}

.db-app * {
	box-sizing: border-box;
}

.db-loading,
.db-empty {
	padding: 1.5rem;
	text-align: center;
	color: var(--db-muted);
}

.db-error {
	color: #c41c14; /* stays red — errors must not blend into the mono accent */
	font-weight: 600;
}

.db-ordering-status {
	margin: 0 0 1.25rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--db-accent) 35%, var(--db-border));
	border-left: 4px solid var(--db-accent);
	border-radius: var(--db-r-md);
	background: color-mix(in srgb, var(--db-accent) 7%, var(--db-surface));
	color: var(--db-text);
}

.db-ordering-status strong {
	display: block;
	font-size: 1.05rem;
	margin-bottom: 0.2rem;
}

.db-ordering-status p {
	margin: 0;
	color: var(--db-muted);
}

/* Buttons ----------------------------------------------------------- */
.db-btn {
	background: var(--db-accent);
	color: #fff;
	border: 0;
	border-radius: var(--db-r-pill);
	padding: 0.6rem 1.25rem;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--db-t-fast) var(--db-ease), transform var(--db-t-fast) var(--db-ease), box-shadow var(--db-t-med) var(--db-ease);
}

.db-btn:active:not(:disabled) {
	transform: scale(0.98);
}

.db-btn:hover:not(:disabled) {
	background: var(--db-accent-dark);
}

.db-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.db-btn--lg {
	width: 100%;
	padding: 0.8rem 1rem;
	min-height: 44px;
	font-size: 1.05rem;
	margin-top: 0.75rem;
}

.db-link {
	background: none;
	border: 0;
	color: var(--db-accent-dark);
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
	font-size: 0.85rem;
}

/* Menu -------------------------------------------------------------- */
.db-app.db-menu {
	padding: clamp(1rem, 3vw, 2rem);
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-lg);
	background: var(--db-paper);
	color: var(--db-ink);
	box-shadow: var(--db-shadow-1);
}

.db-category {
	position: relative;
	margin: 1.75rem 0 1rem;
	padding-bottom: 0.55rem;
	font-size: 1.35em;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.db-category::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 4px;
	border-radius: var(--db-r-pill);
	background: var(--db-accent);
}

.db-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 1.25rem;
	min-inline-size: 0;
}

.db-card {
	border: 1px solid rgba(20, 16, 12, 0.06);
	border-radius: var(--db-r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: var(--db-shadow-1);
	transition: transform var(--db-t-med) var(--db-ease), box-shadow var(--db-t-med) var(--db-ease);
	min-inline-size: 0;
	max-inline-size: 100%;
}

@media (hover: hover) {
	.db-card:not(.db-card--soldout):hover {
		transform: translateY(-2px);
		box-shadow: var(--db-shadow-2);
	}
}

.db-card-img {
	position: relative;
	aspect-ratio: 4 / 3;
	min-height: 150px;
	background-size: cover;
	background-position: center;
	background-color: #f3efe9;
}

body.page-id-402 .entry-content,
body.page-id-402 .menucontent.entry-content {
	width: min(1280px, 100%);
	max-width: 100%;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 48px);
}

/* The current WordPress theme uses content-box containers with percentage
 * padding on the Order page. Keep the plugin page inside the viewport without
 * changing the rest of the legacy theme. */
body.page-id-402 .bgcontent,
body.page-id-402 .bgtext,
body.page-id-402 .bgheader {
	box-sizing: border-box;
	min-inline-size: 0;
	max-inline-size: 100%;
}

body.page-id-402 .bgcontent {
	inline-size: 100%;
	overflow-x: clip;
}

body.page-id-402 .bgtext {
	inline-size: auto;
}

body.page-id-402 #primary-menu > li > a {
	box-sizing: border-box;
	max-inline-size: 100%;
}

@media (max-width: 640px) {
	.db-app .db-grid { grid-template-columns: minmax(0, 1fr); }
	.db-app.db-menu { padding: 1rem; }
	body.page-id-402 .entry-content,
	body.page-id-402 .menucontent.entry-content { padding: 24px 16px; }
	body.page-id-402 .bgcontent { padding: 24px 16px; }
	body.page-id-402 .bgtext { margin-inline: 0; padding: 0; }
	body.page-id-402 .bgheader { margin: 16px 0 24px; inline-size: 100%; }
}

.db-card-img--placeholder {
	background-image: linear-gradient(135deg, #f3efe9 25%, #ece6dd 25%, #ece6dd 50%, #f3efe9 50%);
	background-size: 24px 24px;
}

.db-card-body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.db-card-body h4 {
	margin: 0 0 0.35rem;
}

.db-card-desc {
	color: var(--db-muted);
	font-size: 0.85rem;
	margin: 0 0 0.75rem;
	flex: 1;
}

.db-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.db-price {
	font-weight: 700;
}

/* Builder ----------------------------------------------------------- */
.db-builder-inner {
	border: 1px solid rgba(20, 16, 12, 0.06);
	border-radius: var(--db-r-lg);
	padding: 1.25rem;
	background: #fff;
	box-shadow: var(--db-shadow-1);
	max-width: 560px;
}

.db-builder-inner h4 {
	margin: 1rem 0 0.5rem;
}

.db-options {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.db-option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-md);
	cursor: pointer;
	transition: border-color var(--db-t-fast) var(--db-ease), background-color var(--db-t-fast) var(--db-ease);
}

@media (hover: hover) {
	.db-option:hover {
		border-color: var(--db-accent);
	}
}

.db-option span:nth-of-type(1) {
	flex: 1;
}

.db-option-price {
	color: var(--db-muted);
	font-size: 0.9rem;
}

.db-menu-options {
	display: grid;
	gap: 0.65rem;
	margin: 0.9rem 0;
}

.db-menu-customize {
	margin: 0.75rem 0;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-md);
	background: var(--db-paper);
	overflow: hidden;
}

.db-menu-customize > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	touch-action: manipulation;
}

.db-menu-customize > summary::-webkit-details-marker {
	display: none;
}

.db-menu-customize > summary::after {
	content: "+";
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
}

.db-menu-customize[open] > summary::after {
	content: "−";
}

.db-menu-customize .db-menu-options {
	max-height: min(340px, 45vh);
	margin: 0;
	padding: 0 0.75rem 0.75rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.db-card-customize-note {
	margin: 0.7rem 0;
	color: var(--db-muted);
	font-size: 0.78rem;
	font-weight: 600;
}

.db-menu-option-group {
	min-width: 0;
	margin: 0;
	padding: 0.65rem;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-md);
}

.db-menu-option-group legend {
	padding: 0 0.25rem;
	font-size: 0.9rem;
	font-weight: 700;
}

.db-menu-option {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.25rem 0;
	cursor: pointer;
}

.db-menu-option span:nth-of-type(1) {
	flex: 1;
}

.db-builder-foot {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
	flex-wrap: wrap;
	border-top: 1px dashed var(--db-border);
	padding-top: 1rem;
}

.db-builder-price {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--db-accent-dark);
	flex: 0 0 auto;
}

.db-builder-foot .db-btn--lg {
	margin-top: 0;
	flex: 1 1 12rem;
	min-width: 0;
	width: auto;
}

/* Cart -------------------------------------------------------------- */
.db-cart-lines {
	border: 1px solid rgba(20, 16, 12, 0.06);
	border-radius: var(--db-r-lg);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--db-shadow-1);
}

.db-cart-line {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	border-bottom: 1px solid var(--db-border);
}

.db-cart-line:last-child {
	border-bottom: 0;
}

.db-cart-line-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.db-cart-line-info small {
	color: var(--db-muted);
	overflow-wrap: anywhere;
}

.db-qty {
	width: 60px;
	padding: 0.45rem;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-sm);
	transition: border-color var(--db-t-fast) var(--db-ease);
}

.db-qty:focus {
	border-color: var(--db-accent);
}

@media (max-width: 480px) {
	.db-builder-foot {
		align-items: stretch;
	}

	.db-builder-price {
		flex-basis: 100%;
	}

	.db-builder-foot .db-btn--lg {
		width: 100%;
	}

	.db-cart-line {
		align-items: center;
		flex-wrap: wrap;
	}

	.db-cart-line-info {
		flex-basis: 100%;
		width: 100%;
	}
}

.db-fulfilment {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0;
}

.db-totals {
	border-top: 1px solid var(--db-border);
	padding-top: 0.75rem;
	margin-top: 0.5rem;
}

.db-total-row {
	display: flex;
	justify-content: space-between;
	padding: 0.2rem 0;
}

.db-total-row--grand {
	font-size: 1.2rem;
	font-weight: 800;
	border-top: 2px solid var(--db-accent);
	margin-top: 0.4rem;
	padding-top: 0.5rem;
}

.db-total-note {
	color: var(--db-muted);
	font-size: 0.85rem;
	margin-top: 0.25rem;
}

/* Verified QR table context ----------------------------------------- */
.db-table-context {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--db-accent);
	border-radius: var(--db-r-sm);
	background: #fff8e8;
	color: var(--db-ink);
}

.db-table-context-icon {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--db-accent);
	color: #fff;
	font-weight: 800;
}

.db-table-context-copy {
	display: flex;
	flex-direction: column;
	gap: 0.08rem;
}

.db-table-context-copy strong { font-size: 0.95rem; }
.db-table-context-copy span { color: var(--db-muted); font-size: 0.85rem; }
.db-table-context--compact { margin-bottom: 0; }

/* Checkout ---------------------------------------------------------- */
.db-checkout {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.db-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.db-field span {
	font-size: 0.85rem;
	font-weight: 600;
}

.db-field input,
.db-field textarea {
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-sm);
	font: inherit;
	transition: border-color var(--db-t-fast) var(--db-ease);
}

.db-field input:focus,
.db-field textarea:focus {
	border-color: var(--db-accent);
}

.db-checkout-msg {
	min-height: 1rem;
}

.db-checkout-safety {
	background: linear-gradient(135deg, #fff4df, #fffaf2);
	border: 1px solid rgba(226, 77, 40, 0.24);
	border-left: 5px solid var(--db-accent);
	border-radius: var(--db-r-md);
	box-shadow: 0 12px 28px rgba(45, 28, 14, 0.08);
	color: #3b2a1d;
	font-size: 0.92rem;
	padding: 0.9rem 1rem;
}

.db-checkout-safety strong {
	display: block;
	font-weight: 900;
	margin-bottom: 0.35rem;
	text-transform: uppercase;
}

.db-checkout-safety ul {
	margin: 0;
	padding-left: 1.05rem;
}

.db-checkout-safety li + li {
	margin-top: 0.28rem;
}

/* Card payment (Stripe) --------------------------------------------- */
.db-cardfield {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.db-field-label {
	font-size: 0.85rem;
	font-weight: 600;
}

.db-card-element {
	padding: 0.7rem 0.75rem;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-sm);
	background: #fff;
}


.db-confirm {
	border: 2px solid var(--db-accent);
	border-radius: var(--db-r-xl);
	padding: 1.75rem 1.5rem;
	text-align: center;
	background: #fff8f5;
	box-shadow: var(--db-shadow-1);
}

.db-confirm .db-btn--track {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.4rem;
	min-height: 44px;
	text-decoration: none;
}

/* Tracking ---------------------------------------------------------- */
.db-track-form {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	max-width: 380px;
}

.db-track-form label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.db-track-form input {
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-sm);
	font: inherit;
	transition: border-color var(--db-t-fast) var(--db-ease);
}

.db-track-form input:focus {
	border-color: var(--db-accent);
}

.db-track-card {
	margin-top: 1rem;
	border: 1px solid rgba(20, 16, 12, 0.06);
	border-radius: var(--db-r-lg);
	padding: 1.25rem;
	max-width: 380px;
	background: #fff;
	box-shadow: var(--db-shadow-1);
}

.db-status-badge {
	display: inline-block;
	background: var(--db-accent);
	color: #fff;
	border-radius: var(--db-r-pill);
	padding: 0.3rem 0.9rem;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
}

.db-track-timing,
.db-track-collection,
.db-track-note {
	border-left: 4px solid var(--db-accent);
	padding: 0.55rem 0.7rem;
	background: #fff8f5;
}

.db-track-collection {
	border-color: #137333;
	font-weight: 700;
}

.db-track-payment,
.db-track-checked {
	color: #5f6368;
	font-size: 0.85rem;
}

.db-track-checked { margin-bottom: 0; }

.db-item-list {
	margin: 0.5rem 0;
	padding-left: 1.1rem;
}

/* Order progress tracker -------------------------------------------- */
.db-stage-tracker {
	list-style: none;
	display: flex;
	margin: 1rem 0 0.75rem;
	padding: 0;
}

.db-stage {
	flex: 1;
	position: relative;
	padding-top: 1.7rem;
	text-align: center;
	font-size: 0.72rem;
	line-height: 1.25;
	color: var(--db-muted);
}

/* Connector line between dots (none before the first stage). */
.db-stage::before {
	content: '';
	position: absolute;
	top: 0.65rem;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--db-border);
}

.db-stage:first-child::before {
	display: none;
}

.db-stage--done::before,
.db-stage--current::before {
	background: var(--db-accent);
}

.db-stage-dot {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	width: 1.35rem;
	height: 1.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--db-border);
	border-radius: var(--db-r-pill);
	background: #fff;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	z-index: 1;
}

.db-stage--done .db-stage-dot {
	background: var(--db-accent);
	border-color: var(--db-accent);
}

.db-stage--current .db-stage-dot {
	border-color: var(--db-accent);
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px var(--db-accent);
}

.db-stage--current {
	color: var(--db-accent-dark);
	font-weight: 700;
}

/* Animated only when the visitor hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.db-stage-dot {
		transition: background var(--db-t-med) var(--db-ease), border-color var(--db-t-med) var(--db-ease);
	}

	.db-stage::before {
		transition: background var(--db-t-med) var(--db-ease);
	}
}

.db-track-eta {
	margin: 0.25rem 0 0.75rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.db-track-eta--ready {
	color: var(--db-accent-dark);
}

.db-track-cancelled {
	margin: 0.75rem 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid #c41c14; /* stays red — must not blend into the mono accent */
	border-radius: var(--db-r-sm);
	color: #c41c14;
	font-weight: 700;
	font-size: 0.9rem;
}

.db-track-pay-hint {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--db-muted);
}

.db-track-paid {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--db-muted);
}

/* Sold out --------------------------------------------------------- */
.db-card--soldout {
	opacity: 0.72;
}

.db-card--soldout .db-card-img {
	filter: grayscale(0.85);
}

.db-soldout-badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	background: #2b2b2b;
	color: #fff;
	border-radius: var(--db-r-pill);
	padding: 0.25rem 0.65rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Shop picker ------------------------------------------------------ */
.db-shop {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	border: 1px solid rgba(20, 16, 12, 0.06);
	border-radius: var(--db-r-lg);
	padding: 1rem 1.1rem;
	background: #fff;
	box-shadow: var(--db-shadow-1);
	max-width: 420px;
}

.db-shop-heading {
	font-size: 0.85rem;
	font-weight: 700;
}

.db-shop-name {
	font-size: 1.05rem;
}

.db-shop-select,
.db-cart-shop .db-shop-select {
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-sm);
	font: inherit;
	background: #fff;
	transition: border-color var(--db-t-fast) var(--db-ease);
}

.db-shop-select:focus {
	border-color: var(--db-accent);
}

.db-shop-info {
	color: var(--db-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}

.db-cart-shop {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 1rem 0 0;
}

.db-cart-shop-label {
	font-size: 0.85rem;
	font-weight: 600;
}

/* Voucher code box in the cart */
.db-total-row--discount span:last-child { color: #1f9d55; font-weight: 600; }

.db-voucher { margin: 0.75rem 0 1rem; }
.db-voucher-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.db-voucher-input {
	flex: 1;
	min-width: 0;
	padding: 0.65rem 0.8rem;
	border: 1px solid #d8d8d8;
	border-radius: var(--db-r-sm);
	font-size: 0.95rem;
	text-transform: uppercase;
	transition: border-color var(--db-t-fast) var(--db-ease);
}
.db-voucher-input:focus { outline: none; border-color: #111; }
.db-btn--sm { padding: 0.6rem 1rem; font-size: 0.9rem; }

@media (max-width: 480px) {
	.db-voucher-row { align-items: stretch; flex-direction: column; }
	.db-voucher-row .db-btn--sm { min-height: 44px; width: 100%; }
}
.db-voucher-applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.65rem 0.9rem;
	background: #f0f9f3;
	border: 1px solid #bfe6cf;
	border-radius: var(--db-r-md);
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: var(--db-shadow-1);
}
.db-voucher-msg { margin-top: 0.4rem; font-size: 0.85rem; color: #d4351c; }

/* ===== UPLIFT-1 Phase 1: storefront design parity (appended, CSS-only) ===== */
/* Pure visual/UX port of the demo tone onto the real storefront. Every selector
 * stays under .db-app; no markup/JS/money-path change. Selectors verified against
 * public/js/doughboss.js renderMenu + builder output. */

/* Paper-tone tokens + brand body font. */
.db-app {
	--db-ink: #0d0d0d;
	--db-paper: #f7f5f0;
	--db-linel: #e6e2da;
	font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Bebas display utility (opt-in on headings). */
.db-app .db-disp {
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	letter-spacing: .02em;
	line-height: .9;
	text-transform: uppercase;
	font-weight: 400;
}

/* Buttons: boxy demo geometry + Bebas label + tap affordance. Colour/hover/active
 * already defined above — not restated (no !important, no duplicate :active). */
.db-app .db-btn {
	border-radius: var(--db-r-md);
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	touch-action: manipulation;
}

@media (pointer: coarse) {
	.db-app .db-btn { min-height: 44px; }
}

/* Menu cards: Bebas item name + mono tabular price + softened media. */
.db-app .db-card-body h4 {
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	letter-spacing: .02em;
	line-height: 1.05;
	text-transform: uppercase;
	font-weight: 400;
}
.db-app .db-price {
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}
.db-app .db-card-img {
	border-radius: var(--db-r-md) var(--db-r-md) 0 0;
	box-shadow: var(--db-shadow-1);
}

/* Branded placeholder tile (boxed mono wordmark) for photo-less items —
 * .db-card-img--placeholder is emitted by renderMenu when item.image is absent. */
.db-app .db-card-img--placeholder {
	background-image: none;
	background: #fff;
	border: 2px solid var(--db-ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	box-shadow: var(--db-shadow-1);
}
.db-app .db-card-img--placeholder::before {
	content: "DB";
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	font-size: 34px;
	letter-spacing: .1em;
	color: var(--db-ink);
	line-height: 1;
}
.db-app .db-card-img--placeholder::after {
	content: "DOUGH BOSS";
	font-weight: 600;
	font-size: 8px;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: var(--db-muted);
	padding-left: .4em;
}

/* Builder option rows (<label class="db-option"><input>…</label>): soft shadow,
 * ink accent on the control, and a selected-state ring via :has (2020+ browsers;
 * old Safari simply shows no ring — the native radio/checkbox still indicates). */
.db-app .db-option {
	box-shadow: var(--db-shadow-1);
	touch-action: manipulation;
}
.db-app .db-option input { accent-color: var(--db-ink); }
.db-app .db-option:has(input:checked) {
	border-color: var(--db-ink);
	box-shadow: 0 0 0 1px var(--db-ink), var(--db-shadow-1);
}

/* Confirmation: mono border + optional pop-in check badge (badge markup is a
 * Phase-2 JS addition; the styles are dormant until then, harmless if unused). */
.db-app .db-confirm {
	border: 2px solid var(--db-ink);
	border-radius: var(--db-r-xl);
	background: var(--db-paper);
}
.db-app .db-confirm-check {
	width: 54px;
	height: 54px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: #1f8a54;
	color: #fff;
	font-size: 27px;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
	.db-app .db-confirm-check { animation: db-checkpop .42s var(--db-ease) both; }
}
@keyframes db-checkpop {
	0% { transform: scale(.4); opacity: 0; }
	60% { transform: scale(1.12); }
	100% { transform: scale(1); opacity: 1; }
}

/* Success toast variant (Phase-2 JS calls showToast(msg, ok); dormant until then). */
.db-app .db-toast--ok {
	background: var(--db-ink);
	color: #fff;
}
.db-app .db-toast--ok::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	border-radius: 50%;
	background: #1f8a54;
	vertical-align: middle;
}

/* ===== UPLIFT-1 Phase 2: motion "heart" — spring physics + tactile feedback ===== */
/* Brings back the bouncy, alive feel: a spring easing curve with overshoot,
 * staggered card entrance, tap bounce, a sticky category jump-bar, and a
 * celebratory confirmation. All fully disabled under prefers-reduced-motion. */

.db-app {
	--db-spring: cubic-bezier(.34, 1.56, .64, 1);       /* overshoots ~1.1 — the "bounce" */
	--db-spring-soft: cubic-bezier(.22, 1.2, .36, 1);   /* gentler overshoot */
}

/* Tap bounce on buttons (springier press than the base scale). */
.db-app .db-btn {
	transition: background var(--db-t-fast) var(--db-ease),
		transform var(--db-t-fast) var(--db-spring),
		box-shadow var(--db-t-med) var(--db-ease);
}
.db-app .db-btn:active:not(:disabled) { transform: scale(.94); }

/* Reusable "pop" (dbPop() adds .db-pop on add-to-cart, etc.). */
@keyframes db-pop {
	0% { transform: scale(1); }
	35% { transform: scale(1.14); }
	70% { transform: scale(.97); }
	100% { transform: scale(1); }
}
.db-app .db-pop { animation: db-pop .4s var(--db-spring); }

/* Staggered card entrance — the menu cascades in instead of snapping. --db-i is
 * set per-card in renderMenu (capped), so the delay stays snappy on long menus. */
@keyframes db-cardin {
	from { opacity: 0; transform: translateY(16px) scale(.98); }
	to { opacity: 1; transform: none; }
}
.db-app .db-grid .db-card {
	animation: db-cardin .5s var(--db-spring) both;
	animation-delay: calc(var(--db-i, 0) * 45ms);
	transition: transform var(--db-t-med) var(--db-spring), box-shadow var(--db-t-med) var(--db-ease);
}
@media (hover: hover) {
	.db-app .db-card:not(.db-card--soldout):hover { transform: translateY(-4px); }
}

/* Builder option rows: subtle spring on press + selected lift. */
.db-app .db-option {
	transition: border-color var(--db-t-fast) var(--db-ease),
		background-color var(--db-t-fast) var(--db-ease),
		transform var(--db-t-fast) var(--db-spring),
		box-shadow var(--db-t-fast) var(--db-ease);
}
.db-app .db-option:active { transform: scale(.98); }
.db-app .db-option:has(input:checked) { transform: scale(1.015); }

/* Sticky category jump-bar (rendered by renderMenu when >1 category). */
.db-app .db-jumpbar {
	position: sticky;
	top: var(--db-sticky-top, 0px);
	z-index: 20;
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	padding: .6rem 0;
	margin: .25rem 0 1rem;
	background: var(--db-paper, #f7f5f0);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.db-app .db-jumpbar::-webkit-scrollbar { display: none; }
.db-app .db-jump {
	flex: 0 0 auto;
	min-height: 44px;
	border: 1px solid var(--db-border);
	background: #fff;
	color: inherit;
	border-radius: var(--db-r-pill);
	padding: .4rem .9rem;
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	touch-action: manipulation;
	transition: transform var(--db-t-fast) var(--db-spring),
		border-color var(--db-t-fast) var(--db-ease),
		background var(--db-t-fast) var(--db-ease);
}
@media (hover: hover) { .db-app .db-jump:hover { border-color: var(--db-ink); } }
.db-app .db-jump:active { transform: scale(.92); }
/* Land category headings below the sticky bar on jump. */
.db-app .db-category { scroll-margin-top: 64px; }

/* Fixed cart cue: rendered inside the menu shortcode and only revealed when
 * the existing server-owned cart is non-empty. Its moderate stacking level
 * keeps theme cookie/privacy controls above it. */
.db-app.db-menu--has-cart-fab { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.db-app .db-cart-fab {
	display: none;
	position: fixed;
	left: max(12px, env(safe-area-inset-left, 0px));
	right: max(12px, env(safe-area-inset-right, 0px));
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 40;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 56px;
	padding: .65rem .85rem .65rem 1rem;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--db-r-md);
	background: var(--db-ink, #0d0d0d);
	box-shadow: var(--db-shadow-2);
	color: #fff;
	font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	text-decoration: none;
	touch-action: manipulation;
}
.db-app .db-cart-fab.is-shown { display: flex; animation: db-cart-fab-in .26s var(--db-ease) both; }
.db-app .db-cart-fab-copy { display: grid; gap: .05rem; min-width: 0; }
.db-app .db-cart-fab-label { font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; }
.db-app .db-cart-fab-count { color: #d9d5ce; font-size: .82rem; }
.db-app .db-cart-fab-total { color: #fff; font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif; font-size: 1.65rem; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.db-app .db-cart-fab:active { transform: scale(.98); }
.db-app .db-cart-fab--bump .db-cart-fab-total,
.db-app .db-cart-fab--bump .db-cart-fab-count { animation: db-cart-fab-bump .38s var(--db-spring); }
@keyframes db-cart-fab-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes db-cart-fab-bump { 0% { transform: scale(1); } 35% { transform: scale(1.13); } 70% { transform: scale(.98); } 100% { transform: scale(1); } }

@media (max-width: 360px) {
	.db-app.db-menu--has-cart-fab { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
	.db-app .db-cart-fab { gap: .5rem; padding-inline: .75rem; }
	.db-app .db-cart-fab-copy { overflow: hidden; }
	.db-app .db-cart-fab-label,
	.db-app .db-cart-fab-count {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.db-app .db-cart-fab-label { font-size: 1rem; }
	.db-app .db-cart-fab-count { font-size: .75rem; }
	.db-app .db-cart-fab-total { flex: 0 0 auto; font-size: 1.35rem; }

	.db-stage-tracker {
		gap: .25rem;
		overflow-x: auto;
		padding-bottom: .35rem;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}
	.db-stage {
		flex: 0 0 78px;
		min-width: 78px;
		scroll-snap-align: start;
	}
}

.db-app .db-review-invite {
	display: grid;
	gap: .35rem;
	margin-top: 1rem;
	padding: 1rem;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-md);
	background: var(--db-paper, #f7f5f0);
}
.db-app .db-review-invite span { color: var(--db-muted); font-size: .92rem; }
.db-app .db-review-invite__actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.db-app .db-review-invite a { width: fit-content; color: var(--db-ember); font-weight: 800; text-underline-offset: 3px; }

/* Success toast springs up from the bottom. */
@keyframes db-toastin {
	from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.96); }
	to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.db-app .db-toast,
.db-toast { animation: db-toastin .34s var(--db-spring, cubic-bezier(.34,1.56,.64,1)) both; }

/* Reduced-motion: kill entrance/pop so nothing flashes or lingers hidden
 * (the global guard zeroes duration but not delay — be explicit here). */
@media (prefers-reduced-motion: reduce) {
	.db-app .db-grid .db-card,
	.db-app .db-pop,
	.db-app .db-toast,
	.db-toast,
	.db-app .db-cart-fab,
	.db-app .db-cart-fab--bump .db-cart-fab-total,
	.db-app .db-cart-fab--bump .db-cart-fab-count { animation: none !important; }
	.db-app .db-grid .db-card { opacity: 1 !important; transform: none !important; }
}

/* ===== UPLIFT-2: complete menu -> payment -> tracking journey ===== */

/* Menu discovery. The category pills and search travel as one compact toolbar,
 * so long menus remain quick to navigate on phones and touch displays. */
.db-app .db-menu-tools {
	position: sticky;
	top: var(--db-sticky-top, 0px);
	z-index: 25;
	display: grid;
	grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
	align-items: center;
	gap: .45rem 1rem;
	margin: -.25rem 0 1.25rem;
	padding: .7rem;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-lg);
	background: color-mix(in srgb, var(--db-paper) 92%, transparent);
	box-shadow: var(--db-shadow-1);
	min-width: 0;
	max-width: 100%;
}

@supports (backdrop-filter: blur(12px)) {
	.db-app .db-menu-tools {
		backdrop-filter: blur(12px) saturate(1.1);
	}
}

.db-app .db-menu-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}

.db-app .db-menu-search-icon {
	position: absolute;
	left: .8rem;
	font-size: 1.2rem;
	line-height: 1;
	pointer-events: none;
}

.db-app .db-menu-search {
	width: 100%;
	min-height: 46px;
	padding: .65rem .9rem .65rem 2.35rem;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-pill);
	background: #fff;
	color: var(--db-ink);
	font: inherit;
}

.db-app .db-menu-search:focus {
	border-color: var(--db-ink);
}

.db-app .db-menu-search-status {
	grid-column: 1;
	color: var(--db-muted);
	font-size: .78rem;
	padding-inline: .8rem;
}

.db-app .db-menu-tools .db-jumpbar {
	position: static;
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
	padding: .15rem 0;
	background: transparent;
	min-width: 0;
	max-width: 100%;
}

.db-app .db-card[hidden],
.db-app .db-grid[hidden],
.db-app .db-category[hidden] {
	display: none;
}

/* Guided order page. */
.db-app.db-cart {
	padding: clamp(1rem, 3vw, 2rem);
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-xl);
	background: var(--db-paper);
	box-shadow: var(--db-shadow-1);
}

.db-order-header {
	max-width: 720px;
	margin-bottom: 1rem;
}

.db-order-header h2,
.db-checkout-heading h3,
.db-confirm h3,
.db-track-form h3 {
	margin: 0;
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	font-weight: 400;
	letter-spacing: .025em;
	line-height: 1;
	text-transform: uppercase;
}

.db-order-header h2 {
	font-size: clamp(2rem, 5vw, 3.3rem);
}

.db-order-header > p:last-child,
.db-checkout-heading > p:last-child,
.db-track-intro {
	margin: .45rem 0 0;
	color: var(--db-muted);
}

.db-order-kicker {
	margin: 0 0 .3rem;
	color: var(--db-muted);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.db-order-journey {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.db-order-journey-step {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	min-width: 0;
	color: var(--db-muted);
	font-size: .82rem;
	font-weight: 700;
}

.db-order-journey-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: .65rem;
	width: calc(100% - 8.5rem);
	min-width: 1rem;
	height: 2px;
	background: var(--db-border);
}

.db-order-journey-number {
	display: inline-grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	flex: 0 0 auto;
	border: 2px solid var(--db-border);
	border-radius: 50%;
	background: #fff;
	font-variant-numeric: tabular-nums;
}

.db-order-journey-step.is-current {
	color: var(--db-ink);
}

.db-order-journey-step.is-current .db-order-journey-number {
	border-color: var(--db-ink);
	box-shadow: 0 0 0 4px rgba(13, 13, 13, .08);
}

.db-order-journey-step.is-complete .db-order-journey-number {
	border-color: var(--db-ink);
	background: var(--db-ink);
	color: #fff;
}

.db-order-journey-step.is-complete:not(:last-child)::after {
	background: var(--db-ink);
}

.db-order-shell {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}

.db-cart-region,
.db-checkout-region {
	min-width: 0;
}

.db-cart-section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin: 0 0 .65rem;
}

.db-cart-section-heading h3 {
	margin: 0;
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	font-size: 1.55rem;
	font-weight: 400;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.db-cart-section-heading span {
	color: var(--db-muted);
	font-size: .82rem;
	font-weight: 700;
}

.db-checkout-region {
	position: sticky;
	top: calc(var(--db-sticky-top, 0px) + 1rem);
}

.db-cart-line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: .6rem .75rem;
}

.db-cart-line-info {
	align-self: center;
}

.db-cart-line .db-price {
	align-self: center;
	min-width: 4.2rem;
	text-align: right;
}

.db-cart-remove {
	grid-column: 1;
	justify-self: start;
}

.db-qty-control {
	display: inline-grid;
	grid-template-columns: 42px 46px 42px;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-pill);
	background: #fff;
}

.db-qty-btn {
	display: grid;
	place-items: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--db-ink);
	font: 700 1.2rem/1 inherit;
	cursor: pointer;
	touch-action: manipulation;
}

.db-qty-btn:hover:not(:disabled) {
	background: var(--db-paper);
}

.db-qty-control .db-qty {
	width: 46px;
	height: 42px;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--db-border);
	border-radius: 0;
	text-align: center;
	font-weight: 700;
	-moz-appearance: textfield;
}

.db-qty-control .db-qty::-webkit-inner-spin-button,
.db-qty-control .db-qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.db-checkout {
	margin-top: 0;
	padding: clamp(1rem, 3vw, 1.5rem);
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-xl);
	background: #fff;
	box-shadow: var(--db-shadow-2);
}

.db-checkout[aria-busy="true"] {
	cursor: progress;
}

.db-checkout-heading h3 {
	font-size: 2rem;
}

.db-checkout-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 1rem;
	border-radius: var(--db-r-md);
	background: var(--db-ink);
	color: #fff;
}

.db-checkout-summary > div {
	display: grid;
	gap: .05rem;
}

.db-checkout-summary > div > span:not(.db-checkout-summary-label) {
	color: #d9d5ce;
	font-size: .82rem;
}

.db-checkout-summary-label {
	color: #bbb6ae;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.db-checkout-summary-price {
	flex: 0 0 auto;
	text-align: right;
}

.db-checkout-summary-total {
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	font-size: 1.7rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.db-checkout-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8rem;
}

.db-checkout-fields .db-field:first-child {
	grid-column: 1 / -1;
}

.db-field input,
.db-field textarea {
	min-height: 48px;
	background: #fff;
}

.db-field textarea {
	min-height: 82px;
	resize: vertical;
}

.db-checkout-safety {
	padding: .8rem 1rem;
	border: 1px solid var(--db-border);
	border-left: 4px solid var(--db-ink);
	border-radius: var(--db-r-md);
	background: #faf9f6;
	box-shadow: none;
	color: var(--db-text);
}

.db-checkout-safety summary {
	cursor: pointer;
	font-weight: 800;
}

.db-checkout-safety p {
	margin: .65rem 0 0;
	color: var(--db-muted);
	font-size: .88rem;
}

.db-stripe-checkout-notice {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .9rem 1rem;
	border: 1px solid #c9c2ff;
	border-radius: var(--db-r-md);
	background: #f7f5ff;
	color: #24205c;
}

.db-stripe-checkout-notice > div {
	display: grid;
	gap: .15rem;
}

.db-stripe-checkout-notice > div > span {
	color: #5c5788;
	font-size: .82rem;
}

.db-stripe-notice-total {
	color: #24205c;
	font-variant-numeric: tabular-nums;
}

.db-stripe-checkout-points {
	display: grid;
	gap: .28rem;
	margin: .45rem 0 .1rem;
	padding: 0;
	color: #4c4778;
	font-size: .8rem;
	line-height: 1.4;
	list-style: none;
}

.db-stripe-checkout-points li {
	position: relative;
	padding-left: 1rem;
}

.db-stripe-checkout-points li::before {
	position: absolute;
	left: 0;
	content: '✓';
	color: #635bff;
	font-weight: 900;
}

.db-stripe-checkout-notice > div > .db-payment-methods {
	margin-top: .35rem;
	color: #24205c;
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .04em;
}

.db-secure-lock {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #635bff;
	color: #fff;
	font-size: 1.25rem;
}

.db-submit-note {
	margin: -.35rem 0 0;
	color: var(--db-muted);
	font-size: .78rem;
	text-align: center;
}

.db-payment-verifying {
	position: relative;
	padding: .8rem .9rem .8rem 2.7rem;
	border-radius: var(--db-r-md);
	background: #f0f7ff;
	color: #164f7a;
	font-weight: 700;
}

.db-payment-verifying::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1rem;
	width: 1rem;
	height: 1rem;
	margin-top: -.5rem;
	border: 2px solid rgba(22, 79, 122, .25);
	border-top-color: #164f7a;
	border-radius: 50%;
	animation: db-spin .8s linear infinite;
}

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

/* Confirmation is a handoff screen, not just a success toast. */
.db-confirm {
	max-width: 720px;
	margin-inline: auto;
	background: #fff;
}

.db-confirm h3 {
	font-size: clamp(2rem, 6vw, 3.5rem);
}

.db-confirm-number-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .6rem 1rem;
	margin: 1.1rem 0;
	padding: 1rem;
	border: 1px dashed var(--db-ink);
	border-radius: var(--db-r-md);
	background: var(--db-paper);
}

.db-confirm-number {
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	font-size: clamp(1.7rem, 5vw, 2.5rem);
	font-weight: 400;
	letter-spacing: .08em;
}

.db-confirm-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .6rem;
	margin: 1rem 0;
}

.db-confirm-facts > span {
	display: grid;
	gap: .12rem;
	padding: .75rem;
	border-radius: var(--db-r-md);
	background: var(--db-paper);
}

.db-confirm-facts small {
	color: var(--db-muted);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.db-confirm-next {
	max-width: 560px;
	margin: 1rem auto;
	color: var(--db-muted);
}

.db-confirm-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .75rem;
}

/* Tracking is deliberately roomy enough for a phone at the counter or a
 * desktop at home, with the live state and next action above the fold. */
.db-tracking {
	display: grid;
	grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
	gap: clamp(1rem, 4vw, 2.5rem);
	align-items: start;
	padding: clamp(1rem, 3vw, 2rem);
	border: 1px solid var(--db-border);
	border-radius: var(--db-r-xl);
	background: var(--db-paper);
	box-shadow: var(--db-shadow-1);
}

.db-track-form {
	max-width: none;
	padding: 1.25rem;
	border-radius: var(--db-r-lg);
	background: #fff;
	box-shadow: var(--db-shadow-1);
}

.db-track-form h3 {
	font-size: 2rem;
}

.db-track-form .db-btn--lg {
	margin-top: .35rem;
}

.db-track-result {
	min-width: 0;
}

.db-track-card {
	max-width: none;
	margin-top: 0;
	padding: clamp(1rem, 3vw, 1.5rem);
}

.db-track-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.db-track-card-head h4 {
	margin: .2rem 0 0;
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing: .04em;
}

.db-track-service {
	color: var(--db-muted);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.db-track-checked {
	padding-top: .75rem;
	border-top: 1px solid var(--db-border);
}

@media (max-width: 900px) {
	.db-app .db-menu-tools {
		grid-template-columns: minmax(0, 1fr);
	}

	.db-app .db-menu-search-status {
		grid-column: 1;
		grid-row: 2;
	}

	.db-app .db-menu-tools .db-jumpbar {
		grid-column: 1;
		grid-row: 3;
	}

	.db-order-shell,
	.db-tracking {
		grid-template-columns: minmax(0, 1fr);
	}

	.db-checkout-region {
		position: static;
	}
}

@media (max-width: 560px) {
	.db-app.db-menu {
		overflow-x: clip;
	}

	.db-card-foot {
		min-width: 0;
	}

	.db-card-foot .db-btn {
		flex: 0 1 auto;
		min-width: 0;
		padding-inline: .8rem;
	}

	.db-app.db-cart,
	.db-tracking {
		padding: .85rem;
		border-radius: var(--db-r-lg);
	}

	.db-order-journey-label {
		font-size: .7rem;
	}

	.db-order-journey-step {
		display: grid;
		justify-items: center;
		gap: .25rem;
		text-align: center;
	}

	.db-order-journey-step:not(:last-child)::after {
		top: .95rem;
		right: calc(-50% + 1.1rem);
		width: calc(100% - 2.2rem);
	}

	.db-cart-line {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.db-cart-line-info {
		grid-column: 1 / -1;
	}

	.db-cart-line .db-price {
		grid-column: 2;
		grid-row: 2;
	}

	.db-cart-remove {
		grid-column: 1 / -1;
	}

	.db-checkout-fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.db-checkout-fields .db-field:first-child {
		grid-column: auto;
	}

	.db-confirm-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.db-track-card-head {
		align-items: stretch;
		flex-direction: column;
	}

	.db-status-badge {
		align-self: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.db-payment-verifying::before {
		animation: none;
		border-top-color: #164f7a;
	}
}