/* Sell & print (next/sell.v1.js, 2026-10-04) — loaded after next.vN.css */
.sl-card { padding: 1.4rem 1.4rem 1.5rem; margin-bottom: 1.3rem; max-width: 64rem; }
.sl-card .eyebrow { margin-bottom: .3rem; }
.sl-card .card-sub { max-width: 46rem; margin-top: .2rem; }
.sl-h3 { font-size: 1.15rem; margin: 1.3rem 0 .7rem; }
.sl-h3:first-child { margin-top: 0; }
.sl-h3 .hint { font-family: var(--font-body); font-weight: 400; }

/* the selling rows */
.sl-rows { list-style: none; display: flex; flex-direction: column; }
.sl-row { border-top: 1px solid var(--ink-faint); padding: .85rem 0; }
.sl-row:first-child { border-top: 0; padding-top: 0; }
.sl-row:not(.sl-live), .sl-row-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; }
.sl-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--ink-faint); }
.sl-what { display: flex; flex-direction: column; min-width: 0; }
.sl-what b { font-weight: 700; font-size: 1.05rem; }
.sl-what .hint { overflow-wrap: anywhere; }
.sl-acts { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.sl-badge { display: inline-block; border-radius: 999px; padding: .2rem .75rem; font-size: .88rem; font-weight: 600; background: var(--paper); color: var(--ink-mid); border: 1px solid var(--ink-faint); white-space: nowrap; }
.sl-badge.ok { background: var(--good-soft); color: var(--good); border-color: transparent; }
.sl-badge.bad { background: #FBEAEA; color: var(--danger); border-color: transparent; }
.sl-store-btns { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 0 calc(14px + .9rem); }
.sl-store-err, .sl-store-out { margin-left: calc(14px + .9rem); }
.sl-store-err { margin-top: .6rem; margin-bottom: 0; }
.sl-store-out:not(:empty) { margin-top: .8rem; }
.sl-quiet { border-color: var(--line); color: var(--ink-mid); }
.sl-result { max-width: none; margin-bottom: 0; }
.sl-result p { margin-top: .4rem; }
.sl-result ul { margin: .3rem 0 0 1.2rem; }
.sl-connect { margin: .9rem 0 0 calc(14px + .9rem); background: var(--paper); border: 1px solid var(--ink-faint); border-radius: 14px; padding: 1rem 1.1rem .9rem; max-width: 40rem; }
.sl-connect label { margin-bottom: .8rem; }
.sl-connect > .hint { margin: -.4rem 0 .8rem; }
.sl-connect .kit-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.sl-howto { margin: 0 0 1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; }

/* print options */
.sl-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.sl-opt { display: flex; flex-direction: column; gap: .5rem; border: 1.5px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; background: var(--white); }
.sl-opt b { font: 700 1.12rem/1.3 var(--font-serif); }
.sl-opt p { color: var(--ink-mid); font-size: .95rem; line-height: 1.5; flex: 1; }
.sl-opt .btn { align-self: flex-start; }

/* the quote form */
.sl-pq { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.6rem; align-items: start; }
.sl-pq label { margin-bottom: .9rem; }
.sl-pq-note { margin: -.4rem 0 1rem; }
.sl-pq-filelab input[type="file"] { padding: .55rem .6rem; }
.sl-pq-files { list-style: none; display: flex; flex-direction: column; gap: .4rem; margin: 0 0 1rem; }
.sl-pq-files:empty { display: none; }
.sl-pq-files li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; background: var(--paper); border-radius: 10px; padding: .5rem .8rem; }
.sl-pq-files li > span { min-width: 0; overflow-wrap: anywhere; }
.sl-pq-files .linkbtn { flex: none; font-size: .92rem; }
.sl-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sl-pq-send { background: var(--accent-soft); color: var(--accent-dark); border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1rem; }
.sl-pq-send .meter { margin-top: .6rem; }
#sl-pq-done { max-width: none; }
#sl-pq-done p { margin-top: .35rem; }
.sl-est { position: sticky; top: 1rem; background: var(--gold-soft); border-radius: 16px; padding: 1.1rem 1.2rem; transition: opacity .15s; }
.sl-est.busy { opacity: .6; }
.sl-est .eyebrow { margin-bottom: .6rem; }
.sl-est-total { display: flex; flex-direction: column; margin-bottom: .6rem; }
.sl-est-total span { color: var(--ink-mid); font-size: .95rem; }
.sl-est-total b { font: 700 2.1rem/1.15 var(--font-serif); color: var(--ink); }
.sl-est-line { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px dashed var(--line); padding: .5rem 0; }
.sl-est .hint { margin-top: .3rem; }
.sl-est-spec { border-top: 1px dashed var(--line); padding-top: .5rem; }
.sl-est-foot { margin-top: .9rem !important; font-size: .85rem; }

@media (max-width: 1000px) {
  .sl-pq { grid-template-columns: 1fr; }
  .sl-est { position: static; order: -1; }
}
@media (max-width: 760px) {
  .sl-card { padding: 1.1rem 1rem 1.2rem; }
  .sl-opts { grid-template-columns: 1fr; }
  .sl-row:not(.sl-live), .sl-row-top { grid-template-columns: auto minmax(0, 1fr); }
  .sl-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .sl-store-btns, .sl-store-err, .sl-store-out, .sl-connect { margin-left: 0; }
  .sl-store-btns .btn { flex: 1 1 100%; }
  .sl-est { padding: .9rem 1rem; }
  .sl-est-total b { font-size: 1.6rem; }
}