/* Shopping is a sheet on desktop, compact editable rows on phones. */
.shopping-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:8px 0 24px; }
.shopping-heading h2 { margin:6px 0 8px; font-size:30px; letter-spacing:-1px; }
.shopping-eyebrow { color:#4f46e5; font-size:10px; letter-spacing:1.5px; font-weight:800; }
.shopping-intro,.shopping-hint { color:var(--text-muted); font-size:13px; line-height:1.6; }
.shopping-symbol { display:grid; place-items:center; background:var(--primary-light); width:64px; height:64px; border-radius:20px; font-size:28px; flex-shrink:0; }
.shopping-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.shopping-summary > div { display:flex; align-items:baseline; gap:10px; background:white; border:1px solid var(--border); border-radius:14px; padding:18px; }
.shopping-summary strong { font-size:28px; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.shopping-summary > div:first-child strong { color:#4f46e5; }
.shopping-summary > div:nth-child(2) strong { color:var(--success); }
.shopping-summary span { color:var(--text-muted); font-size:12px; }
.shopping-add-card h3 { margin:0 0 16px; font-size:15px; }
.shopping-add-form { display:grid; grid-template-columns:1.7fr 1.2fr .7fr .8fr 1.25fr auto; gap:10px; align-items:end; }
.shopping-add-form > div { min-width:0; }
.shopping-add-form label { display:block; font-size:12px; font-weight:600; margin-bottom:7px; }
.shopping-add-form label span { font-weight:400; color:var(--text-muted); }
.shopping-add-form input,.shopping-add-form select { padding:12px 10px; }
.shopping-hint { margin-top:12px; font-size:11px; }
.shopping-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.shopping-toolbar > div:first-child { flex:1; min-width:200px; }
.shopping-toolbar input,.shopping-toolbar select { background:white; }
.shopping-edit-hint { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:var(--text-muted); font-size:12px; margin-bottom:14px; }
#shopping-sync { font-weight:600; }
#shopping-error { color:#be123c; font-size:13px; margin:10px 0; }
.shopping-category { margin-bottom:20px; }
.shopping-category-heading { display:flex; align-items:center; gap:12px; padding:8px 2px; }
.shopping-category-heading h3 { font-size:14px; }
.shopping-category-count { font-size:11px; color:var(--text-muted); }
.shopping-table-wrap { border:1px solid var(--border); border-radius:14px; overflow:auto; background:white; }
.shopping-table { table-layout:fixed; min-width:0; }
.shopping-table th { padding:12px 8px; font-size:10px; letter-spacing:.4px; }
.shopping-table th:nth-child(1) { width:48px; font-size:0; }
.shopping-table th:nth-child(2) { width:23%; }
.shopping-table th:nth-child(3) { width:17%; }
.shopping-table th:nth-child(4) { width:95px; }
.shopping-table th:nth-child(5) { width:90px; }
.shopping-table th:nth-child(7) { width:70px; }
.shopping-table td { padding:6px 4px; }
.shopping-table input:not([type=checkbox]),.shopping-table select { padding:11px 8px; border:1px solid transparent; border-radius:7px; background:transparent; font-size:14px; min-width:0; }
.shopping-table input:hover,.shopping-table select:hover { background:var(--surface-alt); border-color:var(--border); }
.shopping-table input:focus,.shopping-table select:focus { background:white; border-color:var(--primary); }
.shopping-table .is-checked { background:#f3faf6; }
.shopping-table .is-checked .shopping-name-cell input { text-decoration:line-through; color:var(--text-muted); }
.shopping-check-cell { text-align:center; }
.shopping-check-cell input { width:22px; height:22px; accent-color:#059669; cursor:pointer; }
.shopping-delete { border:0; background:transparent; padding:12px 6px; color:#be123c; font:600 12px inherit; cursor:pointer; border-radius:6px; }
.shopping-delete:hover { background:var(--danger-light); }
.shopping-undo { position:sticky; bottom:20px; background:#1e293b; color:white; padding:12px 18px; border-radius:14px; box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:space-between; gap:10px; z-index:20; }
.shopping-undo[hidden] { display:none; }
.data-load-notice { padding:12px 20px; text-align:center; background:var(--primary-light); color:#3730a3; }
.data-load-notice[hidden] { display:none; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.bottom-nav-inner .bnav-btn { width:auto; flex:1; min-width:0; }
#toast { max-width:calc(100% - 24px); white-space:normal; text-align:center; }
@media (min-width:769px) and (max-width:1050px) {
  .top-nav { padding:0 10px; gap:3px; }
  .nav-btn { padding:8px; font-size:12px; }
  .nav-logo { margin-right:4px; font-size:15px; }
  #sync-badge { font-size:10px!important; padding:5px!important; }
  .shopping-add-form { grid-template-columns:2fr 1.5fr 1fr 1fr; }
}
@media (max-width:768px) {
  .shopping-heading h2 { font-size:26px; }
  .shopping-symbol { width:48px; height:48px; font-size:23px; }
  .shopping-summary { gap:8px; }
  .shopping-summary > div { flex-direction:column; gap:4px; padding:12px; }
  .shopping-summary strong { font-size:25px; }
  .shopping-summary span { font-size:11px; }
  .shopping-add-form { grid-template-columns:1fr 1fr; }
  .shopping-add-form > div:nth-child(1),.shopping-add-form > div:nth-child(2),.shopping-add-form > div:nth-child(5),.shopping-add-form > button { grid-column:1 / -1; }
  #page-compras input,#page-compras select { font-size:16px; }
  .shopping-toolbar > div:first-child { flex-basis:100%; }
  .shopping-toolbar > div:nth-child(2) { flex:1; }
  .shopping-toolbar > button { font-size:12px; padding:12px 10px; }
  .shopping-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .shopping-table tbody { display:block; }
  .shopping-table tr { display:grid; grid-template-columns:38px minmax(0,1fr) minmax(0,1fr) 62px; padding:8px; gap:2px; border-bottom:1px solid var(--border); }
  .shopping-table tr:last-child { border-bottom:0; }
  .shopping-table td { border:0; min-width:0; padding:2px; }
  .shopping-check-cell { grid-row:1 / 4; grid-column:1; padding-top:18px!important; }
  .shopping-name-cell { grid-column:2 / 4; grid-row:1; }
  .shopping-brand-cell { grid-column:2 / 4; grid-row:2; }
  .shopping-qty-cell { grid-column:2; grid-row:3; }
  .shopping-unit-cell { grid-column:3; grid-row:3; }
  .shopping-category-cell { grid-column:2 / 4; grid-row:4; }
  .shopping-actions-cell { grid-column:4; grid-row:1; }
  .shopping-table td[data-label]::before { content:attr(data-label); display:block; color:var(--text-muted); font-size:10px; margin-left:8px; }
  .shopping-table input:not([type=checkbox]),.shopping-table select { padding:8px; }
  .shopping-undo { bottom:calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom)); font-size:13px; }
}