/* Housekeeper Assist portal — Shopping screen (revamp/screenshots). Uses the hk- kit in src/index.css. */
.shop-tabcount { margin-left: 6px; font-size: 10.5px; font-weight: 700; background: var(--hk-mint); color: var(--hk-teal); border-radius: 9px; padding: 1px 6px; }

/* the list */
.shop-list { list-style: none; margin: 0; padding: 0; }
.shop-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #edf0e9; }
.shop-row:last-child { border-bottom: 0; }
.shop-row:hover { background: #fafcf9; }
.shop-check { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 1.5px solid #c4d4ca; background: #fff; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.shop-check:hover { border-color: var(--hk-teal); }
.shop-check--on { background: var(--hk-teal); border-color: var(--hk-teal); }
.shop-check:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(18,92,88,.15); }

.shop-thumb { width: 48px; height: 48px; flex: none; border-radius: 8px; overflow: hidden; border: 1px solid var(--hk-line); background: #f2f6f1; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #97a397; cursor: zoom-in; font-size: 12px; }
.shop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-thumb:disabled { cursor: default; }
.shop-thumb--empty { border-style: dashed; background: #fff; cursor: pointer; }
.shop-thumb--empty:hover:not(:disabled) { border-color: var(--hk-teal); color: var(--hk-teal); }

.shop-main { flex: 1; min-width: 0; }
.shop-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.shop-name-text { font-size: 14.5px; font-weight: 650; color: var(--hk-ink); overflow-wrap: anywhere; }
.shop-qty { font-size: 12.5px; color: var(--hk-muted); }
.shop-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: var(--hk-muted); }
.shop-meta .hk-textbtn { font-size: 12px; }

.shop-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.shop-actions .hk-textbtn:disabled { opacity: .5; cursor: default; text-decoration: none; }
.shop-confirm { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--hk-ink); }

.shop-row--done .shop-name-text { text-decoration: line-through; color: #99a39d; font-weight: 500; }
.shop-row--done .shop-qty { color: #b0b8b2; }
.shop-row--done .shop-thumb { opacity: .65; }

/* "Add item" */
.shop-add { margin: 0 0 20px; padding: 18px 20px; }
.shop-add-fields { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.shop-field { display: flex; flex-direction: column; min-width: 0; }
.shop-field--name { flex: 2 1 240px; }
.shop-field--qty { flex: 1 1 140px; }
.shop-field input { height: 40px; padding: 0 12px; background: #fff; border: 1px solid #dfe6d9; border-radius: 7px; font: inherit; font-size: 13.5px; color: var(--hk-ink); outline: none; }
.shop-field input:focus { border-color: var(--hk-teal); box-shadow: 0 0 0 3px rgba(18,92,88,.1); }
.shop-add-photo { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.shop-add-photo img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; border: 1px solid var(--hk-line); }
.shop-add .auth-error { margin-top: 12px; }
.shop-add-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.hk-card--flush + .hk-notice { margin-top: 22px; }
.hk-notice svg { flex: none; margin-top: 1px; }

@media (max-width: 768px) {
  .shop-row { flex-wrap: wrap; padding: 14px 16px; gap: 12px; }
  .shop-main { flex-basis: calc(100% - 100px); }
  .shop-actions { width: 100%; justify-content: flex-start; padding-left: 34px; }
}