/* the shop: a merchant's hall, wares on velvet under candlelight */
.vows { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vows li { display: grid; grid-template-columns: 46px 1fr; gap: 2px 14px; align-items: start; padding: 18px 20px; box-shadow: inset 0 0 0 1px var(--hair); background: linear-gradient(180deg, rgba(201, 163, 91, .05), transparent); }
.vow-ico { grid-row: span 2; width: 46px; height: 46px; display: grid; place-items: center; font-style: normal; font-size: 1.3rem; color: var(--gold-hi); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a1814, #160b0a); box-shadow: 0 0 0 1px var(--gold-lo), 0 0 0 3px #000; }
.vows b { font: 700 1.2rem/1.2 var(--display); color: #f3e3bd; }
.vows span { color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .vows { grid-template-columns: 1fr; } }

.shop-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { border: 0; padding: 10px 18px; color: #d9c9a4; font: 700 .82rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  background: rgba(201, 163, 91, .05); box-shadow: inset 0 0 0 1px rgba(201, 163, 91, .25); transition: color .2s, box-shadow .2s, background .2s; }
.filters button:hover { color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold); }
.filters button[aria-pressed="true"] { color: #fff1d6; background: linear-gradient(180deg, #8c1c1a, #4a0b0b); box-shadow: inset 0 0 0 1px var(--gold-lo), 0 0 18px rgba(200, 56, 43, .3); }
.wallet { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; text-decoration: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--gold-lo); background: rgba(0, 0, 0, .35); }
.wallet b { font: 700 1.5rem/1 var(--display); color: var(--gold-hi); }
.wallet .shard { width: 16px; height: 21px; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.ware { display: flex; flex-direction: column; }
.ware .stage { position: relative; aspect-ratio: 1 / .86; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 55% at 50% 60%, rgba(242, 190, 100, .22), transparent 70%), radial-gradient(120% 80% at 50% 120%, rgba(140, 28, 26, .4), transparent 60%), linear-gradient(180deg, #1d1412, #0d0a09); }
.ware .stage::before { content: ''; position: absolute; left: 14%; right: 14%; bottom: 9%; height: 14%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); } /* the shadow it casts on the velvet */
.ware .pic { position: absolute; inset: 8% 12% 12%; background-position: center; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .7));
  transition: transform .8s var(--ease), filter .6s; }
.ware .pic.icon { inset: 22% 26% 24%; image-rendering: auto; }
.ware:hover .pic { transform: translateY(-8px) scale(1.04); filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .7)) drop-shadow(0 0 24px rgba(242, 200, 120, .35)); }
@media (prefers-reduced-motion: no-preference) { .ware .pic { animation: float 7s ease-in-out infinite; animation-delay: var(--fd, 0s); } .ware:hover .pic { animation-play-state: paused; } }
@keyframes float { 50% { translate: 0 -8px; } }
.ware .cat { position: absolute; left: 14px; top: 14px; }
.ware .new { position: absolute; right: 14px; top: 14px; }
.ware .wbody { display: grid; gap: 10px; padding: 20px 22px 22px; flex: 1; align-content: start; }
.ware h3 { font-size: 1.6rem; color: #f5e6c2; }
.ware p { margin: 0; color: #cdbd9a; font-size: .98rem; }
.ware .perk { color: var(--gold-hi); font-size: .92rem; }
.ware .buyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(201, 163, 91, .14); }
.price { display: inline-flex; align-items: center; gap: 8px; font: 700 1.6rem/1 var(--display); color: var(--gold-hi); }
.price .shard { width: 14px; height: 19px; }
.earn { margin-top: clamp(70px, 9vw, 120px); padding: clamp(32px, 5vw, 64px); overflow: hidden; }
.earn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 6, 6, .94) 25%, rgba(8, 6, 6, .55) 70%, rgba(8, 6, 6, .3)); }
.earn-in { position: relative; max-width: 620px; }
.earn-in p { color: #dccdab; }

/* the purchase dialog */
.buy-head { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; margin-bottom: 20px; }
.buy-head .pic { width: 96px; height: 96px; background: center / contain no-repeat; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); }
.buy-head h2 { font-size: 1.8rem; }
.buy-sum { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 16px 0 20px; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.buy-sum b { font: 700 1.2rem var(--display); color: var(--gold-hi); text-align: right; }
.buy-sum .low { color: var(--blood); }
.buy-acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
/* engraved stand-ins under each ware's picture, by its kind, until the painted ones land */
.ware .stage .emb { position: absolute; inset: 24% 30% 26%; z-index: -1; background: var(--emb) center / contain no-repeat; opacity: .85; filter: drop-shadow(0 0 18px rgba(242, 190, 100, .35)); }
.emb.book { --emb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23c9a35b' stroke-width='2.5'%3E%3Cpath d='M18 20h50a8 8 0 0 1 8 8v56H26a8 8 0 0 1-8-8z' fill='%233a1412'/%3E%3Cpath d='M26 84a8 8 0 0 1 0-16h50'/%3E%3Cpath d='M47 32l4 9 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z' fill='%23f2d99b' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); }
.emb.mount { --emb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 90V62c0-14 6-24 16-30l-4-14 12 9c12 0 24 10 26 24l-10 4-8-8-6 6v39z' fill='%233a1412' stroke='%23c9a35b' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='60' cy='38' r='2.5' fill='%23f2d99b'/%3E%3Cpath d='M44 34c-6 6-8 14-8 24' fill='none' stroke='%23c8382b' stroke-width='3'/%3E%3C/svg%3E"); }
.emb.decor { --emb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23c9a35b' stroke-width='2.5' fill='%233a1412'%3E%3Cpath d='M50 8v10M38 18h24l-4 10H42z'/%3E%3Cpath d='M34 28h32v44H34z'/%3E%3Cpath d='M30 72h40l-4 12H34z'/%3E%3C/g%3E%3Cpath d='M50 38c6 8 6 16 0 22-6-6-6-14 0-22z' fill='%23f2a64a'/%3E%3C/svg%3E"); }
.emb.misc { --emb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6l12 30 32 2-25 20 9 32-28-18-28 18 9-32L6 38l32-2z' fill='%233a1412' stroke='%23c9a35b' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='50' r='7' fill='%23f2d99b'/%3E%3C/svg%3E"); }
/* one painted horse, two coats; the small book smaller */
.pic[data-k="shop_mount_ash"] { filter: grayscale(.85) brightness(1.15) contrast(1.05) drop-shadow(0 16px 18px rgba(0, 0, 0, .7)); }
.pic[data-k="shop_mount_crimson"] { filter: hue-rotate(140deg) saturate(1.4) drop-shadow(0 16px 18px rgba(0, 0, 0, .7)); }
.pic[data-k="shop_inspire_small"] { inset: 18% 22% 20%; }