/* Shopping mode: full screen on phones, large one-handed targets. */
.start-shopping-button { min-height:44px; padding:8px 12px; border:0; border-radius:10px; color:var(--brand-dark); background:white; font-size:13px; font-weight:750; }
.start-shopping-button:hover { background:var(--brand-soft); }
/* Sized by its edges, not 100dvh: older iOS ignores dvh, the dialog then outgrew the screen
   and its top/bottom buttons sprang back out of reach. Header and footer stay put; only the middle scrolls. */
#shop-dialog { position:fixed; inset:0; width:auto; height:auto; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; background:var(--paper); }
#shop-dialog[open] { display:flex; flex-direction:column; }
.shop-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.shop-footer { flex:none; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:white; }
.shop-footer button { flex:1 1 0; min-height:52px; font-size:15px; }
.shop-footer .button-primary { flex-grow:2; }
html:has(dialog[open]) { overflow:hidden; }
#shop-dialog [hidden] { display:none!important; }
.shop-header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:calc(8px + env(safe-area-inset-top)) 12px 8px 16px; background:var(--brand); color:white; }
.shop-header h2 { margin:0; font-size:20px; overflow-wrap:anywhere; }
.shop-header .archive-close { min-height:44px; color:var(--brand-dark); }
#shop-body { padding:0 12px; }
.shop-hint { color:var(--muted); font-size:13px; line-height:1.5; }
.shop-stores { display:grid; gap:8px; margin:12px 0; }
#shop-dialog .shop-store { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--ink); font-size:16px; font-weight:700; text-align:left; }
.shop-store small { color:var(--muted); font-size:12px; font-weight:500; text-align:right; }
.shop-store:hover { border-color:#b9d4c6; background:var(--brand-soft); }
.shop-new-store, .shop-store-name { display:grid; gap:8px; margin:16px 0; color:var(--muted); font-size:13px; font-weight:700; }
.shop-new-store label { display:grid; gap:6px; }
#shop-dialog input:not([type=checkbox]) { min-height:44px; padding:8px 10px; border:1px solid #cbd7cf; border-radius:9px; background:white; color:var(--ink); }
.shop-new-store .button-primary { min-height:48px; }
#shop-dialog .shop-link { padding:8px 0; border:0; background:none; color:var(--brand-dark); font-weight:700; text-decoration:underline; }
.shop-progress { position:sticky; top:0; z-index:1; display:grid; gap:6px; margin:0 -12px; padding:10px 16px; background:var(--paper); font-size:14px; font-weight:700; }
.shop-progress progress { width:100%; height:8px; accent-color:var(--brand); }
.shop-swipe-hint { margin:4px 0 0; font-size:12px; }
.shop-area { margin-top:14px; }
.shop-area h3, .shop-bought summary { margin:0 0 6px; color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.shop-bought summary { min-height:44px; display:flex; align-items:center; cursor:pointer; }
.shop-row { position:relative; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:60px; margin-bottom:6px; padding:4px 4px 4px 10px; border:1px solid var(--line); border-radius:14px; background:white; touch-action:pan-y; user-select:none; transition:transform .18s ease; }
.shop-row.swiping { transition:none; }
.shop-row[data-direction="bought"] { background:var(--brand-soft); border-color:#9fcdb4; }
.shop-row[data-direction="missing"] { background:#fdf1e6; border-color:#efcda8; }
.shop-icon { font-size:26px; text-align:center; }
#shop-dialog .shop-name { display:grid; min-width:0; min-height:48px; padding:2px 0; border:0; background:none; color:var(--ink); text-align:left; overflow-wrap:break-word; hyphens:auto; cursor:pointer; }
.shop-name small span { color:var(--brand-dark); }
.shop-edit { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin:-2px 0 8px; padding:10px; border:1px solid #b9d4c6; border-radius:12px; background:var(--brand-soft); }
.shop-edit label { display:grid; gap:4px; color:var(--brand-dark); font-size:12px; font-weight:700; }
.shop-edit input { width:100%; font-size:16px; }
.shop-edit button { min-height:48px; }
.shop-edit-error { grid-column:1/-1; margin:0; color:var(--danger); font-size:13px; }
.shop-edit-error:empty { display:none; }
.shop-name strong { font-size:17px; line-height:1.2; }
.shop-name small { color:var(--muted); font-size:13px; }
.shop-row-actions { display:flex; gap:4px; }
.shop-row-actions button { min-width:48px; min-height:48px; padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--muted); font-size:13px; font-weight:650; }
.shop-row-actions .shop-buy { border:0; background:var(--brand); color:white; font-size:22px; }
.shop-row[data-state="bought"] .shop-name strong { color:#8b9690; text-decoration:line-through; }
.shop-missing .shop-row { background:#fffaf4; }
.shop-done { margin:28px 0; color:var(--brand-dark); font-weight:700; text-align:center; }
.shop-actions { display:grid; gap:8px; margin:20px 0; }
.shop-actions button { min-height:48px; }
.shop-actions .shop-abort { color:var(--danger); border-color:#e9caca; }
.shop-undo { position:absolute; left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 8px 8px 16px; border-radius:14px; background:#17221c; color:white; font-size:14px; box-shadow:0 12px 28px rgba(0,0,0,.24); }
.shop-undo span { min-width:0; overflow-wrap:anywhere; }
.shop-undo button { min-height:44px; padding:8px 12px; border:0; border-radius:10px; background:transparent; color:#bfe8d2; font-weight:750; }
.shop-summary { display:flex; gap:12px; margin:16px 0; }
.shop-summary p { flex:1; margin:0; padding:12px; border-radius:12px; background:white; border:1px solid var(--line); font-size:14px; }
.shop-summary strong { display:block; font-size:24px; }
.shop-move, .shop-move-all { display:grid; gap:6px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px; overflow-wrap:anywhere; }
.shop-move small { color:var(--muted); font-size:12px; }
.shop-move-all { color:var(--muted); font-size:13px; font-weight:700; }
#shop-dialog select { min-height:44px; padding:8px; border:1px solid #cbd7cf; border-radius:9px; background:white; color:var(--ink); }
.shop-check { display:flex; align-items:center; gap:10px; min-height:44px; margin-top:12px; font-size:15px; font-weight:650; }
.shop-check input { width:24px; height:24px; flex:none; accent-color:var(--brand); }
.shop-order { list-style:none; margin:12px 0; padding:0; counter-reset:area; }
.shop-order li { display:grid; grid-template-columns:minmax(0,1fr) 48px 48px; align-items:center; gap:6px; padding:6px 0 6px 10px; border-bottom:1px solid var(--line); counter-increment:area; font-size:15px; }
.shop-order li span::before { content:counter(area) ". "; color:var(--muted); }
.shop-order button { min-height:44px; border:1px solid var(--line); border-radius:9px; background:white; color:var(--brand-dark); font-size:18px; }
.shop-order button:disabled { opacity:.3; }
/* Product symbol in the normal list. */
#item-content .item-icon { display:grid; place-items:center; width:44px; min-width:44px; min-height:44px; padding:0; border:0; background:transparent; font-size:21px; cursor:pointer; }
#item-content .item-icon:hover { background:transparent; transform:scale(1.1); }
.icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:6px; }
#icon-dialog .icon-grid button { min-height:48px; border:1px solid var(--line); border-radius:10px; background:white; font-size:24px; }
#icon-dialog .icon-grid button:hover { background:var(--brand-soft); }
.icon-auto { width:100%; margin-top:14px; }
@media (min-width:761px) {
  #shop-dialog { inset:24px 0; width:min(720px, calc(100% - 48px)); margin:0 auto; border-radius:20px; }
  #shop-body { padding:0 20px; }
  .shop-progress { margin:0 -20px; padding:10px 24px; }
  .shop-actions { grid-template-columns:repeat(2,auto); justify-content:start; }
}
@media (prefers-reduced-motion: reduce) { .shop-row { transition:none; } }
/* Small phones: the "Gab es nicht" label wraps so product names keep their room. */
@media (max-width:379px) {
  .shop-row-actions .shop-missing-button { max-width:64px; padding:4px 6px; font-size:12px; line-height:1.15; }
}
.item.done .item-icon { opacity:.5; }
/* Store detection and shopping together. */
#shop-dialog .shop-suggested { margin-top:12px; border:2px solid var(--brand); background:var(--brand-soft); }
.shop-suggested small { color:var(--brand-dark); }
.shop-locating { font-style:italic; }
/* Floats over the list: appearing or vanishing must never shift a row under the finger. */
.shop-notice { position:absolute; left:12px; right:12px; top:calc(66px + env(safe-area-inset-top)); z-index:4; margin:0; padding:10px 14px; border:1px solid #f1d89c; border-radius:12px; background:var(--accent-soft); color:#5f4712; font-size:14px; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.12); cursor:pointer; }
.shop-notice-error { border-color:#e9caca; background:#fdf3f3; color:var(--danger); }
.shop-row.pending { opacity:.55; }
.shop-together { color:var(--brand-dark); font-size:13px; font-weight:650; }
.shop-together-hint { margin:14px 0 0; padding:10px 12px; border-radius:12px; background:var(--accent-soft); color:#5f4712; font-size:14px; }
.shop-by { color:var(--brand-dark); font-size:12px; font-style:normal; font-weight:650; }
.shop-row.shop-new { border-color:#e4c16d; background:#fffaf0; }
.shop-ask { display:grid; gap:8px; margin:10px 0 0; padding:12px; border:1px solid #b9d4c6; border-radius:12px; background:var(--brand-soft); font-size:14px; }
.shop-ask p { margin:0; line-height:1.45; }
.shop-ask div, .shop-location div { display:flex; flex-wrap:wrap; gap:8px; }
.shop-ask button, .shop-location button { flex:1 1 120px; min-height:44px; }
.shop-location { margin:16px 0; padding:12px 0; border-block:1px solid var(--line); }
.shop-location p { margin:0 0 6px; font-size:14px; }
.main-header .start-shopping-button { align-self:center; justify-self:end; }
/* Below 360px the product name needs the room more than the symbol. */
@media (max-width:359px) {
  .item { grid-template-columns:44px minmax(0,1fr) auto; }
  #item-content .item-icon { display:none; }
  .item-name, .item-amount { grid-column:2; }
  .item-actions { grid-column:3; }
}