/* Point shop (shopapp). Builds on genapp/gen.css and paymentapp/payment.css; colours are role tokens only. */
.shop-intro { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; justify-content: space-between; }
.shop-intro h2 { margin: 0 0 .35rem; }
.shop-intro-side { display: flex; flex-direction: column; gap: .6rem; min-width: 13rem; }
.shop-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.shop-warn {
    margin: .6rem 0 0; padding: .6rem .85rem; border-radius: .8rem; font-size: .88rem;
    background: var(--pt-accent-soft); color: var(--gen-text); border: 1px solid var(--pt-border);
}

.shop-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.25rem 0 1rem; }
.shop-tabs a {
    padding: .45rem .95rem; border-radius: var(--pt-radius-pill); border: 1px solid var(--gen-border);
    color: var(--gen-text); text-decoration: none; font-size: .92rem; background: var(--gen-surface);
}
.shop-tabs a:hover { background: var(--gen-surface-2); }
.shop-tabs a[aria-current="page"] { background: var(--gen-selected); border-color: var(--gen-selected); color: var(--gen-accent-ink); font-weight: 600; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.shop-grid.is-cover { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.shop-item {
    display: flex; flex-direction: column; gap: .35rem; padding: .9rem;
    background: var(--gen-surface); border: 1px solid var(--gen-border); border-radius: var(--gen-radius);
    box-shadow: var(--gen-shadow); min-width: 0;
}
.shop-item h3 { margin: .2rem 0 0; font-size: .98rem; font-weight: 600; color: var(--gen-text); overflow-wrap: anywhere; }
.shop-item .gen-note { margin: 0; overflow-wrap: anywhere; }
.shop-preview {
    position: relative; aspect-ratio: 4 / 1; border-radius: calc(var(--gen-radius) - .25rem); overflow: hidden;
    background: var(--gen-surface-2);
}
.shop-preview > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-preview.is-frame { aspect-ratio: 1 / 1; display: grid; place-items: center; }
.shop-preview.is-frame > img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.shop-preview.is-frame > .shop-frame-avatar { inset: 20%; width: 60%; height: 60%; border-radius: 50%; object-fit: cover; }
.shop-buy { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
.shop-buy .pay-amount { font-size: 1.1rem; }
.shop-item form { margin: 0; }

.shop-rules { margin: .5rem 0 1rem; padding-left: 1.1rem; line-height: 1.6; }
.shop-form { display: flex; flex-direction: column; gap: .85rem; max-width: 34rem; }
.shop-field { display: flex; flex-direction: column; gap: .3rem; }
.shop-field.is-check { flex-direction: row; align-items: flex-start; gap: .5rem; }
.shop-field input[type="text"], .shop-field input[type="number"], .shop-field textarea, .shop-field select {
    width: 100%; padding: .55rem .7rem; border-radius: .7rem; border: 1px solid var(--gen-border);
    background: var(--gen-surface); color: var(--gen-text);
}

/* Profile page (accountapp/detail.html): a worn avatar frame over the picture. */
.pf-avatar-box { position: relative; }
.pf-avatar-frame {
    position: absolute; left: 50%; top: 50%; width: 132%; height: 132%; transform: translate(-50%, -50%);
    pointer-events: none; object-fit: contain;
}