/* Santa kit page (/santa). OFL fonts for the printables: Instrument Serif and Great Vibes (licenses in /fonts). */
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif Italic"; src: url("/fonts/InstrumentSerif-Italic-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("/fonts/GreatVibes-latin.woff2") format("woff2"); font-display: swap; }
.top-links { display: flex; gap: 16px; align-items: center; font-size: 14px; }
.top-links a { color: var(--muted); }
.result canvas, #doc { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--line); }
#doc { margin-top: 16px; border: 1px solid var(--line); }
#doc:not([width]) { display: none; }
.result .styles { margin-bottom: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions button { font: inherit; font-size: 15px; font-weight: 700; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; }
.actions button:disabled { opacity: .45; cursor: default; }
.actions .buy { padding: 10px 16px; }
.fields { display: grid; gap: 12px; margin: 16px 0; }
@media (min-width: 700px) { .fields { grid-template-columns: 1fr 1fr; } .fields .wide { grid-column: 1 / -1; } }
.fields label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.fields input, .fields select { font: inherit; font-size: 16px; color: var(--ink); padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
/* Free certificate pages (/nice-list-certificate, /certificado-de-santa-claus): the form sits in the hero, and a live
   preview replaces the sample picture once a name is typed. */
.still.doc canvas { display: block; width: 100%; height: auto; }
.still.doc canvas:not([width]) { display: none; }
button.upload { border: 0; font: inherit; font-weight: 700; }
.next { margin: 14px 0 0; }
.next a { color: var(--ink); font-weight: 700; }
/* /santa: what the kit gives, as one picture */
.kit-pic { margin: 0; max-width: 560px; }
.kit-pic img { display: block; width: 100%; height: auto; border-radius: 14px; }
.kit-pic figcaption { color: var(--muted); font-size: 14px; margin-top: 8px; }