/* Shopping */
.shop {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 440px;
  grid-template-rows: auto 1fr;
  gap: 16px 24px;
  padding: 20px 28px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.s-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; }
.s-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.s-count { margin-right: auto; font-size: 16px; color: var(--mute); padding-top: 6px; }
.s-count .num { font-size: 20px; font-weight: 700; color: var(--ink); }

.s-list { min-height: 0; overflow-y: auto; padding-bottom: 110px; }
.s-cat { margin-bottom: 14px; }
.s-cat-h { display: flex; justify-content: space-between; padding: 6px 4px 8px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.s-row {
  display: flex; align-items: center;
  min-height: 76px; border-bottom: 1px solid var(--line);
  max-height: 120px; overflow: hidden;
}
.s-row.is-flash { background: rgb(var(--warm-rgb) / .45); }
.s-hit { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 14px; padding: 0 10px 0 4px; }
.s-box {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: transparent;
  box-shadow: inset 0 0 0 3px var(--line);
}
.s-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.s-name b { font-size: 23px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.s-name small { font-size: 16px; color: var(--mute); }
.s-store { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; background: var(--ink); color: var(--paper); }
.s-qty { display: flex; align-items: center; background: var(--paper-2); border-radius: 999px; margin-left: 4px; }
.s-qty button { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; }
.s-qty button:active { background: var(--line); }
.s-qty .num { min-width: 26px; text-align: center; font-size: 26px; }
.s-row.is-checking .s-box { background: var(--ink); color: var(--paper); box-shadow: none; transform: scale(1.12); }
.s-row.is-checking .s-name b { color: var(--mute); text-decoration: line-through; text-decoration-thickness: 3px; }
.s-row.is-checking .s-qty { opacity: .3; }
.s-empty { font-size: 48px; line-height: 1.05; color: var(--mute); padding: 80px 0; text-align: center; }

.s-drawer { margin-top: 18px; border-radius: var(--r); background: var(--paper-2); overflow: hidden; }
.s-drawer-h { width: 100%; min-height: 68px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; font-size: 21px; font-weight: 700; }
.s-drawer-h > span:first-child { display: flex; align-items: center; gap: 10px; }
.s-drawer-h .num { font-size: 24px; }
.s-drawer-list { padding: 0 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.s-got { min-height: 60px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; font-size: 20px; color: var(--mute); text-decoration: line-through; border-radius: 12px; }
.s-got .label { text-decoration: none; }
.s-got:active { background: var(--line); }
.s-clear { margin-top: 8px; align-self: flex-start; }

/* right column */
.s-side { min-height: 0; display: flex; flex-direction: column; gap: 18px; }
.s-add { background: var(--ink); color: #fff; border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.s-input-wrap { display: flex; align-items: center; gap: 12px; height: 80px; padding: 0 20px; border-radius: 14px; background: #fff; color: var(--ink); }
.s-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 28px; font-weight: 600; }
.s-input::placeholder { color: #AAA59B; font-weight: 500; }

.s-suggest { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.s-usuals { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 8px; flex: 1; min-height: 0; }
.s-tile {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px 14px; border-radius: 14px; background: var(--card);
  text-align: left;
  min-height: 64px;
}
.s-tile:active { transform: scale(.94); }
.s-tile b { font-size: 19px; font-weight: 800; font-stretch: 75%; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.s-tile span { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.s-tile.is-on { background: var(--ink); color: var(--paper); }
.s-tile.is-on span { color: inherit; opacity: .85; }
.s-ac { display: flex; flex-direction: column; gap: 8px; }
.s-ac-row { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 0 18px 0 22px; border-radius: 14px; background: var(--card); }
.s-ac-row b { flex: 1; font-size: 22px; }
.s-ac-row--new { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }