/* Módulo Shopping — loja de recursos (usa tokens do DS: tokens.css / ds.css) */
.sh { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ds-sunken); }
.sh-head { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; background: var(--ds-bg); border-bottom: 1px solid var(--ds-line); }
.sh-head .ui-tab .ui-count { margin-left: 2px; }
.sh-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-search { flex: 1; min-width: 180px; }
.sh-balance { display: inline-flex; align-items: center; gap: 6px; height: var(--ds-control-md); padding: 0 12px; border-radius: var(--ds-radius-pill); background: var(--ds-accent-soft); color: var(--ds-accent-text); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); white-space: nowrap; }
.sh-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.sh-note { margin-bottom: 14px; padding: 10px 12px; border-radius: var(--ds-radius-lg); background: var(--ds-info-soft, var(--ds-hover)); color: var(--ds-text-muted); font-size: var(--ds-text-sm); }

.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.sh-card { gap: 8px; }
.sh-card__top { display: flex; align-items: flex-start; gap: 10px; }
.sh-card__name { font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); line-height: 1.3; }
.sh-card__type { font-size: var(--ds-text-xs); color: var(--ds-text-muted); }
.sh-card__desc { font-size: var(--ds-text-sm); color: var(--ds-text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-card__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.sh-price { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); white-space: nowrap; }
.sh-price.is-free { color: var(--ds-success-text, #15803d); }
.sh-meta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ds-text-xs); color: var(--ds-text-muted); white-space: nowrap; }
.sh-meta svg { color: #f59e0b; fill: #f59e0b; }

.sh-tile { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.sh-tile--lg { width: 56px; height: 56px; border-radius: 16px; }

.sh-section + .sh-section { margin-top: 24px; }
.sh-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sh-section__head h2 { font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); }
.sh-link { display: inline-flex; align-items: center; gap: 2px; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); color: var(--ds-accent-text); }
.sh-link:hover { text-decoration: underline; }

.sh-hero {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding: 20px; border-radius: var(--ds-radius-xl); overflow: hidden;
  background: linear-gradient(120deg, #2e1065, #7c3aed 60%, #c026d3); color: #fff;
}
.sh-hero h2 { margin: 6px 0 4px; font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); letter-spacing: -.01em; }
.sh-hero p { margin-bottom: 14px; max-width: 420px; font-size: var(--ds-text-sm); opacity: .85; }
.sh-hero__kicker { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--ds-radius-pill); background: rgb(255 255 255 / .16); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); }
.sh-hero .ui-btn--primary { background: #fff; border-color: #fff; color: #2e1065; }
.sh-hero__art { margin-left: auto; display: grid; place-items: center; width: 96px; height: 96px; flex-shrink: 0; border-radius: 28px; background: rgb(255 255 255 / .12); }
@media (max-width: 560px) { .sh-hero__art { display: none; } }

.sh-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sh-token {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 16px; overflow: hidden;
  border-radius: var(--ds-radius-xl); background: var(--ds-surface); border: 1px solid var(--ds-line);
}
.sh-token.is-featured { border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 12%, transparent); }
.sh-token__ribbon { position: absolute; top: 12px; right: 12px; padding: 1px 8px; border-radius: var(--ds-radius-pill); background: var(--c); color: #fff; font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-semibold); }
.sh-token__name { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); color: var(--c); }
.sh-token__amount { font-size: 26px; font-weight: var(--ds-weight-semibold); letter-spacing: -.02em; }
.sh-token__amount small { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); color: var(--ds-text-muted); }
.sh-token__price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.sh-token__price s { font-size: var(--ds-text-xs); color: var(--ds-text-subtle); }
.sh-token__price b { font-size: var(--ds-text-lg); }
.sh-token__unit { font-size: var(--ds-text-xs); color: var(--ds-text-muted); margin-bottom: 8px; }
.sh-token .ui-btn { margin-top: auto; width: 100%; justify-content: center; }

.sh-drawer { display: flex; flex-direction: column; }
.sh-drawer__head { display: flex; padding: 10px 12px 0; }
.sh-drawer__body { flex: 1; overflow-y: auto; padding: 4px 20px 20px; }
.sh-drawer__body h4 { margin: 18px 0 8px; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--ds-text-muted); }
.sh-drawer__desc { margin-top: 14px; font-size: var(--ds-text-md); line-height: var(--ds-leading); }
.sh-drawer__foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--ds-line); }
.sh-drawer .sh-note { margin: 16px 0 0; }
.sh-feats li { display: flex; gap: 8px; padding: 5px 0; font-size: var(--ds-text-sm); }
.sh-feats svg { flex-shrink: 0; margin-top: 2px; color: var(--ds-success-text, #15803d); }
.sh-steps { counter-reset: st; }
.sh-steps li { counter-increment: st; position: relative; padding: 6px 0 6px 34px; font-size: var(--ds-text-sm); }
.sh-steps li::before { content: counter(st); position: absolute; left: 0; top: 4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ds-accent-soft); color: var(--ds-accent-text); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); }

.sh-checkout { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 12px 14px; border-radius: var(--ds-radius-lg); background: var(--ds-hover); font-size: var(--ds-text-md); }