/* Pagina da loja (os efeitos em si ficam no tema.css, para valerem em qualquer pagina). */
.loja { padding: 1.5rem 0 3rem; }
.loja__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; }
.loja__topo h1 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--font-heading, inherit); font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }
.loja__topo h1 svg { width: 1.4rem; height: 1.4rem; color: var(--sakura); }
.loja__saldo { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.4rem 0.9rem; border: 1px solid rgba(246, 211, 101, 0.4); border-radius: 9999px; background: rgba(246, 211, 101, 0.07); color: #f6d365; }
.loja__saldo b { font-family: var(--font-heading, inherit); letter-spacing: 0.08em; }
.loja__saldo a { font-size: 0.72rem; color: var(--text-muted); text-decoration: underline; }
.loja__intro { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--text-muted); }
.loja__aviso { margin: 1rem 0 0; padding: 0.6rem 0.9rem; border-radius: 0.5rem; font-size: 0.88rem; }
.loja__aviso--ok { border: 1px solid rgba(120, 220, 150, 0.4); background: rgba(120, 220, 150, 0.08); color: #a5f3c0; }
.loja__aviso--erro { border: 1px solid rgba(255, 143, 163, 0.4); background: rgba(255, 143, 163, 0.08); color: #ff8fa3; }
.loja__cat { margin-top: 2rem; }
.loja__cat h2 { margin: 0; font-family: var(--font-heading, inherit); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); }
.loja__dica { margin: 0.2rem 0 0.8rem; font-size: 0.8rem; color: var(--text-muted); }
.loja__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.8rem; }
.loja__item { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.7rem; background: rgba(12, 8, 18, 0.78); }
.loja__item.is-usando { border-color: var(--sakura); box-shadow: 0 0 16px rgb(var(--sakura-rgb, 255 42 109) / 0.25); }
.loja__item h3 { margin: 0; font-family: var(--font-heading, inherit); font-size: 0.95rem; letter-spacing: 0.05em; color: var(--text); }
.loja__item form { display: contents; }
.loja__previa { display: grid; place-items: center; min-height: 5.5rem; padding: 0.5rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.03); overflow: hidden; }
.loja__previa .cm__item { width: 100%; }
.loja__previa--nome .cm-nome { font-size: 1.15rem; }
.loja__avatar { width: 3.2rem; height: 3.2rem; }
.loja__fundo { display: grid; place-items: center; width: 100%; min-height: 4.5rem; border-radius: 0.5rem; }
.loja__fundo-nome { font-family: var(--font-heading, inherit); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.loja__preco { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.85rem; font-weight: 700; color: #f6d365; }
.loja__preco--usando { color: var(--sakura); }
.loja__preco .moeda { width: 1.1rem; height: 1.1rem; }
.loja__botao { display: block; width: 100%; padding: 0.5rem 0.8rem; border: 0; border-radius: 9999px; background: linear-gradient(135deg, var(--sakura), #ff6b9d); color: #fff; font-family: var(--font-heading, inherit); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; cursor: pointer; }
.loja__botao--claro { border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: var(--text); }
.loja__saldo .moeda { width: 1.2rem; height: 1.2rem; }

.loja__excl { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.45rem; border: 1px solid rgba(246, 211, 101, 0.6); border-radius: 9999px; font-family: var(--font-body, inherit); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #f6d365; vertical-align: middle; }
.loja__preco--excl { color: var(--text-muted); font-weight: 600; }

.mural { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.mural__item { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; border: 1px solid rgba(246, 211, 101, 0.4); border-radius: 0.7rem; background: rgba(12, 8, 18, 0.78); }
.mural__avatar { width: 3rem; height: 3rem; flex: none; }
.mural__texto { display: flex; flex-direction: column; min-width: 0; }
.mural__texto strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mural__texto small { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #f6d365; }