/* ---- Shop and character ---- */
.shop { max-width: var(--page-max); margin: 0 auto; padding: 28px var(--gutter) 56px; display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 28px; align-items: start; }
.shop-guest { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; background: var(--level-soft); color: var(--level-ink); padding: 10px 16px; border-radius: 14px; font-weight: 500; }
.shop-guest a { color: inherit; font-weight: 600; }
.shop-stage { position: sticky; top: 16px; background: var(--stage); color: #fff; border-radius: 28px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 620px; overflow: hidden; }
.shop-stage__art { flex: 1; min-height: 300px; display: flex; }
.shop-stage__art bz-character { width: 100%; height: 100%; min-height: 300px; }
.shop-stage__top { position: absolute; left: 20px; right: 20px; top: 18px; display: flex; align-items: center; gap: 12px; z-index: 2; pointer-events: none; }
.shop-stage__top h1 { font-family: var(--font-head); font-weight: 800; font-size: 30px; flex: 1; line-height: 1; }
.shop-stage__top a { pointer-events: auto; }
.shop-back { display: none; background: rgba(255,255,255,.14); border-color: transparent; color: #fff; }
.shop-coins { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; background: rgba(255,255,255,.14); padding: 6px 12px; border-radius: 999px; }
.shop-coins .bz-icon { color: #FFC93C; }
.shop-gemnote { display: flex; align-items: center; gap: 8px; }
.shop-gemnote .bz-icon { color: #19A3C7; flex: none; }
.shop-gems { margin-left: 8px; }
.shop-gems .bz-icon { color: #7FE3FF; }
.shop-stage__hint { text-align: center; color: #C3C7DD; font-size: 13px; }
.shop-stage__try { display: block; }
.shop-stage :focus-visible { outline-color: #FFC93C; }
.shop-stage__save { display: flex; gap: 10px; }
.shop-stage__save .bz-btn { flex: 1; }
.shop-undo { color: #fff; border-color: rgba(255,255,255,.3); }
.shop-undo[hidden] { display: none; }
.shop-try { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.1); }
.shop-try__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.shop-stage .bz-muted { color: #C3C7DD; }
.shop-swatch { width: 40px; height: 40px; border-radius: 12px; flex: none; border: 2px solid rgba(255,255,255,.3); }
.shop-try--sheet { display: none; background: var(--surface); }
.shop-handle { display: none; }

.shop-items { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* Category row: scrolls sideways (wheel, drag, swipe, arrow buttons); the selected tab is scrolled into view by shop.js */
.shop-tabs { display: flex; align-items: center; gap: 6px; min-width: 0; position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 4px 0; }
.shop-tabs .shop-tabs__row { flex: 1; min-width: 0; margin: 0; padding: 4px; scroll-behavior: auto; cursor: grab; }
.shop-tabs__arrow { flex: none; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.shop-tabs__arrow[hidden] { display: none; }
.shop-tabs__arrow:hover:not(:disabled) { border-color: var(--ink); }
.shop-tabs__arrow:disabled { opacity: .35; cursor: default; }
.shop-tabs__arrow:focus-visible, .shop-tabs__row .bz-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.shop-tabs__row .bz-chip { user-select: none; }
.shop-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop-head h2 { flex: 1; }
.shop-owned-first { display: none; }
.shop-filter { position: relative; }
.shop-filterpanel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; width: 260px; background: var(--surface); border-radius: 18px; padding: 16px; box-shadow: 0 12px 32px var(--shadow), 0 3px 0 var(--line); display: flex; flex-direction: column; gap: 12px; }
.shop-filterpanel fieldset { display: flex; flex-direction: column; gap: 8px; }
.shop-label { margin-bottom: 8px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.shop-item { border-radius: 18px; background: var(--surface); box-shadow: 0 2px 0 var(--line); border: 3px solid transparent; transition: transform .12s ease; }
.shop-item:hover { transform: translateY(-3px); }
.shop-item[data-picked="true"] { border-color: var(--accent); }
.shop-item__pick { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 0; background: transparent; text-align: left; border-radius: 14px; }
.shop-item__art { aspect-ratio: 1; border-radius: 12px; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.shop-item__art span { width: 56%; height: 56%; border-radius: 30%; border: 2px solid rgba(128,128,140,.55); }
.shop-item__name { font-weight: 600; font-size: 15px; }
.shop-item__state { font-size: 13px; font-weight: 600; color: var(--muted); }
.shop-item__state[data-state="Wearing"], .shop-item__state[data-state="Owned"] { color: var(--teal-ink); }
.shop-item__state[data-state="gems"] { color: #0E7490; background: #CFF4FC; align-self: flex-start; padding: 2px 8px; border-radius: 999px; }
:root[data-theme="dark"] .shop-item__state[data-state="gems"] { color: #A5F0FF; background: #0B3A47; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shop-item__state[data-state="gems"] { color: #A5F0FF; background: #0B3A47; } }
.shop-item__state[data-state="coins"] { color: var(--level-ink); background: var(--level-soft); align-self: flex-start; padding: 2px 8px; border-radius: 999px; }
.shop-item__state[data-state="premium"] { color: var(--accent-text); }
.shop-face { display: flex; flex-direction: column; gap: 20px; background: var(--surface); border-radius: 20px; padding: 22px; }
.shop-faces, .shop-eyes { display: flex; gap: 14px; flex-wrap: wrap; }
.shop-radio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 16px; border: 2px solid var(--line); cursor: pointer; font-weight: 600; }
.shop-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.shop-radio input { position: absolute; opacity: 0; }
.shop-radio:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.shop-eye { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--line); }
.shop-eye[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent); }

@media (max-width: 899px) {
  .shop { grid-template-columns: 1fr; }
  .shop-stage { position: relative; top: 0; min-height: 0; }
}

@media (max-width: 720px) {
  .shop { display: block; padding: 0; }
  .shop-guest { margin: 12px 16px 0; }
  .shop-stage { border-radius: 0; padding: 0; height: max(460px, 52vh); transition: height .25s ease; }
  .shop[data-tall="true"] .shop-stage { height: max(300px, 45vh); }
  .shop-stage__art { padding: 40px 0 34px; min-height: 0; }   /* top: the title row; bottom: the item sheet's rounded top overlaps the stage by 24px, so the feet stay above it */
  .shop-stage__art bz-character, .shop .shop-stage__art bz-avatar-3d { min-height: 0; }   /* (the 3D element's own 300px minimum would push its feet under the sheet) */
  .shop-back { display: inline-flex; }
  .shop-stage__top h1 { font-size: 22px; white-space: nowrap; }
  .shop-stage__top { left: 16px; right: 16px; top: 12px; }
  .shop-stage__hint { display: none; }
  .shop-stage__try { display: none; }
  .shop-stage__save { position: absolute; right: 12px; top: 64px; bottom: auto; z-index: 2; flex-direction: column; align-items: flex-end; }
  .shop-stage__save > span { display: none; }   /* the phone's zoom row sits at the bottom of the stage; Undo goes top-right, under the coins */
  .shop-stage__save .bz-btn { padding: 8px 12px; font-size: 14px; }
  .shop-items { background: var(--bg); border-radius: 24px 24px 0 0; margin-top: -24px; position: relative; padding: 6px 16px 110px; gap: 14px; min-height: 440px; }
  .shop[data-tall="true"] .shop-items { min-height: 700px; }
  .shop-handle { display: flex; align-self: center; width: 80px; height: 32px; border: 0; background: transparent; align-items: center; justify-content: center; }
  .shop-handle span { width: 44px; height: 5px; border-radius: 999px; background: var(--line); }
  .shop-try--sheet { display: flex; background: transparent; padding: 0; }
  .shop-try--sheet .shop-try { flex: 1; background: var(--surface); }
  .shop-head h2 { display: none; }
  .shop-owned-first { display: inline; flex: 1; }
  .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .shop-item__pick { padding: 8px; }
  .shop-item__name { font-size: 13px; }
  .shop-item__state { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .shop-stage { transition: none; } .shop-item { transition: none; } }

/* Desktop: two panes. Left, the character stage fills the height under the header (about 45% of the width); right, the tabs and the
   item grid scroll on their own. */
@media (min-width: 900px) {
  .shop { max-width: none; padding: 16px var(--gutter); grid-template-columns: 45% minmax(0, 1fr); height: calc(100vh - var(--shop-top, 72px)); height: calc(100dvh - var(--shop-top, 72px)); min-height: 520px; align-items: stretch; overflow: hidden; }
  .shop-guest { grid-column: 1 / -1; }
  .shop:has(.shop-guest) { grid-template-rows: auto minmax(0, 1fr); }   /* the guest note keeps its own height; the panes share the rest */
  .shop-stage { position: relative; top: 0; min-height: 0; height: 100%; }
  .shop-stage__art { min-height: 0; padding-top: 44px; }
  .shop .shop-stage__art bz-avatar-3d { min-height: 0; }
  .shop-stage__top { top: 22px; }
  .shop-back { display: inline-flex; }
  .shop-items { overflow-y: auto; padding-right: 6px; padding-bottom: 24px; overscroll-behavior: contain; }
}

/* The two top categories of the character page (Base, Cosmetics). */
.shop-cats { margin: 0 0 4px; }
.shop-cats .bz-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }