.donation .donation-trap { position: absolute; left: -9999px; }
.donation fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.donation fieldset label { display: inline-block; margin-right: 1rem; }
.donation .donation-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.donation .donation-notice { padding: .75rem 1rem; border-left: 4px solid currentColor; }
.donation .donation-progress progress { width: 100%; height: 1rem; }
.shop-buy { margin: 2rem 0; padding: 1rem 1.25rem; border: 1px solid currentColor; border-radius: 4px; }
.shop-buy .shop-trap { position: absolute; left: -9999px; }
.shop-buy .shop-fields { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.shop-buy .shop-fields label { flex: 1 1 12rem; }
.shop-buy .shop-price { font-size: 1.4rem; margin-bottom: .5rem; }
.shop-buy .shop-notice { padding: .75rem 1rem; border-left: 4px solid currentColor; }
/* The small text sets the line height itself: in a paragraph of the normal size, its lines took the spacing of the paragraph */
.shop-buy .shop-note { margin: .5rem 0 1rem; opacity: .7; font-size: .875em; line-height: 1.4; }
.shop-buy .shop-note small { font-size: inherit; }

/* Compact form: it sits in a side column and should not need scrolling */
.donation .donation-form fieldset { display: flex; flex-wrap: wrap; gap: .1rem 1rem; margin-bottom: .6rem; }
.donation .donation-form legend { flex-basis: 100%; margin-bottom: .2rem; padding: 0; font-size: .9rem; }
.donation .donation-form fieldset label { margin: 0; }
.donation .donation-presets { flex-wrap: nowrap; gap: .4rem; margin-bottom: .4rem; width: 100%; }
.donation .donation-presets .button { flex: 1 1 0; margin: 0; padding: .3rem .1rem; min-width: 0; white-space: nowrap; font-size: .85rem; }
.donation .donation-form > label { display: block; margin-bottom: .6rem; }
.donation .donation-form input[type=text] { margin-bottom: 0; }
.donation-layout .donation-about img { max-width: 100%; height: auto; }

/* The searchable lists look like the fields around them (one line, same border, same height) */
.ts-wrapper { width: 100%; margin: 0 0 var(--pico-spacing, 1rem); }
.ts-wrapper .ts-control { box-sizing: border-box; flex-wrap: nowrap; align-items: center; min-height: 0; padding: 0.65rem 0.8rem; font: inherit; color: inherit; border: 1px solid var(--pico-form-element-border-color, rgba(127, 127, 127, 0.5)); border-radius: var(--pico-border-radius, 0.4rem); background: var(--pico-form-element-background-color, Canvas); box-shadow: none; }
.ts-wrapper .ts-control input { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: none; box-shadow: none; }
.ts-wrapper.single .ts-control .item { flex: 0 1 auto; max-width: 100%; margin: 0; }
.ts-wrapper.single .ts-control::after { display: none; }
.ts-wrapper.focus .ts-control { border-color: var(--q2-accent, currentColor); box-shadow: none; }
.ts-dropdown { z-index: 60; margin-top: 0.25rem; border: 1px solid var(--pico-form-element-border-color, rgba(127, 127, 127, 0.5)); border-radius: var(--pico-border-radius, 0.4rem); font: inherit; color: CanvasText; background: var(--q2-bg-elev, Canvas); }
.ts-dropdown .option { padding: 0.45rem 0.8rem; }
.ts-dropdown .active { background: rgba(127, 127, 127, 0.2); color: inherit; }
/* Tom Select paints its single lists white with a rule of higher weight: follow the fields instead */
html .ts-wrapper.single .ts-control, html .ts-wrapper.single.input-active .ts-control { background-color: var(--pico-form-element-background-color, Canvas); background-image: none; }
/* The ways to pay of a provider, under its name */
.shop-providers label small, .donation fieldset label small { display: block; width: auto; margin: 0 0 0 1.75em; opacity: .7; }

/* Back from a donation: the thanks take the whole page */
.donation-thanks-page { max-width: 40rem; margin: 3rem auto; text-align: center; }
.donation-thanks-page h1 { font-size: 2.5rem; }
.donation-thanks-page .donation-thanks-lead { font-size: 1.25rem; }

/* The image of a donation page, beside its text; above it on a narrow screen */
.donation-cover { float: left; width: min(40%, 20rem); margin: 0 1.5rem 1rem 0; }
.donation-cover img { display: block; width: 100%; height: auto; border-radius: .5rem; }
@media (max-width: 600px) { .donation-cover { float: none; width: 100%; margin: 0 0 1rem; } }