/* Einkauf */
.progress { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.shop { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; margin-top: 16px; }
.shop h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--font-body); font-weight: 700; margin-bottom: 6px; }
.item { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; }
.item:first-of-type { border-top: 0; }
.item input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.item .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item .nm small { display: block; color: var(--muted); font-size: 12px; }
.item .q { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.item.done .nm b, .item.done .q { text-decoration: line-through; color: var(--muted); }
.addrow { display: flex; gap: 8px; margin-top: 16px; }
.addrow input { flex: 1; min-width: 0; }

.daterow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); gap: 12px; }
.mealchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mealchip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 500; min-width: 0; }
.mealchip span { overflow-wrap: anywhere; }

.pantrybox p { line-height: 1.5; }