/* ==========================================================================
   Scan & Pay for WooCommerce: scanner page, live receipt, printable sign and shelf labels

   Table of contents
   1. Variables and base
   2. Scanner
   3. Full-screen scanner page
   4. Live receipt (order received page)
   5. Printables
   6. Media queries

   !important is used only where a theme must not win: [hidden] (a hidden state
   beats any display rule) and the colour and underline of the Pay link, the
   receipt link and the round camera buttons, which themes style through `a`
   and `button` selectors.
   ========================================================================== */

/* == 1. Variables and base ================================================ */

.rpspw-scan,
.rpspw-receipt,
.rpspw-print {
	--rpspw-ink: #15181c;
	--rpspw-muted: #5a6169;
	--rpspw-line: #e2e5e1;
	--rpspw-ground: #f5f6f3;
	--rpspw-accent: #1e5bd8;
	--rpspw-ok: #1f7a4d;
	--rpspw-warn: #8a4108;
	color: var(--rpspw-ink);
	box-sizing: border-box;
}

.rpspw-scan *,
.rpspw-receipt *,
.rpspw-print * {
	box-sizing: border-box;
}

/* == End 1. Variables and base ============================================ */


/* == 2. Scanner =========================================================== */

.rpspw-scan {
	max-width: 480px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 0 var(--rpspw-line), 0 0 0 1px var(--rpspw-line);
}

.rpspw-scan [hidden] {
	display: none !important;
}

.rpspw-scan__notices:empty {
	display: none;
}

.rpspw-scan__notices {
	padding: 12px 16px 0;
}

.rpspw-scan__camera {
	position: relative;
	height: 340px;
	background: #1b1f24;
	overflow: hidden;
}

.rpspw-scan__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rpspw-scan__frame {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 70%;
	max-width: 280px;
	aspect-ratio: 5 / 4;
	transform: translate(-50%, -54%);
	border-radius: 16px;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
	outline: 4px solid #fff;
	outline-offset: -4px;
}

.rpspw-scan__line {
	position: absolute;
	left: 12px;
	right: 12px;
	top: 50%;
	height: 2px;
	background: var(--rpspw-accent);
	box-shadow: 0 0 12px var(--rpspw-accent);
	animation: rpspw-scanline 2.4s ease-in-out infinite;
}

@keyframes rpspw-scanline {
	0%, 100% { top: 12%; }
	50% { top: 86%; }
}

.rpspw-scan__bar {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
}

.rpspw-scan__where {
	flex: 1;
	display: flex;
	flex-direction: column;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.rpspw-scan__location {
	font-size: 13px;
	color: #e3e7eb;
}

.rpspw-scan button.rpspw-scan__torch[aria-pressed="true"] {
	background: #fff;
	color: var(--rpspw-ink) !important;
}

.rpspw-scan__hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	margin: 0;
	text-align: center;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.rpspw-scan__start {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--rpspw-ink);
	font-weight: 700;
	cursor: pointer;
}

.rpspw-scan__toast {
	position: absolute;
	left: 50%;
	top: 64px;
	transform: translateX(-50%);
	max-width: calc(100% - 32px);
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	color: var(--rpspw-ink);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.rpspw-scan__toast::before {
	content: "\2713";
	display: inline-block;
	margin-right: 8px;
	color: var(--rpspw-ok);
	font-weight: 700;
}

.rpspw-scan__panel {
	margin: 12px 16px 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: #fbefe4;
	color: var(--rpspw-warn);
}

.rpspw-scan__problem-title {
	margin: 0;
	font-weight: 700;
}

.rpspw-scan__problem-text {
	margin: 4px 0 0;
	color: #5c2c06;
	font-size: 14px;
	line-height: 1.45;
}

.rpspw-scan__problem-text:empty {
	display: none;
}

.rpspw-scan__problem-link {
	display: inline-block;
	margin-top: 6px;
	font-weight: 700;
}

.rpspw-scan__sheet {
	padding: 6px 16px 18px;
}

.rpspw-scan__sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rpspw-scan__title {
	margin: 0;
	font-size: 18px;
}

.rpspw-scan__title span {
	color: var(--rpspw-muted);
	font-weight: 500;
}

.rpspw-scan__manual-toggle {
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--rpspw-accent);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.rpspw-scan__manual {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 0 12px;
}

.rpspw-scan__manual label {
	font-size: 13px;
	font-weight: 500;
}

.rpspw-scan__manual-row {
	display: flex;
	gap: 8px;
}

.rpspw-scan__manual input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 12px;
	border: 1px solid #c9ced3;
	border-radius: 10px;
	font-size: 17px;
	letter-spacing: 0.04em;
}

.rpspw-scan__manual button {
	height: 48px;
	padding: 0 16px;
	border: 0;
	border-radius: 10px;
	background: var(--rpspw-accent);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.rpspw-scan__manual-help {
	margin: 0;
	color: var(--rpspw-muted);
	font-size: 13px;
}

.rpspw-scan__empty {
	margin: 0;
	padding: 22px 0;
	text-align: center;
	color: var(--rpspw-muted);
	line-height: 1.45;
}

.rpspw-scan__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rpspw-scan__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #eceeeb;
	margin: 0;
}

.rpspw-scan__item-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rpspw-scan__item-name {
	font-weight: 500;
	overflow-wrap: anywhere;
}

.rpspw-scan__item-meta {
	color: var(--rpspw-muted);
	font-size: 13px;
}

.rpspw-scan__stepper {
	display: flex;
	align-items: center;
	border: 1px solid #d5d9dd;
	border-radius: 999px;
}

.rpspw-scan__stepper button {
	width: 38px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--rpspw-ink);
	font-size: 18px;
	cursor: pointer;
}

.rpspw-scan__stepper button:disabled {
	color: #a9b0b7;
	cursor: default;
}

.rpspw-scan__stepper span {
	min-width: 18px;
	text-align: center;
	font-weight: 700;
}

.rpspw-scan__item-total {
	min-width: 56px;
	text-align: right;
	font-weight: 700;
}

.rpspw-scan__foot {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 14px;
}

.rpspw-scan__subtotal {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--rpspw-muted);
	font-size: 14px;
}

.rpspw-scan__subtotal strong {
	color: var(--rpspw-ink);
}

.rpspw-scan__pay {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	border-radius: 14px;
	background: var(--rpspw-accent);
	color: #fff !important;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none !important;
}

.rpspw-scan__pay[aria-disabled="true"] {
	background: #c9ced3;
	cursor: not-allowed;
}

/* With wallet buttons above it, the checkout link becomes the second choice. */
.rpspw-scan__pay.is-secondary {
	min-height: 48px;
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--rpspw-line);
	color: var(--rpspw-ink) !important;
	font-size: 15px;
}

.rpspw-scan__express {
	display: grid;
	gap: 8px;
	margin-bottom: 8px;
}

.rpspw-scan__wallet {
	height: 52px;
}

.rpspw-scan__wallet apple-pay-button {
	display: block;
	--apple-pay-button-width: 100%;
	--apple-pay-button-height: 52px;
	--apple-pay-button-border-radius: 14px;
}

.rpspw-scan__wallet > div,
.rpspw-scan__wallet button {
	width: 100%;
	height: 100%;
}

/* Round buttons on the camera: back to the store, sound, flashlight. Doubled
   class and element selectors so a theme's own button styles don't win. */
.rpspw-scan a.rpspw-scan__round,
.rpspw-scan button.rpspw-scan__round {
	flex: none;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.45);
	box-shadow: none;
	line-height: 1;
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.rpspw-scan .rpspw-scan__round:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.rpspw-scan__sound[aria-pressed="true"] .rpspw-scan__sound-off,
.rpspw-scan__sound[aria-pressed="false"] .rpspw-scan__sound-on {
	display: none;
}

/* Each scan answers: the frame flashes green when an item is added, red when not. */
.rpspw-scan__frame {
	transition: outline-color 0.15s;
}

.rpspw-scan__frame.is-ok {
	outline-color: #3ddc84;
}

.rpspw-scan__frame.is-error {
	outline-color: #ff5d5d;
	animation: rpspw-shake 0.3s;
}

.rpspw-scan__frame.is-ok .rpspw-scan__line,
.rpspw-scan__frame.is-error .rpspw-scan__line {
	visibility: hidden;
}

@keyframes rpspw-shake {
	25% { transform: translate(calc(-50% - 6px), -54%); }
	75% { transform: translate(calc(-50% + 6px), -54%); }
}

.rpspw-scan__toast {
	animation: rpspw-drop 0.18s ease-out;
}

@keyframes rpspw-drop {
	from {
		opacity: 0;
		transform: translate(-50%, -6px);
	}
}

.rpspw-scan__item.is-new {
	animation: rpspw-flash 1.4s ease-out;
}

@keyframes rpspw-flash {
	from { background: #e9f7ef; }
	to { background: transparent; }
}

/* First visit: how it works, in place of an empty list. */
.rpspw-scan__empty {
	padding: 10px 0 14px;
	text-align: left;
}

.rpspw-scan__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rpspw-step;
}

.rpspw-scan__steps li {
	position: relative;
	margin: 0;
	padding: 8px 0 8px 44px;
	color: var(--rpspw-muted);
	font-size: 14px;
	line-height: 1.4;
	counter-increment: rpspw-step;
}

.rpspw-scan__steps li::before {
	content: counter(rpspw-step);
	position: absolute;
	left: 0;
	top: 8px;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: #edf2fd;
	color: var(--rpspw-accent);
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}

.rpspw-scan__steps strong {
	display: block;
	color: var(--rpspw-ink);
	font-size: 15px;
}

/* == End 2. Scanner ======================================================= */


/* == 3. Full-screen scanner page ========================================== */

/* The camera fills the top; the items slide up over it; Pay stays at the bottom. */

body.rpspw-app {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: #15181c;
}

.rpspw-app__main {
	max-width: 520px;
	margin: 0 auto;
}

.rpspw-app .rpspw-scan {
	/* Visible, or the sticky Pay bar below would stick to this box, not the screen. */
	overflow: visible;
	max-width: none;
	min-height: 100vh;
	min-height: 100dvh;
	border-radius: 0;
	box-shadow: none;
	background: #15181c;
}

.rpspw-app .rpspw-scan__notices {
	background: #fff;
}

.rpspw-app .rpspw-scan__camera {
	flex: none;
	height: 48vh;
	height: 48dvh;
	min-height: 280px;
}

.rpspw-app .rpspw-scan__bar {
	padding-top: calc(12px + env(safe-area-inset-top));
}

.rpspw-app .rpspw-scan__toast {
	top: calc(68px + env(safe-area-inset-top));
}

.rpspw-app .rpspw-scan__hint,
.rpspw-app .rpspw-scan__start {
	bottom: 34px;
}

.rpspw-app .rpspw-scan__panel {
	position: relative;
	z-index: 2;
	margin: -20px 0 0;
	border-radius: 20px 20px 0 0;
	padding: 16px 16px 26px;
}

.rpspw-app .rpspw-scan__sheet {
	position: relative;
	z-index: 3;
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-top: -20px;
	padding-bottom: 0;
	border-radius: 20px 20px 0 0;
	background: #fff;
}

.rpspw-app .rpspw-scan__panel + .rpspw-scan__sheet {
	margin-top: -14px;
}

.rpspw-app .rpspw-scan__sheet::before {
	content: "";
	display: block;
	width: 36px;
	height: 4px;
	margin: 0 auto 4px;
	border-radius: 999px;
	background: #d5d9dd;
}

.rpspw-app .rpspw-scan__items {
	flex: 1;
}

.rpspw-app .rpspw-scan__foot {
	position: sticky;
	bottom: 0;
	margin: auto -16px 0;
	padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.06);
}

/* == End 3. Full-screen scanner page ====================================== */


/* == 4. Live receipt (order received page) ================================ */

.rpspw-receipt {
	max-width: 480px;
	margin: 0 auto 28px;
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 1px var(--rpspw-line);
}

.rpspw-receipt__band {
	padding: 32px 20px 24px;
	background: var(--rpspw-ok);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.rpspw-receipt__check {
	width: 68px;
	height: 68px;
	border-radius: 999px;
	background: #fff;
	color: var(--rpspw-ok);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rpspw-receipt__title {
	margin: 0;
	color: #fff;
	font-size: 48px;
	line-height: 1;
}

.rpspw-receipt__number {
	margin: 0;
	font-size: 22px;
	font-variant-numeric: tabular-nums;
}

.rpspw-receipt__live {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.18);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.rpspw-receipt__pulse {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #fff;
	animation: rpspw-pulse 1.4s ease-out infinite;
}

@keyframes rpspw-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
	100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}

.rpspw-receipt__body {
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rpspw-receipt__where {
	margin: 0;
	color: var(--rpspw-muted);
	font-size: 14px;
}

.rpspw-receipt__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rpspw-receipt__items li,
.rpspw-receipt__total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 6px 0;
}

.rpspw-receipt__total {
	border-top: 1px solid #eceeeb;
	padding-top: 12px;
	color: var(--rpspw-muted);
}

.rpspw-receipt__total strong {
	color: var(--rpspw-ink);
	font-size: 20px;
}

.rpspw-receipt__note {
	margin: 0;
	line-height: 1.45;
}

.rpspw-receipt__again {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border-radius: 14px;
	background: var(--rpspw-ink);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}

/* == End 4. Live receipt (order received page) ============================ */


/* == 5. Printables ======================================================== */

.rpspw-print {
	margin: 0;
	padding: 24px;
	background: #e9ebe7;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.rpspw-print__toolbar {
	max-width: 8.5in;
	margin: 0 auto 16px;
}

.rpspw-print__toolbar button {
	min-height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: var(--rpspw-ink);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.rpspw-sign {
	width: 5.625in;
	min-height: 7.9in;
	margin: 0 auto;
	padding: 0.45in;
	background: var(--rpspw-sign-bg, var(--rpspw-ink));
	color: var(--rpspw-sign-ink, #fff);
	display: flex;
	flex-direction: column;
	gap: 0.28in;
}

.rpspw-sign__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.rpspw-sign__store {
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.rpspw-sign__logo {
	display: block;
	max-width: 3in;
	max-height: 0.6in;
	width: auto;
	height: auto;
}

.rpspw-sign__pill {
	padding: 5px 12px;
	border: 1px solid var(--rpspw-sign-line, #3a4048);
	border-radius: 999px;
	color: var(--rpspw-sign-muted, #c4cad1);
	font-size: 13px;
}

.rpspw-sign__title {
	margin: 0;
	font-size: 56px;
	line-height: 1;
	letter-spacing: -0.02em;
}

.rpspw-sign__lead {
	margin: 0;
	color: var(--rpspw-sign-muted, #c4cad1);
	font-size: 18px;
	line-height: 1.45;
}

.rpspw-sign__card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	border-radius: 18px;
	background: #fff;
	color: var(--rpspw-ink);
}

.rpspw-sign__card p {
	margin: 0 0 6px;
	color: #4f5760;
	line-height: 1.45;
}

.rpspw-sign__card .rpspw-sign__point {
	color: var(--rpspw-ink);
	font-size: 21px;
	font-weight: 700;
}

.rpspw-sign__qr {
	flex: none;
	line-height: 0;
}

.rpspw-sign__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	counter-reset: rpspw-step;
}

.rpspw-sign__steps li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--rpspw-sign-muted, #c4cad1);
	font-size: 14px;
	line-height: 1.4;
	counter-increment: rpspw-step;
}

.rpspw-sign__steps li::before {
	content: counter(rpspw-step);
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--rpspw-sign-accent, #7fa8ff);
	color: var(--rpspw-sign-accent-ink, var(--rpspw-ink));
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rpspw-sign__steps strong {
	color: var(--rpspw-sign-ink, #fff);
	font-size: 16px;
}

.rpspw-sign__foot {
	margin: auto 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--rpspw-sign-line, #3a4048);
	color: var(--rpspw-sign-muted, #c4cad1);
	font-size: 14px;
}

/* Label sheets: one .rpspw-sheet per printed page, at the paper's exact size,
   so sticker positions line up on every page. Sizes are those of the paper
   and, for the Avery layouts, the manufacturer's template. */

.rpspw-labels {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.rpspw-sheet {
	box-sizing: border-box;
	background: #fff;
	display: grid;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	--rpspw-qr: 1.05in;
}

.rpspw-sheet--letter-3 {
	width: 8.5in;
	height: 11in;
	padding: 0.375in;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(4, 2.36in);
	gap: 0.125in;
}

.rpspw-sheet--a4-3 {
	width: 210mm;
	height: 297mm;
	padding: 10mm;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(4, 60mm);
	gap: 3mm;
	--rpspw-qr: 27mm;
}

/* Avery 5163 / 8163: 2 x 4 in, 2 across, 5 down, no gap between rows. */
.rpspw-sheet--avery-5163 {
	width: 8.5in;
	height: 11in;
	padding: 0.5in 0.15625in;
	grid-template-columns: repeat(2, 4in);
	grid-template-rows: repeat(5, 2in);
	column-gap: 0.1875in;
	--rpspw-qr: 1.55in;
}

/* Avery L7163: 99.1 x 38.1 mm, 2 across, 7 down. */
.rpspw-sheet--avery-l7163 {
	width: 210mm;
	height: 297mm;
	padding: 15.15mm 4.65mm;
	grid-template-columns: repeat(2, 99.1mm);
	grid-template-rows: repeat(7, 38.1mm);
	column-gap: 2.5mm;
	--rpspw-qr: 30mm;
}

/* Cut-out label: name and price on top, QR code and call to action below. */
.rpspw-label {
	min-width: 0;
	min-height: 0;
	padding: 14px;
	border: 1px dashed #a9b0b7;
	border-radius: 10px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-areas:
		"name name price"
		"qr cta cta";
	gap: 8px 10px;
	overflow: hidden;
	break-inside: avoid;
}

.rpspw-label__name {
	grid-area: name;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.rpspw-label__price {
	grid-area: price;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.rpspw-label__qr {
	grid-area: qr;
	align-self: end;
	line-height: 0;
}

.rpspw-label__qr svg {
	display: block;
	width: var(--rpspw-qr);
	height: var(--rpspw-qr);
}

.rpspw-label__cta {
	grid-area: cta;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-bottom: 4px;
	font-size: 11px;
	color: #4f5760;
}

.rpspw-label__cta strong {
	color: var(--rpspw-ink);
	font-size: 14px;
}

/* Sticker: the QR code down the left, the text beside it. No cut line. */
.rpspw-sheet--avery-5163 .rpspw-label,
.rpspw-sheet--avery-l7163 .rpspw-label {
	padding: 0.12in;
	border: 0;
	border-radius: 0;
	outline: 1px dashed #d5d9dd;
	outline-offset: -1px;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto minmax(0, 1fr);
	grid-template-areas:
		"qr name"
		"qr price"
		"qr cta";
	gap: 4px 12px;
}

.rpspw-sheet--avery-5163 .rpspw-label__qr,
.rpspw-sheet--avery-l7163 .rpspw-label__qr {
	align-self: center;
}

.rpspw-sheet--avery-l7163 .rpspw-label {
	padding: 4mm;
}

.rpspw-sheet--avery-l7163 .rpspw-label__name {
	font-size: 13px;
}

.rpspw-sheet--avery-l7163 .rpspw-label__price {
	font-size: 17px;
}

.rpspw-sheet--avery-l7163 .rpspw-label__cta {
	font-size: 10px;
}

.rpspw-sheet--avery-l7163 .rpspw-label__cta strong {
	font-size: 12px;
}

.rpspw-print__empty {
	max-width: 6in;
	margin: 0 auto;
	padding: 24px;
	background: #fff;
	border-radius: 8px;
}

/* == End 5. Printables ==================================================== */


/* == 6. Media queries ===================================================== */

@media (prefers-reduced-motion: reduce) {
	.rpspw-scan__line {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rpspw-scan__frame,
	.rpspw-scan__toast,
	.rpspw-scan__item.is-new {
		animation: none;
		transition: none;
	}
}

@media print {
	.rpspw-print {
		padding: 0;
		background: #fff;
	}

	.rpspw-print__toolbar {
		display: none;
	}

	.rpspw-sign,
	.rpspw-sign__card {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.rpspw-labels {
		display: block;
	}

	.rpspw-sheet {
		box-shadow: none;
		break-after: page;
	}

	.rpspw-sheet:last-child {
		break-after: auto;
	}

	.rpspw-sheet--avery-5163 .rpspw-label,
	.rpspw-sheet--avery-l7163 .rpspw-label {
		outline: 0;
	}

	/* The sign; a label sheet sets its own paper with no margin. */
	@page {
		size: letter;
		margin: 0.25in;
	}
}

/* == End 6. Media queries ================================================= */