.shopping-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin:2.5rem 0 1.5rem; }
.shopping-heading h1 { margin:.15rem 0 .5rem; font-size:clamp(2.25rem,6vw,4.5rem); line-height:.95; }
.shopping-panel { background:#fff; border:1px solid #dedbd2; border-radius:28px; box-shadow:0 20px 50px rgba(45,42,34,.08); overflow:hidden; margin-bottom:3rem; }
.shopping-add { display:grid; grid-template-columns:minmax(220px,1fr) minmax(150px,.5fr) minmax(150px,.5fr) auto; gap:1rem; padding:1.25rem; border-bottom:1px solid #e5e1d8; }
.shopping-add label { display:grid; gap:.35rem; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#696458; }
.shopping-add input { width:100%; min-height:46px; border:1px solid #d6d1c5; border-radius:13px; background:#fff; padding:.65rem .85rem; font:inherit; font-size:1rem; text-transform:none; letter-spacing:0; color:#25231e; }
.shopping-add button { align-self:end; min-height:46px; padding:.7rem 1.15rem; border:0; border-radius:13px; background:#245c4d; color:#fff; font-weight:800; cursor:pointer; }
.shopping-add button:disabled { opacity:.55; cursor:wait; }
.shopping-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) repeat(2,minmax(150px,220px)) auto; gap:1rem; padding:1.25rem; background:#f8f6f0; border-bottom:1px solid #e5e1d8; }
.shopping-search,.shopping-filter { display:grid; gap:.35rem; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#696458; }
.shopping-search input,.shopping-filter select { width:100%; min-height:46px; border:1px solid #d6d1c5; border-radius:13px; background:#fff; padding:.65rem .85rem; font:inherit; font-size:1rem; text-transform:none; letter-spacing:0; color:#25231e; }
.shopping-refresh { align-self:end; min-height:46px; padding:.7rem 1.15rem; border:0; border-radius:13px; background:#245c4d; color:#fff; font-weight:800; cursor:pointer; }
.shopping-refresh:disabled { opacity:.55; cursor:wait; }
.shopping-summary { display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; color:#625e54; border-bottom:1px solid #eeeae2; }
.shopping-items { list-style:none; padding:0; margin:0; }
.shopping-item { display:grid; grid-template-columns:38px 1fr; align-items:center; gap:.85rem; padding:1rem 1.25rem; border-bottom:1px solid #eeeae2; }
.shopping-item:last-child { border-bottom:0; }
.shopping-marker { appearance:none; display:grid; place-items:center; width:30px; height:30px; margin:0; border:2px solid #b9b4a7; border-radius:50%; background:#fff; cursor:pointer; }
.shopping-marker:checked { background:#2e7764; border-color:#2e7764; }
.shopping-marker:checked::after { content:'✓'; color:#fff; font-weight:900; }
.shopping-marker:focus-visible { outline:3px solid rgba(36,92,77,.28); outline-offset:3px; }
.shopping-item.completed .shopping-name { color:#777166; text-decoration:line-through; }
.shopping-name { display:block; font-size:1.08rem; color:#24221d; }
.shopping-detail { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.3rem; }
.shopping-detail span { padding:.2rem .55rem; border-radius:999px; background:#f1eee7; color:#696357; font-size:.8rem; }
.shopping-status { min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; padding:2rem; text-align:center; color:#625e54; }
.shopping-status[hidden] { display:none; }
.shopping-status small { max-width:540px; }
.shopping-spinner { width:30px; height:30px; border:3px solid #d9d4c9; border-top-color:#2e7764; border-radius:50%; animation:shopping-spin .8s linear infinite; }
.shopping-error { color:#8c342c; background:#fff7f5; }
@keyframes shopping-spin { to { transform:rotate(360deg); } }
@media (max-width:700px) {
  .shopping-heading { align-items:flex-start; flex-direction:column; gap:1rem; }
  .shopping-toolbar { grid-template-columns:1fr; }
  .shopping-add { grid-template-columns:1fr; }
  .shopping-add button { width:100%; }
  .shopping-refresh { width:100%; }
  .shopping-summary { align-items:flex-start; flex-direction:column; }
  .shopping-item { padding:.9rem 1rem; }
}