:root { --ink:#000; --paper:#fff; --accent:#0b3d91; --soft:#fff7cc; --line:#222; }
* { box-sizing: border-box; }
html { font-size: 22px; }
body { margin: 0 auto; max-width: 900px; padding: 16px; font-family: Verdana, Arial, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.35; }
h1 { font-size: 2rem; margin: 0 0 .4rem; }
h2 { font-size: 1.3rem; margin: 1.2rem 0 .4rem; padding: .3rem .6rem; background: var(--accent); color: #fff; border-radius: 8px; }
h2.noloc { background: #6b2a00; }
h3 { font-size: 1.05rem; margin: .8rem 0 .3rem; }
.store-pick { font-weight: bold; font-size: 1.1rem; display: block; }
select, input { font-size: 1.1rem; padding: .5rem; border: 3px solid var(--line); border-radius: 8px; background: #fff; color: #000; }
select { width: 100%; margin-top: .3rem; }
.store-info { margin: .3rem 0 1rem; }
.big-label { font-weight: bold; display: block; margin-bottom: .3rem; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.row input { flex: 1 1 260px; }
.btn { font-size: 1rem; font-weight: bold; padding: .6rem 1rem; min-height: 56px; border: 3px solid var(--line); border-radius: 10px; background: #f2f2f2; color: #000; cursor: pointer; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.danger { background: #fff; color: #a00000; border-color: #a00000; }
.btn.small { min-height: 48px; padding: .3rem .6rem; }
.btn:focus-visible, .chip:focus-visible, .check:focus-visible, .info:focus-visible { outline: 4px solid #ff9900; outline-offset: 2px; }
details { margin: .8rem 0; }
summary.btn { display: inline-block; list-style: none; }
summary::-webkit-details-marker { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { font-size: 1rem; padding: .5rem .8rem; min-height: 52px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: #000; cursor: pointer; }
.chip span { font-size: 1.4rem; }
.chip.added { background: #c8f7c5; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
ul { list-style: none; padding: 0; margin: 0; }
.item { display: flex; align-items: center; gap: .7rem; padding: .5rem .3rem; border-bottom: 2px solid #ccc; }
.check { flex: 0 0 64px; width: 64px; height: 64px; border: 4px solid #000; border-radius: 8px; background: #fff; font-size: 2.4rem; line-height: 1; color: #0a6b00; cursor: pointer; }
.pic { font-size: 2.6rem; flex: 0 0 auto; }
.info { flex: 1; text-align: left; background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: .2rem; }
.name { display: block; font-size: 1.3rem; font-weight: bold; }
.qty { font-weight: normal; }
.where { display: block; font-size: 1rem; }
.where.missing { color: #6b2a00; text-decoration: underline; }
.item.done .name { text-decoration: line-through; color: #555; }
.item.done .pic { opacity: .45; }
.empty { font-size: 1.2rem; padding: 1rem; background: var(--soft); border-radius: 10px; }
dialog { border: 4px solid #000; border-radius: 12px; max-width: 600px; width: 95%; font-size: 1.1rem; }
dialog label { display: block; font-weight: bold; margin: .6rem 0; }
dialog input { width: 100%; margin-top: .2rem; }
dialog::backdrop { background: rgba(0,0,0,.5); }
#orderList li { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
#orderList li span { flex: 1; font-weight: bold; }
.hint { font-size: .9rem; }
footer { margin-top: 2rem; border-top: 2px solid #ccc; padding-top: 1rem; }
.print-only { display: none; }

@media print {
  @page { size: letter; margin: 0.45in; }
  html { font-size: 15pt; }
  body { max-width: none; padding: 0; }
  .no-print, #list, dialog { display: none !important; }
  .print-only { display: block !important; }
  .print-head h1 { font-size: 22pt; margin: 0; }
  .print-head p { margin: 0 0 8pt; font-size: 11pt; }
  #printList.two-col { column-count: 2; column-gap: 0.35in; }
  .pgroup { break-inside: avoid-column; margin-bottom: 6pt; }
  .pgroup h2 { font-size: 13pt; background: none; color: #000; border-bottom: 2pt solid #000; border-radius: 0; padding: 0 0 2pt; margin: 6pt 0 3pt; }
  .prow { display: flex; align-items: center; gap: 8pt; padding: 3pt 0; break-inside: avoid; }
  .pbox { flex: 0 0 20pt; width: 20pt; height: 20pt; border: 2.5pt solid #000; border-radius: 3pt; }
  .ppic { font-size: 20pt; line-height: 1; }
  .pname { font-size: 16pt; font-weight: bold; }
  .pname small { font-weight: normal; font-size: 11pt; }
}