/* Store poster: one US Letter page. Fixed colors so it prints the same in light or dark mode. */
.poster {
  --ink: #111827;
  --muted: #4b5563;
  --accent: #4f46e5;
  --accent-soft: #eef0ff;
  --line: #e5e7eb;
  width: 8.5in;
  height: 11in;
  box-sizing: border-box;
  padding: 0.4in 0.5in 0.35in;
  background: #fff;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.poster * { box-sizing: border-box; }
.p-head { border-bottom: 4px solid var(--accent); padding-bottom: 0.1in; margin-bottom: 0.14in; }
.p-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 11pt; color: var(--accent); letter-spacing: .02em; text-transform: uppercase; }
.p-logo { width: 18px; height: 18px; border-radius: 5px; background: var(--accent); position: relative; }
.p-logo::after { content: ""; position: absolute; inset: 5px 4px 4px; border-radius: 2px; background: #fff; }
.poster h1 { font-size: 34pt; line-height: 1.02; margin: 6px 0 0; letter-spacing: -.01em; }
.poster h1 span { color: var(--accent); }

.p-top { display: grid; grid-template-columns: 2.4in 1fr; gap: 0.3in; align-items: center; margin-bottom: 0.12in; }
.p-qr { text-align: center; }
.p-qr-code { border: 3px solid var(--ink); border-radius: 14px; padding: 0.1in; background: #fff; }
.p-qr-code svg { display: block; width: 100%; height: auto; }
.p-scan { margin-top: 6px; font-weight: 700; font-size: 11pt; }
.p-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 0.12in; }
.p-steps li { counter-increment: step; position: relative; padding-left: 0.46in; font-size: 12pt; line-height: 1.3; min-height: 0.34in; }
.p-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 0.32in; height: 0.32in; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 13pt; }

.poster h2 { font-size: 16pt; margin: 0 0 0.06in; }
.p-reasons { list-style: none; margin: 0 0 0.12in; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.05in 0.16in; }
.p-reasons li { display: flex; gap: 8px; align-items: flex-start; font-size: 10pt; line-height: 1.25; padding: 0.04in 0.08in; border-radius: 8px; background: #f9fafb; border: 1px solid var(--line); }
.p-icon { font-size: 15pt; line-height: 1; flex: none; width: 22px; text-align: center; }

.p-bottom { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0.18in; margin-top: auto; }
.p-box { border: 1.5px solid var(--line); border-radius: 12px; padding: 0.1in 0.14in; font-size: 10pt; line-height: 1.3; background: var(--accent-soft); }
.p-box h3 { margin: 0 0 4px; font-size: 13pt; }
.p-box p { margin: 0 0 5px; }
.p-box ul { margin: 0; padding-left: 18px; }
.p-box li { margin: 1px 0; }
.p-urgent { background: #fef3f2; border-color: #fda29b; }
.p-urgent h3 { color: #b42318; }
.p-one { color: var(--muted); font-style: italic; margin-top: 6px !important; }

.p-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); margin-top: 0.1in; padding-top: 0.08in; font-size: 9pt; color: var(--muted); }
.p-store { font-weight: 700; color: var(--ink); font-size: 11pt; }
.p-url { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 7.5pt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 3.4in; }

/* On-screen preview (Store QR codes → Preview) */
.poster-preview { overflow: auto; background: #d0d5dd; padding: 16px; border-radius: 10px; max-height: 70vh; }
.poster-preview .poster { transform: scale(var(--poster-scale, .62)); transform-origin: top left; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); margin-bottom: calc(11in * (var(--poster-scale, .62) - 1)); margin-right: calc(8.5in * (var(--poster-scale, .62) - 1)); }

@media print {
  @page { size: letter; margin: 0; }
  html, body { background: #fff !important; }
  .poster { page-break-after: always; break-after: page; }
}