/* shop screen (Shop board): category rail · sub-section chips · item grid · preview */

/* the four categories down the left (a little shorter than the prototype's 50 so the English hint fits above the
   bottom safe area) */
.shop-rail { position: absolute; left: 48px; top: 60px; width: 100px; display: flex; flex-direction: column; gap: 6px; }
.shop-cat {
  height: 46px; border-radius: 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 12px; font-weight: 800; line-height: 1.1;
}
.shop-cat.on { background: var(--honey); box-shadow: 0 3px 0 var(--ink); }
/* five categories (Festivals, from level 10) still fit above the earn note */
.shop-rail.five { gap: 5px; }
.shop-rail.five .shop-cat { height: 41px; }
.shop-earn { margin-top: 3px; padding: 6px 7px; border-radius: 12px; border: 2px dashed #C9BBA6; font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.2; }

/* sub-sections */
.shop-subs { position: absolute; left: 160px; top: 60px; width: 398px; height: 30px; display: flex; align-items: center; gap: 5px; }
.shop-sub {
  height: 30px; padding: 0 9px; border-radius: 15px; border: 2px solid var(--ink); background: var(--card); color: var(--ink);
  font-size: 12px; font-weight: 800; white-space: nowrap; flex: none;
}
.shop-sub.on { background: var(--honey); box-shadow: 0 2px 0 var(--ink); }

/* the items: two rows of three; a section with more scrolls, its third row peeking (owner, 11 Oct 2026: the window's views) */
.shop-grid {
  position: absolute; left: 160px; top: 98px; width: 398px; bottom: 21px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.shop-grid.scroll {
  grid-template-rows: none; grid-auto-rows: 118px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 26px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
}
.shop-grid.scroll::-webkit-scrollbar { display: none; }
.shop-grid.scroll .shop-card .pic { height: 62px; }
.shop-card { gap: 2px; min-width: 0; min-height: 0; }
.shop-card .pic { display: flex; align-items: center; justify-content: center; height: 72px; flex: none; border-radius: 8px; border: 1.5px solid var(--ink); overflow: hidden; }
.shop-card .nm { font-size: 13px; font-weight: 800; line-height: 1.35; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shop-card .price { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; line-height: 1.2; }
.shop-card .pill { align-self: flex-start; display: flex; align-items: center; gap: 3px; padding: 0 8px; border-radius: 9px; background: #FFFFFF; border: 1.5px solid var(--ink); font-size: 11px; font-weight: 800; line-height: 1.5; }
.shop-card .pill.on { background: var(--sage); }

/* the preview */
.shop-preview { position: absolute; left: 572px; right: 16px; top: 60px; bottom: 21px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.shop-preview > * { flex: none; }
.shop-big { flex: 0 1 128px !important; min-height: 92px; border-radius: 12px; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.shop-try { position: relative; flex: 0 1 156px !important; min-height: 116px; border-radius: 12px; border: 2px solid var(--ink); overflow: hidden; }
.shop-try .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: #EFE3CE; border-top: 2px solid var(--ink); }
.shop-try .stand { position: absolute; left: 0; right: 0; top: 10px; bottom: 2px; display: flex; justify-content: center; align-items: flex-end; }
.shop-try .stand > svg { height: min(140px, 100%); width: auto; }
.shop-try .cat { margin-bottom: 4px; }
.shop-try .trytag {
  position: absolute; left: 6px; top: 6px; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--ink);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; white-space: nowrap;
}
.shop-try .thumb {
  position: absolute; right: 6px; top: 6px; width: 44px; height: 33px; border-radius: 8px; background: var(--card); border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.shop-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; margin-top: 2px; } /* a long "where it goes" drops under the name */
.shop-head .nm { min-width: 0; font-size: 17px; font-weight: 800; line-height: 1.1; }
.shop-head .tag { flex: none; padding: 0 8px; border-radius: 9px; background: #FFFFFF; border: 1.5px solid var(--ink); font-size: 11px; font-weight: 800; white-space: nowrap; line-height: 1.5; }
.shop-desc { font-size: 12px; font-weight: 700; color: #4A423B; line-height: 1.25; }
.shop-buyer { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--muted); line-height: 1.2; }
.shop-buyer svg { flex: none; }
.shop-msg { margin-top: auto; min-height: 14px; font-size: 11px; font-weight: 800; color: #B55A3C; line-height: 1.2; }
.shop-act { width: 100%; padding: 0 12px; }
.shop-act:disabled { color: var(--muted); }