body.awwly-personaliser-open {
	overflow: hidden;
}

.awwly-personaliser-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* "Continue this design" / "Start a new design" — replaces a plain
   window.confirm() whose OK/Cancel framing nudged customers toward
   "continue" even when they wanted a fresh card. */
.awwly-p-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.5 );
	padding: 20px;
}

.awwly-p-modal {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	max-width: 360px;
	width: 100%;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.2 );
}

.awwly-p-modal-title {
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 16px;
}

.awwly-p-modal-body {
	margin: 0 0 16px;
	font-size: 13px;
	color: #555;
}

.awwly-p-modal-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.awwly-p-modal-btn {
	padding: 12px 16px;
	border-radius: 6px;
	border: 1px solid #ccc;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.awwly-p-modal-btn-primary {
	background: #1c1b1a;
	color: #fff;
	border-color: #1c1b1a;
}

.awwly-p-modal-btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.awwly-p-topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid #e0e0e0;
	flex: 0 0 auto;
}

.awwly-p-close {
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	padding: 6px;
	cursor: pointer;
}

.awwly-p-title {
	flex: 1 1 auto;
	font-weight: 600;
}

.awwly-p-add-to-basket {
	background: #1c1b1a;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 16px;
	font-weight: 600;
	cursor: pointer;
}

.awwly-p-add-to-basket:disabled {
	background: #ccc;
	cursor: not-allowed;
}

.awwly-p-add-to-basket-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
}

.awwly-p-add-to-basket-hint {
	font-size: 11px;
	color: #a33;
	max-width: 160px;
	text-align: right;
}

.awwly-p-errors {
	flex: 0 0 auto;
	padding: 0 14px;
}

.awwly-p-errors ul {
	margin: 8px 0;
	padding: 8px 12px;
	background: #fdecea;
	border: 1px solid #f5c6cb;
	border-radius: 6px;
	color: #611a15;
	font-size: 13px;
}

.awwly-p-dpi-warning:not(:empty) {
	flex: 0 0 auto;
	margin: 8px 14px;
	padding: 8px 12px;
	background: #fff8e5;
	border: 1px solid #f0d78c;
	border-radius: 6px;
	color: #6b5300;
	font-size: 13px;
}

.awwly-p-editor-hint {
	flex: 0 0 auto;
	margin: 8px 14px 0;
	padding: 9px 12px;
	border: 1px solid #dce6e2;
	border-radius: 9px;
	background: #f7faf9;
	color: #53635d;
	font-size: 13px;
	line-height: 1.35;
	text-align: center;
}

/* Message-first group-card prompt: a compact, persistent route into the one
   task every buyer must complete. It replaces the one-time dismissible
   explanation with a useful action that remains available across all pages. */
.awwly-p-group-prompt {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 14px 0;
	padding: 10px 12px;
	background: #f2f7fb;
	border: 1px solid #c7deef;
	border-radius: 10px;
}

.awwly-p-group-prompt.is-visible {
	display: flex;
}

.awwly-p-group-prompt-copy {
	min-width: 0;
}

.awwly-p-group-prompt-title {
	margin: 0 0 2px;
	color: #17354a;
	font-size: 14px;
	font-weight: 700;
}

.awwly-p-group-prompt-body {
	margin: 0;
	color: #536b7a;
	font-size: 12px;
	line-height: 1.35;
}

.awwly-p-group-prompt-btn {
	flex: 0 0 auto;
	min-height: 40px;
	padding: 9px 14px;
	border: 0;
	border-radius: 8px;
	background: #17354a;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.awwly-p-group-prompt-btn:focus-visible {
	outline: 3px solid rgba( 34, 113, 177, 0.35 );
	outline-offset: 2px;
}

/* The composer already explains the task; hide the global prompt on mobile
   while that panel is open to preserve room for the card and keyboard. */
.awwly-p-panel-bar.is-open ~ .awwly-p-group-prompt {
	display: none;
}


/* On-canvas signing-cell markers (refreshCustomerCellOverlay()) — sit inside
   Fabric's wrapperEl, so they inherit its transform:scale and are positioned
   in unscaled canvas px. pointer-events:none so taps reach the real cell. */
.awwly-p-cell-overlay {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 5;
}

.awwly-p-cell-marker {
	position: absolute;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-align: center;
	padding: 0;
	font: inherit;
	color: inherit;
	border-radius: 4px;
}

.awwly-p-cell-marker.is-own {
	pointer-events: auto;
	cursor: pointer;
	border: 2px solid #2271b1;
	background: rgba( 34, 113, 177, 0.06 );
}

.awwly-p-cell-marker.is-locked {
	border: 1px dashed #c3bfb8;
}

.awwly-p-cell-prompt {
	color: #2271b1;
	font-size: 14px;
	font-weight: 600;
	padding: 2px 4px;
	line-height: 1.15;
}

.awwly-p-cell-label {
	color: #a19c94;
	font-size: 12px;
	font-weight: 600;
}


.awwly-p-status {
	flex: 0 0 auto;
	text-align: center;
	padding: 8px;
	color: #555;
}

.awwly-p-canvas-wrap {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
	position: relative;
	background: #f3f3f3;
}

/* Shown over the canvas while onAddToBasket() renders + uploads each page
   (see startFinalizing()/updateFinalizeProgress() in personalise.js). */
.awwly-p-progress {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 5;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 13px;
	background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.98) 0 18%, rgba(251, 249, 246, 0.92) 58%, rgba(239, 233, 226, 0.88) 100%);
	text-align: center;
	padding: 20px;
}

.awwly-personaliser-overlay.is-finalizing .awwly-p-progress {
	display: flex;
}

.awwly-p-progress-steps {
	display: flex;
	gap: 8px;
}

.awwly-p-progress-art {
	height: 92px;
	margin-bottom: 3px;
	position: relative;
	width: 112px;
}

.awwly-p-progress-envelope {
	background: #efe9e2;
	border: 2px solid #211d1a;
	border-radius: 5px;
	bottom: 4px;
	height: 61px;
	left: 10px;
	overflow: hidden;
	position: absolute;
	transform: rotate(-3deg);
	width: 92px;
}

.awwly-p-progress-envelope::before,
.awwly-p-progress-envelope::after {
	border: 2px solid #211d1a;
	content: "";
	height: 70px;
	position: absolute;
	top: -46px;
	transform: rotate(45deg);
	width: 70px;
}

.awwly-p-progress-envelope::before {
	background: #efe9e2;
	left: 9px;
}

.awwly-p-progress-envelope::after {
	background: transparent;
	left: 11px;
	top: 25px;
}

.awwly-p-progress-card {
	background: #fff;
	border: 2px solid #211d1a;
	border-radius: 4px;
	height: 69px;
	left: 31px;
	position: absolute;
	top: 2px;
	transform: translateY(10px) rotate(4deg);
	width: 50px;
	animation: awwly-p-card-making 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.awwly-p-progress-card::before,
.awwly-p-progress-card::after {
	background: #c8272f;
	border-radius: 999px 999px 0;
	content: "";
	height: 14px;
	position: absolute;
	top: 22px;
	transform: rotate(45deg);
	width: 14px;
}

.awwly-p-progress-card::before {
	left: 11px;
}

.awwly-p-progress-card::after {
	left: 21px;
	transform: rotate(135deg);
}

.awwly-p-progress-spark {
	color: #c8272f;
	font-size: 18px;
	line-height: 1;
	position: absolute;
	animation: awwly-p-spark 1.8s ease-in-out infinite;
}

.awwly-p-progress-spark--one {
	right: 2px;
	top: 5px;
}

.awwly-p-progress-spark--two {
	animation-delay: 0.45s;
	font-size: 12px;
	left: 1px;
	top: 20px;
}

.awwly-p-progress-step {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ddd;
	transition: background-color 0.2s ease;
}

.awwly-p-progress-step.is-active {
	background: #1c1b1a;
	animation: awwly-p-progress-pulse 1s ease-in-out infinite;
}

.awwly-p-progress-step.is-done {
	background: #1c1b1a;
}

@keyframes awwly-p-progress-pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.4;
	}
}

.awwly-p-progress-label {
	color: #1c1b1a;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.awwly-p-progress-note {
	color: #5c5650;
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
	max-width: 290px;
}

@keyframes awwly-p-card-making {

	0%,
	100% {
		transform: translateY(10px) rotate(4deg);
	}

	50% {
		transform: translateY(-4px) rotate(-2deg);
	}
}

@keyframes awwly-p-spark {

	0%,
	100% {
		opacity: 0.2;
		transform: scale(0.7) rotate(0);
	}

	50% {
		opacity: 1;
		transform: scale(1.05) rotate(18deg);
	}
}

/* Dims and disables the rest of the editor for the same duration — without
   this, taps still hit stickers/undo/redo/page-switching mid-render, which
   is confusing (nothing visibly happens) and, since a page's Fabric JSON is
   being serialized to PNG at that exact moment, a real correctness risk. */
.awwly-personaliser-overlay.is-finalizing .awwly-p-toolbar,
.awwly-personaliser-overlay.is-finalizing .awwly-p-page-rail {
	pointer-events: none;
	opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {

	.awwly-p-progress-card,
	.awwly-p-progress-spark,
	.awwly-p-progress-step.is-active {
		animation: none;
	}
}

/* Bottom sheets (mobile default) */
.awwly-p-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 60px;
	max-height: 45vh;
	overflow-y: auto;
	background: #fff;
	border-top: 1px solid #e0e0e0;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 -4px 16px rgba( 0, 0, 0, 0.08 );
	padding: 14px;
	transform: translateY( 100% );
	transition: transform 0.2s ease;
	z-index: 1;
}

.awwly-p-sheet.is-open {
	transform: translateY( 0 );
}

/* Always visible (not one of the tap-to-open .awwly-p-sheet panels above) —
   a swipeable strip the customer can glance at/flick through, the same
   pattern as a carousel's own thumbnail rail, rather than an extra tap to
   reveal which page they're even on. */
.awwly-p-page-rail {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	padding: 8px 14px;
	background: #fff;
	border-top: 1px solid #e0e0e0;
}

.awwly-p-page-rail.awwly-p-page-rail-hidden {
	display: none;
}

/* The selected zone's formatting controls (Font/Size/Colour/Done) — docked
   at the top, directly under the topbar, in normal document flow (not a
   sliding bottom sheet). Matches the reference (Moonpig): the per-object
   toolbar lives in a different screen region than the persistent Stickers/
   Undo/Redo toolbar at the bottom, so the two never compete for the same
   edge or stack visually on top of each other. */
.awwly-p-panel-bar {
	display: none;
	flex: 0 0 auto;
	max-height: 52vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border-bottom: 1px solid #e0e0e0;
	padding: 10px 14px;
}

.awwly-p-panel-bar.is-open {
	display: block;
}

/* Mobile only (overridden back on in the desktop breakpoint below, where
   the panel bar docks to the side instead and never competes with the
   page rail for vertical room at all). Reclaims the page rail's space
   specifically for the moment it's actually needed: editing a text zone
   brings up both the panel bar *and* the on-screen keyboard, and a short
   phone in that state has very little vertical room to spare. Same
   collapse-for-a-reason pattern as .is-finalizing hiding the toolbar/rail
   above, just triggered by a different state. */
.awwly-p-panel-bar.is-open ~ .awwly-p-page-rail {
	display: none;
}

.awwly-p-page-tab {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	border: 2px solid transparent;
	background: none;
	padding: 4px;
	border-radius: 8px;
	cursor: pointer;
	scroll-snap-align: start;
}

.awwly-p-page-tab.is-active {
	border-color: #1c1b1a;
}

.awwly-p-page-tab img {
	width: 60px;
	height: auto;
	border: 1px solid #ddd;
}

.awwly-p-sticker-grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 10px;
}

.awwly-p-sticker-grid[hidden] {
	display: none;
}

.awwly-p-sticker {
	font-size: 28px;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 10px;
	cursor: pointer;
}

.awwly-cp-empty,
.awwly-cp-hint {
	color: #666;
	font-size: 13px;
}

.awwly-cp-message-composer {
	margin: 0 0 12px;
}

.awwly-cp-message-title {
	margin: 0 0 4px;
	font-size: 18px;
	line-height: 1.25;
	color: #1c1b1a;
}

.awwly-cp-message-hint {
	margin: 0 0 10px;
	color: #5f6368;
	font-size: 13px;
	line-height: 1.4;
}

.awwly-cp-message-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 104px;
	padding: 12px;
	border: 1px solid #aeb8bf;
	border-radius: 10px;
	background: #fff;
	color: #1c1b1a;
	font: inherit;
	font-size: 16px;
	line-height: 1.45;
	resize: vertical;
}

.awwly-cp-message-input:focus {
	border-color: #2271b1;
	outline: 3px solid rgba( 34, 113, 177, 0.16 );
}

.awwly-cp-signature-field {
	margin-top: 14px;
}

.awwly-cp-signature-label {
	display: block;
	margin-bottom: 6px;
	color: #1c1b1a;
	font-size: 13px;
	font-weight: 700;
}

.awwly-cp-signature-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 11px;
	border: 1px solid #aeb8bf;
	border-radius: 9px;
	background: #fff;
	color: #1c1b1a;
	font: inherit;
	font-size: 16px;
}

.awwly-cp-signature-input:focus {
	border-color: #2271b1;
	outline: 3px solid rgba( 34, 113, 177, 0.16 );
}

.awwly-cp-signature-help {
	margin: 6px 0 0;
	color: #687980;
	font-size: 12px;
	line-height: 1.4;
}

.awwly-cp-signature-preview {
	margin: 8px 0 0;
	padding: 8px 10px;
	border-left: 3px solid #39708f;
	border-radius: 0 8px 8px 0;
	background: #edf4f7;
	color: #294d60;
	font-size: 12px;
	font-weight: 650;
	line-height: 1.35;
}

.awwly-cp-signature-preview.is-empty {
	border-left-color: #b8c4ca;
	background: #f7f9f9;
	color: #687980;
	font-weight: 500;
}

.awwly-cp-message-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 5px;
}

.awwly-cp-message-footer .awwly-cp-counter {
	margin: 0;
}


.awwly-cp-toolbar {
	display: flex;
	align-items: stretch;
	gap: 4px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.awwly-cp-tool-btn {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: none;
	border: none;
	border-radius: 8px;
	padding: 8px 4px;
	cursor: pointer;
	color: #444;
}

.awwly-cp-tool-btn.is-active {
	background: #f0f0f0;
	color: #1c1b1a;
}

.awwly-cp-tool-done {
	color: #1a7a3c;
}

.awwly-cp-tool-icon {
	font-size: 18px;
	line-height: 1;
}

.awwly-cp-tool-label {
	font-size: 11px;
}

.awwly-cp-tool-panels {
	position: relative;
}

.awwly-cp-tool-panel {
	display: none;
	padding-top: 8px;
}

.awwly-cp-tool-panel.is-active {
	display: block;
}

.awwly-cp-tool-panel input[type="range"] {
	width: 100%;
}

.awwly-cp-alignment {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.awwly-cp-align-button {
	min-height: 42px;
	padding: 8px 10px;
	border: 2px solid #ddd;
	border-radius: 7px;
	background: #fff;
	color: #1c1b1a;
	font-size: 13px;
	font-weight: 650;
	cursor: pointer;
}

.awwly-cp-align-button:hover {
	background: #f7f9fa;
}

.awwly-cp-align-button.is-selected {
	border-color: #17354a;
	background: #f2f7fb;
}

.awwly-cp-align-button:focus-visible {
	outline: 3px solid rgba(34, 113, 177, 0.28);
	outline-offset: 1px;
}

.awwly-cp-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.awwly-cp-swatch {
	border: 2px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	background: #fff;
}

.awwly-cp-swatch.is-selected {
	border-color: #1c1b1a;
}

.awwly-font-browser-controls {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 118px, auto );
	gap: 7px;
}

.awwly-font-browser-search,
.awwly-font-browser-category {
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	padding: 7px 9px;
	border: 1px solid #ccd3d7;
	border-radius: 7px;
	background: #fff;
	font-size: 14px;
}

.awwly-font-browser-results {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 240px;
	margin-top: 8px;
	overflow-y: auto;
	padding: 2px;
}

.awwly-font-browser-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	width: 100%;
	min-height: 44px;
	padding: 9px 12px;
	border: 2px solid #ddd;
	border-radius: 7px;
	background: #fff;
	color: #1c1b1a;
	font-size: 16px;
	text-align: left;
	cursor: pointer;
}

.awwly-font-browser-option[aria-selected="true"] {
	border-color: #17354a;
	background: #f2f7fb;
}

.awwly-font-browser-option[aria-selected="true"]::after {
	content: "✓";
	margin-left: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 800;
}

.awwly-font-browser-status {
	margin: 5px 2px 0;
	color: #66747b;
	font-size: 12px;
}

/* Font names are easier to compare as real samples in a vertical list. The
   bounded height keeps a large admin-curated library usable on short screens. */
.awwly-cp-swatches-text {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 6px;
	max-height: 240px;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 2px 4px 4px 2px;
	scrollbar-gutter: stable;
}

.awwly-cp-swatches-text .awwly-cp-swatch {
	flex: 0 0 auto;
}

.awwly-cp-swatch-text {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: auto;
	min-height: 44px;
	padding: 9px 12px;
	white-space: nowrap;
	font-size: 16px;
	text-align: left;
}

.awwly-cp-swatch-text.is-selected {
	background: #f2f7fb;
}

.awwly-cp-swatch-text.is-selected::after {
	content: "✓";
	margin-left: 12px;
	color: #17354a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 800;
}

/* Colour chips pair with the visible selected colour name below. */
.awwly-cp-swatch-colour {
	padding: 0;
	width: 32px;
	height: 32px;
}

.awwly-cp-color-control {
	display: grid;
	gap: 10px;
}

.awwly-cp-color-name {
	margin: 0;
	color: #405159;
	font-size: 13px;
	font-weight: 650;
}

.awwly-cp-emoji-grid {
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 8px;
	max-height: 220px;
	overflow-y: auto;
	padding: 2px;
}

.awwly-cp-emoji {
	min-width: 0;
	min-height: 44px;
	padding: 5px;
	border: 1px solid #d7dfe2;
	border-radius: 9px;
	background: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.awwly-cp-emoji:hover {
	background: #f2f7fb;
}

.awwly-cp-emoji:focus-visible {
	outline: 3px solid rgba( 34, 113, 177, 0.28 );
	outline-offset: 1px;
}

.awwly-cp-counter {
	font-size: 12px;
	color: #666;
	margin: 0 0 8px;
}

.awwly-cp-counter.is-over-limit {
	color: #c0392b;
	font-weight: 600;
}

.awwly-cp-counter.is-near-limit {
	color: #8a5a00;
	font-weight: 600;
}

.awwly-cp-button {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 6px;
	border: 1px solid #1c1b1a;
	background: #fff;
	cursor: pointer;
	margin-top: 4px;
}

.awwly-cp-button-danger {
	border-color: #c0392b;
	color: #c0392b;
}

.awwly-p-toolbar {
	flex: 0 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 60px;
	border-top: 1px solid #e0e0e0;
	background: #fff;
	position: relative;
	z-index: 2;
}

.awwly-p-toolbar.is-contribution-page {
	justify-content: center;
	gap: 28px;
}

.awwly-p-tool {
	background: none;
	border: none;
	font-size: 13px;
	padding: 8px 10px;
	min-width: 48px;
	min-height: 48px;
	cursor: pointer;
}

.awwly-p-tool:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Desktop: dock the sheets as a side panel instead of a bottom sheet,
   matching spec §6.1 ("canvas centred with a side panel instead of bottom
   sheets"). Reuses WP admin's own breakpoint for consistency.

   Grid, not flex-wrap: the previous flex-wrap:wrap layout let the canvas
   row claim its own intrinsic content height regardless of what was left
   over, so on a short desktop-mode window (e.g. a browser resized to
   ~1024x550) the canvas grew tall enough to push the whole toolbar row
   past the bottom of the fixed-height overlay — Pages/Stickers/Undo/Redo
   became genuinely unreachable, not just visually cramped. A grid with an
   explicit `1fr` canvas row and `auto` toolbar row guarantees the toolbar
   always gets its natural height and the canvas always gets exactly
   what's left (fitCanvasToViewport() already scales the card down to fit
   that space), so the toolbar can never be pushed off-screen. */
@media ( min-width: 782px ) {
	.awwly-p-panel-bar.is-open ~ .awwly-p-group-prompt {
		display: flex;
	}
	.awwly-personaliser-overlay {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto auto auto auto auto 1fr auto auto;
		grid-template-areas:
			"topbar topbar"
			"errors errors"
			"dpi dpi"
			"editorhint editorhint"
			"groupprompt groupprompt"
			"status status"
			"canvas panel"
			"pagerail pagerail"
			"toolbar toolbar";
		height: 100%;
	}

	.awwly-p-topbar {
		grid-area: topbar;
	}

	.awwly-p-errors {
		grid-area: errors;
	}

	.awwly-p-dpi-warning {
		grid-area: dpi;
	}

	.awwly-p-editor-hint {
		grid-area: editorhint;
	}

	.awwly-p-group-prompt {
		grid-area: groupprompt;
	}

	.awwly-p-status {
		grid-area: status;
	}

	.awwly-p-page-rail {
		grid-area: pagerail;
	}

	.awwly-p-page-rail.awwly-p-page-rail-hidden {
		display: none;
	}

	/* The mobile-only collapse-while-editing rule doesn't apply here — the
	   panel bar docks to its own side column at this breakpoint (below),
	   so it never competes with the page rail for space the way it does
	   stacked vertically on mobile. :not(...) keeps a genuinely single-page
	   card's rail hidden regardless — higher specificity than the plain
	   .awwly-p-page-rail-hidden rule above would otherwise win that fight. */
	.awwly-p-panel-bar.is-open ~ .awwly-p-page-rail:not( .awwly-p-page-rail-hidden ) {
		display: flex;
	}

	.awwly-p-canvas-wrap {
		grid-area: canvas;
		min-height: 0;
		min-width: 0;
	}

	.awwly-p-sheet,
	.awwly-p-panel-bar {
		grid-area: panel;
		position: static;
		width: 320px;
		max-height: none;
		height: 100%;
		transform: none;
		display: none;
		border-radius: 0;
		border-top: none;
		border-left: 1px solid #e0e0e0;
		border-bottom: none;
		box-shadow: none;
		overflow-y: auto;
	}

	.awwly-p-sheet.is-open,
	.awwly-p-panel-bar.is-open {
		display: block;
	}

	.awwly-p-toolbar {
		grid-area: toolbar;
	}

	/* Reference (Moonpig): the desktop dock shows its controls as a
	   vertical icon+label list, not a horizontal row — makes sense once
	   there's a tall side column instead of a cramped bottom strip. The
	   expanding control for whichever icon is active still renders below
	   the whole list (unchanged from mobile), just full-width in the dock
	   instead of full-width in a bottom sheet. */
	.awwly-cp-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.awwly-cp-tool-btn {
		flex-direction: row;
		justify-content: flex-start;
		gap: 8px;
		padding: 8px;
	}

	.awwly-cp-swatches-text {
		max-height: 320px;
	}
}

/* Canvas-first personaliser workspace (0.2.3).
 *
 * The earlier layout made Pages and Stickers/Undo/Redo full-width rows, so
 * navigation chrome claimed more height than the card. The markup now has a
 * notice dock plus one workspace containing page navigation, stage, quick
 * tools, and the contextual inspector. Mobile stays intentionally different:
 * a vertical rail is efficient on a wide monitor but would make a portrait
 * card unreadably narrow on a phone. */
.awwly-personaliser-overlay {
	display: flex;
	min-width: 0;
	color: #28231f;
	background: #f7f4f1;
}

.awwly-p-topbar {
	position: relative;
	z-index: 40;
	min-height: 62px;
	padding: 8px 14px;
	border-bottom: 1px solid #e5ded8;
	background: rgba( 255, 255, 255, 0.97 );
	box-shadow: 0 3px 16px rgba( 62, 45, 35, 0.05 );
}

.awwly-p-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	color: #3f3833;
}

.awwly-p-close:hover {
	border-color: #ded5ce;
	background: #f7f2ee;
}

.awwly-p-title-block {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.awwly-p-title {
	font-size: 15px;
	line-height: 1.2;
}

.awwly-p-page-context {
	overflow: hidden;
	color: #786f68;
	font-size: 11px;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwly-p-add-to-basket {
	min-height: 44px;
	border-radius: 10px;
	padding: 10px 15px;
	background: #28231f;
	box-shadow: 0 4px 12px rgba( 40, 35, 31, 0.14 );
}

.awwly-p-add-to-basket:hover:not(:disabled) {
	background: #433a34;
}

.awwly-p-add-to-basket-hint:empty {
	display: none;
}

.awwly-p-notice-dock {
	position: relative;
	z-index: 20;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	background: #fff;
}

.awwly-p-notice-dock:not(:has(
	.awwly-p-errors:not(:empty),
	.awwly-p-dpi-warning:not(:empty),
	.awwly-p-editor-hint:not([hidden]),
	.awwly-p-group-prompt.is-visible,
	.awwly-p-status:not([style*="display: none"])
)) {
	display: none;
}

.awwly-p-errors,
.awwly-p-dpi-warning,
.awwly-p-editor-hint,
.awwly-p-group-prompt,
.awwly-p-status {
	box-sizing: border-box;
	width: min( 100%, 760px );
}

.awwly-p-errors:empty,
.awwly-p-dpi-warning:empty,
.awwly-p-editor-hint[hidden],
.awwly-p-group-prompt:not(.is-visible) {
	display: none !important;
}

.awwly-p-errors {
	padding: 0;
}

.awwly-p-errors ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	padding: 9px 12px 9px 36px;
	border-color: #ead4a6;
	border-radius: 10px;
	background: #fff9ed;
	color: #634d22;
	font-size: 12px;
	line-height: 1.35;
	list-style: none;
}

.awwly-p-errors ul::before {
	position: absolute;
	margin-left: -24px;
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #8a6423;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
}

.awwly-p-dpi-warning:not(:empty),
.awwly-p-editor-hint,
.awwly-p-status {
	margin: 0;
	padding: 8px 11px;
	border-radius: 9px;
	font-size: 12px;
	line-height: 1.35;
}

.awwly-p-editor-hint {
	border-color: #ded8d2;
	background: #faf8f6;
	color: #655d57;
}

.awwly-p-status {
	color: #655d57;
}

.awwly-p-group-prompt {
	margin: 0;
	padding: 8px 10px 8px 12px;
	border-color: #cbdce7;
	background: #f4f8fb;
}

.awwly-p-group-prompt-title {
	font-size: 13px;
}

.awwly-p-group-prompt-body {
	font-size: 11px;
}

.awwly-p-group-prompt-btn {
	min-height: 38px;
	padding: 8px 12px;
}

/* Once a contextual drawer is open, its controls already explain the task.
 * Keeping the global group prompt above it duplicated guidance and reduced
 * the remaining phone canvas by another full notice row. */
.awwly-personaliser-overlay:has( .awwly-p-panel-bar.is-open ) .awwly-p-group-prompt,
.awwly-personaliser-overlay:has( .awwly-p-sticker-grid.is-open ) .awwly-p-group-prompt {
	display: none !important;
}

.awwly-p-workspace {
	position: relative;
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax( 0, 1fr );
	grid-template-rows: minmax( 0, 1fr ) auto;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.awwly-p-stage {
	position: relative;
	grid-row: 1;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background:
		radial-gradient( circle at 50% 42%, rgba( 255, 255, 255, 0.96 ) 0, rgba( 255, 255, 255, 0.56 ) 34%, transparent 64% ),
		#eeeae6;
}

.awwly-p-canvas-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}

.awwly-p-toolbar {
	position: absolute;
	left: 50%;
	bottom: 12px;
	z-index: 12;
	display: flex;
	justify-content: center;
	width: auto;
	height: auto;
	min-height: 48px;
	gap: 2px;
	padding: 4px;
	transform: translateX( -50% );
	border: 1px solid rgba( 190, 179, 170, 0.88 );
	border-radius: 14px;
	background: rgba( 255, 255, 255, 0.96 );
	box-shadow: 0 8px 24px rgba( 55, 42, 33, 0.16 );
	backdrop-filter: blur( 10px );
}

.awwly-p-toolbar.is-contribution-page {
	justify-content: center;
	gap: 2px;
}

.awwly-p-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 40px;
	padding: 7px 10px;
	border-radius: 9px;
	color: #443c36;
	font-size: 12px;
	font-weight: 650;
	white-space: nowrap;
}

.awwly-p-tool[hidden] {
	display: none;
}

.awwly-p-tool:hover:not(:disabled),
.awwly-p-tool[aria-expanded="true"] {
	background: #f1ebe6;
}

.awwly-p-page-rail {
	grid-row: 2;
	display: flex;
	gap: 8px;
	min-height: 88px;
	padding: 6px 10px max( 6px, env( safe-area-inset-bottom ) );
	border-top: 1px solid #dfd8d2;
	background: rgba( 255, 255, 255, 0.98 );
}

.awwly-p-page-rail-title {
	display: none;
}

.awwly-p-page-tab {
	min-width: 64px;
	gap: 3px;
	padding: 4px;
	border-radius: 9px;
	color: #706761;
	font-size: 11px;
	font-weight: 650;
}

.awwly-p-page-tab.is-active {
	border-color: #8f3758;
	background: #fff7fa;
	color: #6f2945;
}

.awwly-p-page-tab img {
	width: 44px;
	max-height: 58px;
	border: 0;
	border-radius: 3px;
	object-fit: contain;
	box-shadow: 0 2px 7px rgba( 60, 47, 39, 0.12 );
}

.awwly-p-workspace.has-single-page {
	grid-template-rows: minmax( 0, 1fr );
}

.awwly-p-workspace > .awwly-p-sheet,
.awwly-p-workspace > .awwly-p-panel-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	max-height: min( 70dvh, 620px );
	padding: 16px;
	transform: translateY( 105% );
	border: 0;
	border-radius: 18px 18px 0 0;
	background: #fff;
	box-shadow: 0 -14px 44px rgba( 42, 31, 24, 0.2 );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.awwly-p-workspace > .awwly-p-sheet.is-open,
.awwly-p-workspace > .awwly-p-panel-bar.is-open {
	display: block;
	transform: translateY( 0 );
}

.awwly-p-workspace > .awwly-p-sticker-grid.is-open {
	display: grid;
}

.awwly-p-sheet-header {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
	margin-bottom: 2px;
}

.awwly-p-sheet-close {
	min-width: 44px;
	min-height: 38px;
	padding: 6px 10px;
	border: 1px solid #ddd4cd;
	border-radius: 8px;
	background: #fff;
	color: #554c46;
	cursor: pointer;
}

.awwly-p-sticker-grid {
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 8px;
}

.awwly-p-sticker {
	min-width: 0;
	min-height: 48px;
	padding: 7px;
}

@media ( max-width: 420px ) {
	.awwly-p-topbar {
		gap: 8px;
		padding-inline: 8px;
	}

	.awwly-p-close {
		width: 40px;
		height: 40px;
	}

	.awwly-p-title {
		font-size: 14px;
	}

	.awwly-p-add-to-basket {
		padding-inline: 12px;
		font-size: 13px;
	}

	.awwly-p-notice-dock {
		padding: 5px 8px;
	}

	.awwly-p-errors ul {
		flex-direction: column;
	}

	.awwly-p-group-prompt-body {
		display: none;
	}

	.awwly-p-toolbar {
		bottom: 10px;
	}
}

@media ( min-width: 900px ) {
	.awwly-personaliser-overlay {
		display: flex;
		height: 100%;
	}

	.awwly-p-topbar {
		min-height: 66px;
		padding: 10px 20px;
	}

	.awwly-p-title {
		font-size: 16px;
	}

	.awwly-p-page-context {
		font-size: 12px;
	}

	.awwly-p-add-to-basket {
		padding-inline: 20px;
	}

	.awwly-p-notice-dock {
		padding: 8px 18px;
	}

	.awwly-p-workspace {
		grid-template-columns: 112px minmax( 0, 1fr ) auto;
		grid-template-rows: minmax( 0, 1fr );
	}

	.awwly-p-workspace.has-single-page {
		grid-template-columns: minmax( 0, 1fr ) auto;
	}

	.awwly-p-page-rail {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		align-items: stretch;
		gap: 9px;
		min-width: 0;
		min-height: 0;
		padding: 14px 12px;
		overflow-x: hidden;
		overflow-y: auto;
		border-top: 0;
		border-right: 1px solid #ded7d1;
	}

	.awwly-p-page-rail-title {
		display: block;
		padding: 1px 3px 4px;
		color: #81766f;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.awwly-p-page-tab {
		width: 100%;
		min-width: 0;
		padding: 7px 5px;
		font-size: 11px;
	}

	.awwly-p-page-tab img {
		width: 66px;
		max-height: 92px;
	}

	.awwly-p-stage {
		grid-column: 2;
		grid-row: 1;
	}

	.awwly-p-workspace.has-single-page .awwly-p-stage {
		grid-column: 1;
	}

	.awwly-p-toolbar {
		left: 16px;
		top: 16px;
		bottom: auto;
		transform: none;
	}

	.awwly-p-workspace > .awwly-p-sheet,
	.awwly-p-workspace > .awwly-p-panel-bar {
		position: static;
		grid-column: 3;
		grid-row: 1;
		width: 320px;
		height: 100%;
		max-height: none;
		padding: 18px;
		transform: none;
		border-left: 1px solid #ded7d1;
		border-radius: 0;
		box-shadow: -8px 0 24px rgba( 60, 45, 36, 0.05 );
	}

	.awwly-p-workspace.has-single-page > .awwly-p-sheet,
	.awwly-p-workspace.has-single-page > .awwly-p-panel-bar {
		grid-column: 2;
	}

	.awwly-p-workspace > .awwly-p-sheet.is-open,
	.awwly-p-workspace > .awwly-p-panel-bar.is-open {
		display: block;
	}

	.awwly-p-workspace > .awwly-p-sticker-grid.is-open {
		display: grid;
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
		align-content: start;
	}

	.awwly-cp-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.awwly-cp-tool-btn {
		flex-direction: row;
		justify-content: flex-start;
		gap: 8px;
		padding: 8px;
	}

	.awwly-cp-swatches-text {
		max-height: 320px;
	}
}

/* Fulfilment/Delivery addendum §20 step 3 — the recipient-capture step.
   Standalone (see personalise.js's captureRecipient()): appended straight to
   document.body, not the personaliser's own overlay, since the "buy as
   shown" native-form path (initBlankBuyGuard()) needs this without ever
   opening the personaliser. Same visual language as .awwly-p-modal-backdrop/
   .awwly-p-modal above (dark backdrop, dark primary button, 6-12px radii),
   just a wider card with real form fields instead of two choice buttons. */
.awwly-recipient-overlay {
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.5 );
	padding: 20px;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.awwly-recipient-card {
	display: grid;
	grid-template-rows: auto minmax( 0, 1fr ) auto;
	background: #fff;
	border-radius: 12px;
	max-width: 420px;
	width: 100%;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.2 );
	max-height: calc( 100vh - 40px );
	max-height: calc( 100dvh - 40px );
	overflow: hidden;
	box-sizing: border-box;
}

/* The title and actions stay visible while only the form fields scroll. */
.awwly-recipient-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px 12px;
	background: #fff;
	border-bottom: 1px solid #eee;
}

.awwly-recipient-body {
	min-height: 0;
	padding: 16px 24px 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.awwly-recipient-card h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.awwly-recipient-close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin: -4px -6px 0 0;
	padding: 0;
	font-size: 24px;
	line-height: 1;
	color: #555;
	background: transparent;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.awwly-recipient-close:hover,
.awwly-recipient-close:focus {
	background: #f0f0f1;
	color: #111;
	outline: none;
}

.awwly-recipient-intro {
	margin: 0 0 16px;
	font-size: 13px;
	color: #555;
}

/* Postage Consolidation (Phase D) §6 — the reuse-picker, shown above the
   intro copy ("at the top of the form", §6.1) whenever the cart already
   holds another card's address to offer. */
.awwly-recipient-reuse {
	margin-bottom: 16px;
	padding: 12px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.awwly-recipient-reuse[hidden] {
	display: none;
}

.awwly-recipient-reuse-title {
	margin: 0 0 3px;
	font-size: 14px;
	font-weight: 700;
	color: #1c1b1a;
}

.awwly-recipient-reuse-intro {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.45;
	color: #555;
}

.awwly-recipient-reuse-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.awwly-recipient-reuse-option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 10px 11px;
	cursor: pointer;
	text-align: left;
}

.awwly-recipient-reuse-option:hover,
.awwly-recipient-reuse-option:focus {
	border-color: #2271b1;
	outline: none;
}

.awwly-recipient-reuse-option strong {
	font-size: 13px;
	color: #1c1b1a;
}

.awwly-recipient-reuse-option span {
	font-size: 12px;
	color: #666;
	line-height: 1.4;
}

.awwly-recipient-reuse-option-service {
	margin-top: 4px;
	color: #444 !important;
	font-weight: 600;
}

/* Revision 1 — the real incremental price this entry would add, shown up
   front in the picker list itself (not just after selection). */
.awwly-recipient-reuse-option-postage {
	color: #236b35 !important;
	font-weight: 600;
}

/* Cross-order "send to someone you've sent before" picker — same visual
   language as the same-basket reuse-picker above, address-only. */
.awwly-recipient-history {
	margin-bottom: 16px;
	padding: 12px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.awwly-recipient-history[hidden] {
	display: none;
}

.awwly-recipient-history-title {
	margin: 0 0 3px;
	font-size: 14px;
	font-weight: 700;
	color: #1c1b1a;
}

.awwly-recipient-history-intro {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.45;
	color: #555;
}

.awwly-recipient-history-search {
	display: block;
	width: 100%;
	margin-bottom: 8px;
	padding: 6px 10px;
	font-size: 13px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
}

.awwly-recipient-history-search[hidden] {
	display: none;
}

/* Capped + scrollable so a long history never lengthens the whole form. */
.awwly-recipient-history-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 220px;
	overflow-y: auto;
}

.awwly-recipient-history-empty {
	margin: 4px 0 0;
	font-size: 12px;
	color: #666;
}

.awwly-recipient-history-option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 10px 11px;
	cursor: pointer;
	text-align: left;
}

.awwly-recipient-history-option:hover,
.awwly-recipient-history-option:focus {
	border-color: #2271b1;
	outline: none;
}

.awwly-recipient-history-option strong {
	font-size: 13px;
	color: #1c1b1a;
}

.awwly-recipient-history-option span {
	font-size: 12px;
	color: #666;
	line-height: 1.4;
}

/* §6.3 — the read-only-until-edited banner shown once a reuse entry is
   picked, replacing the list above it. */
.awwly-recipient-reuse-banner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
	padding: 10px 12px;
	background: #edf7ef;
	border: 1px solid #b8ddc0;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.45;
	color: #236b35;
}

.awwly-recipient-reuse-banner[hidden] {
	display: none;
}

.awwly-recipient-reuse-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.awwly-recipient-reuse-eyebrow {
	font-size: 13px;
	color: #174d27;
}

.awwly-recipient-reuse-reason {
	color: #4c6f55;
}

.awwly-recipient-reuse-edit {
	flex-shrink: 0;
	background: none;
	border: none;
	color: #2271b1;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px;
}

.awwly-recipient-manual-fields[hidden] {
	display: none;
}

/* §6.4 — shown the moment an edited, previously-reused address diverges
   from its source and stops being a free/cheap additional card. */
.awwly-recipient-degroup-notice {
	margin: -4px 0 16px;
	padding: 9px 10px;
	border-radius: 6px;
	background: #fcf0e4;
	color: #8a5a00;
	font-size: 12px;
	line-height: 1.45;
}

.awwly-recipient-degroup-notice:empty {
	display: none;
	margin: 0;
	padding: 0;
}

.awwly-recipient-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #333;
	margin-bottom: 8px;
}

.awwly-recipient-label select,
.awwly-recipient-label input {
	display: block;
	width: 100%;
	margin-top: 3px;
	padding: 6px 10px;
	font-size: 14px;
	line-height: 1.3;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
	font-weight: 400;
	background: #fff;
	color: #222;
}

.awwly-recipient-label select:focus,
.awwly-recipient-label input:focus {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.awwly-recipient-label select.is-invalid,
.awwly-recipient-label input.is-invalid {
	border-color: #b32d2e;
	box-shadow: 0 0 0 1px #b32d2e;
}

/* §6.3 — copied-from-reuse fields, locked until "Edit this address". */
.awwly-recipient-label input:read-only,
.awwly-recipient-label select:disabled {
	background: #f0f0f1;
	color: #555;
}

.awwly-recipient-search-wrap {
	position: relative;
}

.awwly-recipient-suggestions {
	list-style: none;
	margin: -8px 0 12px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
}

.awwly-recipient-suggestions:empty {
	display: none;
	border: none;
	margin: 0;
}

.awwly-recipient-suggestion {
	padding: 8px 10px;
	font-size: 13px;
	cursor: pointer;
	border-bottom: 1px solid #eee;
}

.awwly-recipient-suggestion:last-child {
	border-bottom: none;
}

.awwly-recipient-suggestion:hover,
.awwly-recipient-suggestion:focus {
	background: #f5f5f5;
	outline: none;
}

.awwly-recipient-error {
	margin: 0 0 12px;
	font-size: 13px;
	color: #b32d2e;
	min-height: 0;
}

.awwly-recipient-error:empty {
	display: none;
}

.awwly-recipient-status {
	margin: -2px 0 12px;
	padding: 9px 10px;
	border-radius: 6px;
	background: #edf7ef;
	color: #236b35;
	font-size: 12px;
	line-height: 1.45;
}

.awwly-recipient-status:empty {
	display: none;
}

.awwly-recipient-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 12px 24px 16px;
	background: #fff;
	border-top: 1px solid #eee;
}

.awwly-recipient-cancel {
	background: none;
	border: none;
	font-size: 14px;
	color: #555;
	cursor: pointer;
	padding: 10px 8px;
}

.awwly-recipient-continue {
	background: #1c1b1a;
	color: #fff;
	border: 1px solid #1c1b1a;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* Fulfilment/Delivery addendum §20 step 4 — postage selection, inside the
   same .awwly-recipient-card as the address fields above. */
.awwly-recipient-postage {
	margin-bottom: 12px;
}

.awwly-recipient-postage-list {
	font-size: 13px;
}

.awwly-recipient-postage-option {
	display: block;
	font-weight: 400;
	padding: 6px 0;
	cursor: pointer;
}

.awwly-recipient-postage-description {
	display: block;
	margin-left: 20px;
	color: #777;
	font-size: 12px;
}

.awwly-recipient-postage-empty {
	margin: 0;
	color: #b32d2e;
	font-size: 13px;
}

/* Revision 1 §6.3 — the locked, read-only postage summary shown in place
   of the interactive radio list while a reused address+option is in
   force. Same visual language as .awwly-recipient-reuse-banner, since it's
   the same "reused and locked" state, just for the postage half of it. */
.awwly-recipient-postage-locked {
	margin: 0;
	padding: 9px 10px;
	border-radius: 6px;
	background: #edf7ef;
	border: 1px solid #b8ddc0;
	color: #236b35;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.awwly-recipient-postage-locked[hidden] {
	display: none;
}

@media ( max-width: 420px ), ( max-height: 620px ) {
	.awwly-recipient-overlay {
		padding: 12px;
	}

	.awwly-recipient-card {
		max-height: calc( 100vh - 24px );
		max-height: calc( 100dvh - 24px );
	}

	.awwly-recipient-header {
		padding: 16px 16px 10px;
	}

	.awwly-recipient-body {
		padding: 12px 16px 10px;
	}

	.awwly-recipient-actions {
		padding: 10px 16px 12px;
	}
}

.awwly-recipient-thankyou {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid #e5e0d8;
	border-radius: 12px;
	background: #fbf9f6;
}

.awwly-recipient-thankyou-main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.awwly-recipient-thankyou-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.awwly-recipient-thankyou-copy h3 {
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 700;
	color: #211d1a;
	line-height: 1.3;
}

.awwly-recipient-thankyou-copy p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: #4a453f;
}

.awwly-recipient-thankyou-control {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	margin-top: 2px;
}

.awwly-recipient-thankyou-switch {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #cfc8c0;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.awwly-recipient-thankyou-switch.is-on {
	background: #c8272f;
}

.awwly-recipient-thankyou-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(33, 29, 26, 0.25);
	transition: transform 160ms ease;
}

.awwly-recipient-thankyou-switch.is-on .awwly-recipient-thankyou-knob {
	transform: translateX(20px);
}

.awwly-recipient-thankyou-switch:focus-visible {
	outline: 2px solid #211d1a;
	outline-offset: 2px;
}

.awwly-recipient-thankyou-state {
	font-size: 0.78rem;
	font-weight: 600;
	color: #211d1a;
	text-align: right;
	white-space: nowrap;
}

.awwly-recipient-thankyou-why {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid #ebe4dc;
}

.awwly-recipient-thankyou-why summary {
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 600;
	color: #6b655c;
	list-style: none;
}

.awwly-recipient-thankyou-why summary::-webkit-details-marker {
	display: none;
}

.awwly-recipient-thankyou-why summary::before {
	content: "▸ ";
	display: inline-block;
	transition: transform 120ms ease;
}

.awwly-recipient-thankyou-why[open] summary::before {
	transform: rotate(90deg);
}

.awwly-recipient-thankyou-why p {
	margin: 8px 0 0;
	font-size: 0.84rem;
	line-height: 1.45;
	color: #4a453f;
}

@media (max-width: 480px) {
	.awwly-recipient-thankyou-main {
		flex-direction: column;
		gap: 12px;
	}

	.awwly-recipient-thankyou-control {
		flex-direction: row;
		align-items: center;
		width: 100%;
		justify-content: space-between;
	}

	.awwly-recipient-thankyou-state {
		text-align: left;
	}
}

.awwly-design-thankyou {
	margin-top: 0.85rem;
	padding-top: 0.75rem;
	border-top: 1px solid #e5e0d8;
}
.awwly-design-thankyou-label {
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #6b655c;
	margin: 0 0 0.35rem;
}
.awwly-design-thankyou blockquote {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
}