:root{font-family:Inter,system-ui,sans-serif;background:#f5f1e8;color:#20251f}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}header{position:sticky;top:0;z-index:10;background:#27462f;color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}header small{text-transform:uppercase;letter-spacing:.12em;opacity:.75}h1{font-size:1.25rem;margin:2px 0 0}header button{background:transparent;color:#fff;border:1px solid #ffffff66;border-radius:999px;padding:7px 11px}main{max-width:720px;margin:auto;padding:14px 14px 50px}nav{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#dedbd3;padding:4px;border-radius:12px;margin-bottom:14px}nav button{border:0;background:transparent;padding:10px;border-radius:9px;font-weight:800}nav button.active{background:#fff}form{display:grid;gap:8px;background:#fff;padding:12px;border-radius:14px}input{padding:12px;border:1px solid #d4d1c9;border-radius:10px}form button{border:0;background:#27462f;color:#fff;border-radius:10px;padding:12px;font-weight:800}.group{margin-top:16px;background:#fff;border-radius:14px;overflow:hidden}.group h2{margin:0;padding:10px 14px;background:#e8e4db;font-size:.95rem}.item{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:0;border-top:1px solid #ece9e2;background:#fff;text-align:left}.item .copy{flex:1;display:grid}.item .name{font-weight:800}.item .loc{font-size:.82rem;color:#70736f;margin-top:2px}.remove{border:0;background:transparent;font-size:1.5rem;color:#888}.check{width:28px;height:28px;border:2px solid #555d56;border-radius:8px;display:grid;place-items:center;font-weight:900}.item.picked{opacity:.5}.item.picked .name{text-decoration:line-through}.item.picked .check{background:#27462f;border-color:#27462f;color:#fff}.progress{background:#fff;padding:14px;border-radius:14px}.bar{height:8px;background:#ddd;border-radius:999px;overflow:hidden;margin-top:9px}.bar span{display:block;height:100%;background:#27462f;width:0}@media(min-width:560px){form{grid-template-columns:1fr 1fr auto}}.meta{font-size:.74rem;color:#8a8d88;margin-top:3px}.basket-wrap{border-top:1px solid #ece9e2}.basket-wrap .item{border-top:0}.location-actions{display:flex;gap:8px;padding:0 14px 12px 54px;background:#fff}.location-actions button{border-radius:9px;padding:8px 10px;font-weight:750}.location-actions .confirm{border:0;background:#27462f;color:#fff}.location-actions .correct{border:1px solid #b9bbb6;background:#fff;color:#30332f}

.list-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;padding:12px 14px;border-radius:14px;margin-bottom:10px}
.toolbar-note{font-size:.78rem;color:#777b76;margin-top:2px}.primary{border:0;background:#27462f;color:#fff;border-radius:10px;padding:10px 12px;font-weight:800}
.primary:disabled{opacity:.45}.empty-card{background:#fff;padding:20px;border-radius:14px;text-align:center;color:#666}
.basket-heading{font-size:1rem;margin:18px 2px 6px}.basket-heading:first-of-type{margin-top:14px}
#pickedGroups .item{opacity:.72}#pickedGroups .item .name{text-decoration:line-through}
@media(max-width:520px){.list-toolbar{align-items:flex-start}.list-toolbar .primary{white-space:nowrap}}

/* Mobile shopping page navigation */
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.header-actions #syncStatus{
  font-size:.72rem;
  opacity:.8;
  max-width:180px;
  text-align:right;
}
.header-link,
header .header-actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:7px 11px;
  border:1px solid #ffffff66;
  border-radius:999px;
  color:#fff;
  background:transparent;
  text-decoration:none;
  font-weight:750;
  white-space:nowrap;
}
.header-link:hover,
header .header-actions button:hover{
  background:#ffffff14;
}
.header-link.receipt-link{
  background:#fff;
  border-color:#fff;
  color:#27462f;
}

/* Store-location dialog */
#locationDialog{
  width:min(92vw,460px);
  border:0;
  border-radius:18px;
  padding:0;
  color:#20251f;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}
#locationDialog::backdrop{
  background:rgba(20,25,21,.50);
  backdrop-filter:blur(2px);
}
#locationDialog form{
  display:block;
  padding:24px;
  background:#fff;
  border-radius:18px;
}
.dialog-kicker{
  margin-bottom:6px;
  color:#5d7462;
  font-size:.7rem;
  font-weight:850;
  letter-spacing:.12em;
}
#locationDialog h2{
  margin:0 0 20px;
  font-size:1.35rem;
  line-height:1.2;
}
.location-field{
  display:grid;
  gap:7px;
}
.location-field span{
  color:#565d57;
  font-size:.78rem;
  font-weight:800;
}
#locationDialog input{
  width:100%;
  padding:13px 14px;
  border:1px solid #c9cbc6;
  border-radius:10px;
  background:#fbfaf6;
  color:#20251f;
  outline:none;
}
#locationDialog input:focus{
  border-color:#55785d;
  box-shadow:0 0 0 3px rgba(39,70,47,.12);
}
.dialog-help{
  margin:9px 0 0;
  color:#747a75;
  font-size:.78rem;
  line-height:1.45;
}
.dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:22px;
}
.dialog-actions button{
  min-width:112px;
}
.secondary-action{
  border:1px solid #c7cac4;
  background:#fff;
  color:#343934;
  border-radius:10px;
  padding:10px 12px;
  font-weight:800;
}

@media(max-width:680px){
  header{
    align-items:flex-start;
    gap:12px;
  }
  .header-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .header-actions #syncStatus{
    width:100%;
    max-width:none;
  }
}

@media(max-width:520px){
  .header-actions #syncStatus{display:none}
  .header-link,
  header .header-actions button{
    min-height:34px;
    padding:6px 9px;
    font-size:.82rem;
  }
  #locationDialog{
    width:calc(100vw - 24px);
    margin:auto;
  }
  #locationDialog form{
    padding:20px;
  }
  .dialog-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .dialog-actions button{
    width:100%;
    min-width:0;
  }
}