/* The store, in the site's dark and gold. */
.store-hero { min-height: auto; padding: 50px 16px 70px; }
.store-logo { width: min(300px, 70vw); margin: 14px 0 0; image-rendering: auto; filter: drop-shadow(0 14px 24px rgba(0,0,0,.55)); animation: float 5s ease-in-out infinite; }
.store-hero .big-word { font-size: clamp(42px, 8vw, 104px); }
.store-hero .big-word.gold { color: var(--gold); text-shadow: 0 6px 0 #6b4a10, 0 0 40px rgba(245,205,79,.4); animation-delay: .15s; }
.namebar { display: flex; align-items: center; gap: 12px; width: min(560px, 100%); padding: 8px 8px 8px 12px; border-radius: 999px; border: 1px solid rgba(245,205,79,.35); background: rgba(10,8,6,.85); box-shadow: 0 20px 50px rgba(0,0,0,.45); animation: up .8s .45s both; }
.namebar img { width: 40px; height: 40px; border-radius: 50%; background: #2a251d; flex: none; }
.namebar input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--cream); font: 600 19px var(--sans); }
.namebar input::placeholder { color: var(--muted); }
.namebar .cta { border-radius: 999px; }
.who-chip { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid rgba(245,205,79,.35); border-radius: 12px; }
.who-chip img { width: 34px; height: 34px; border-radius: 8px; background: #2a251d; }
.who-chip small { display: block; font: 700 10px var(--px); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.who-chip b { color: var(--gold); font: 700 15px var(--px); }
.shop { padding-top: 20px; }
.tabs { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 20px; margin-bottom: 26px; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.tabs .btn { padding: 14px 24px; }
.tabs .btn.on { background: linear-gradient(180deg, #ffe07a, var(--gold) 50%, var(--gold2)); color: #2a1c06; border-color: transparent; }
.shelf { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ware { display: flex; flex-direction: column; gap: 10px; padding: 22px; transition: border-color .3s, box-shadow .3s; }
.ware.in:hover { transform: translateY(-6px); border-color: rgba(245,205,79,.4); box-shadow: 0 20px 44px rgba(0,0,0,.45); }
.ware .icon { height: 150px; display: grid; place-items: center; background: radial-gradient(circle, rgba(245,205,79,.12), rgba(0,0,0,.3) 70%); }
.ware .icon img { max-width: 100px; max-height: 100px; }
.ware .icon .gem { width: 56px; height: 56px; border-radius: 10px; transform: rotate(45deg); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 0 34px currentColor; animation: spin 6s ease-in-out infinite; }
.ware h3 { font: 400 24px var(--display); font-style: italic; text-transform: uppercase; }
.ware .desc { flex: 1; font-size: 16px; color: var(--muted); }
.ware .price { font: 700 22px var(--px); color: var(--gold); }
.ware .old { text-decoration: line-through; color: var(--muted); font-size: 14px; margin-left: 8px; }
.ware .btn { padding: 14px; }
.notice { margin-bottom: 22px; }
@keyframes spin { 50% { transform: rotate(225deg) scale(1.08); } }
@media (max-width: 860px) { .who-chip { display: none; } }
.ware .desc p { margin: 0 0 8px; }
.ware .desc ul { margin: 0 0 8px; padding: 0; list-style: none; }
.ware .desc li { position: relative; padding: 3px 0 3px 18px; }
.ware .desc li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; background: var(--gold); }
.ware .desc strong { color: var(--cream); font-weight: 700; }