/* Liste de courses : pensée pour le téléphone, en magasin */
.shop { max-width: 640px; width: 100%; display: flex; flex-direction: column; gap: 18px; }
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-nav .label { font-family: var(--f-display); font-weight: 700; min-width: 150px; text-align: center; }
.aisle { display: flex; flex-direction: column; }
.aisle h2 { font: 700 12px var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.item { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.item input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
.item .name { font-weight: 700; overflow-wrap: anywhere; }
.item .from { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.item .qty { font-family: var(--f-data); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.item.done .name { text-decoration: line-through; color: var(--muted); }
.item.done .qty { color: var(--muted); }
.progress { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress b { display: block; height: 100%; background: var(--basil); transition: width .2s; }
.add-item { display: grid; grid-template-columns: 1fr 90px 150px auto; gap: 8px; }
@media (max-width: 560px) { .add-item { grid-template-columns: 1fr 80px; } .add-item select, .add-item button { grid-column: span 1; } }
.offline { background: var(--tab-pdj); color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 14px; }