.shop-page {
  min-height: 100vh;
  overflow-x: clip;
  color: #f8f8fa;
  background:
    radial-gradient(circle at 14% 15%, rgba(255, 55, 83, .09), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(255, 164, 48, .075), transparent 27rem),
    #08090c;
}

.shop-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .23;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

/* Shop entrance sequence: light enough to stay smooth on the first paint. */
html.shop-motion .shop-intro .shop-kicker {
  animation: shop-enter-up .5s cubic-bezier(.22,1,.36,1) .06s backwards;
}

html.shop-motion .shop-intro h1 {
  animation: shop-enter-up .68s cubic-bezier(.16,1,.3,1) .13s backwards;
}

html.shop-motion .shop-intro > p {
  animation: shop-enter-up .58s cubic-bezier(.22,1,.36,1) .24s backwards;
}

html.shop-motion .shop-rate-pill {
  animation: shop-enter-up .52s cubic-bezier(.22,1,.36,1) .33s backwards;
}

html.shop-motion .shop-wallet-card {
  animation: shop-wallet-enter .76s cubic-bezier(.16,1,.3,1) .2s backwards;
}

html.shop-motion .shop-wallet-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -35% auto -35% -45%;
  width: 34%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,230,185,.13), transparent);
  transform: translate3d(-180%,0,0) skewX(-17deg);
  animation: shop-wallet-sheen .9s ease-out .68s backwards;
}

html.shop-motion .shop-scroll-reveal {
  opacity: 0;
  transform: translate3d(var(--shop-reveal-x, 0), var(--shop-reveal-y, 26px), 0) scale(var(--shop-reveal-scale, .985));
  transition:
    opacity .64s cubic-bezier(.22,1,.36,1) var(--shop-reveal-delay, 0ms),
    transform .72s cubic-bezier(.16,1,.3,1) var(--shop-reveal-delay, 0ms);
}

html.shop-motion .shop-scroll-reveal.is-shop-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.shop-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 110px;
}

.shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: center;
  gap: 64px;
  min-height: 430px;
}

.shop-intro { max-width: 700px; }

.shop-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ff5067;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

.shop-kicker i { display: grid; place-items: center; font-size: 13px; }

.shop-intro h1 {
  margin: 18px 0 0;
  font-size: clamp(46px, 6vw, 78px);
  line-height: .94;
  letter-spacing: -.058em;
}

.shop-intro h1 em { color: #ff5067; font-style: normal; }

.shop-intro p {
  max-width: 630px;
  margin: 22px 0 0;
  color: #9a9ba5;
  font-size: 15px;
  line-height: 1.7;
}

.shop-rate-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  padding: 8px 13px 8px 8px;
  border: 1px solid rgba(255, 194, 72, .18);
  border-radius: 999px;
  color: #d9d9df;
  background: rgba(255, 175, 43, .055);
  font-size: 11px;
}

.kaiyo-coin-mini {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.kaiyo-coin-mini img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(255, 30, 45, .28));
}

.shop-wallet-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(255, 196, 91, .2);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(37, 28, 18, .97), rgba(17, 16, 19, .98) 58%, rgba(23, 15, 17, .98));
  box-shadow: 0 32px 85px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05);
}

.wallet-orbit { position: absolute; border: 1px solid rgba(255,184,55,.09); border-radius: 50%; pointer-events: none; }
.wallet-orbit-one { width: 250px; height: 250px; right: -96px; top: -112px; }
.wallet-orbit-two { width: 180px; height: 180px; right: -64px; top: -78px; }

.wallet-head, .wallet-progress-copy, .wallet-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wallet-head { color: #8e8b86; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.wallet-head i { color: #ffc15a; font-size: 17px; }

.wallet-balance-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 26px;
}

.kaiyo-coin-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.kaiyo-coin-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 13px 22px rgba(255, 25, 42, .24));
  transition: transform .35s cubic-bezier(.22,1,.36,1), filter .35s ease;
}

.shop-wallet-card:hover .kaiyo-coin-mark img {
  transform: translateY(-3px) rotate(-4deg) scale(1.04);
  filter: drop-shadow(0 17px 28px rgba(255, 25, 42, .34));
}
.wallet-balance-row div { display: flex; flex-direction: column; }
.wallet-balance-row strong { font-size: 42px; line-height: .95; letter-spacing: -.045em; }
.wallet-balance-row small { margin-top: 7px; color: #8f8c86; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.wallet-progress-copy { margin-top: 31px; color: #85827d; font-size: 11px; }
.wallet-progress-copy strong { color: #d4d1cc; font-size: 11px; }

.wallet-progress {
  position: relative;
  z-index: 1;
  height: 7px;
  overflow: hidden;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.065);
}

.wallet-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8b23, #ffd76b);
  box-shadow: 0 0 18px rgba(255,176,46,.4);
  transition: width .75s cubic-bezier(.22,1,.36,1);
}

.wallet-foot { margin-top: 20px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.065); color: #787671; font-size: 11px; }
.wallet-foot strong { color: #ffc75d; }

.wallet-login {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 11px 13px;
  border-radius: 12px;
  color: #fff;
  background: #e93d55;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.wallet-login[hidden] {
  display: none !important;
}

.shop-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-top: 56px;
}

.shop-overview article {
  --overview-tilt: -5deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  gap: 16px;
  min-height: 145px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 20px;
  background: rgba(15,16,20,.77);
  box-shadow: 0 14px 34px rgba(0,0,0,0);
  transition: transform .38s cubic-bezier(.22,1,.36,1), border-color .3s ease, background .3s ease, box-shadow .38s ease;
}

.shop-overview article:nth-child(2) { --overview-tilt: 6deg; }
.shop-overview article:nth-child(3) { --overview-tilt: -4deg; }

.shop-overview article::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  left: -78px;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: rgba(255,65,91,.17);
  filter: blur(38px);
  transform: translateY(-50%) scale(.55);
  transition: opacity .38s ease, transform .55s cubic-bezier(.16,1,.3,1);
}

.shop-overview article::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 30%;
  inset: -30% auto -30% -42%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform: skewX(-17deg);
}

.shop-overview-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #ff536a;
  background: rgba(255,70,95,.09);
  box-shadow: 0 10px 25px rgba(255,48,78,0);
  font-size: 16px;
  transition: transform .42s cubic-bezier(.16,1,.3,1), color .28s ease, border-color .28s ease, background .28s ease, box-shadow .35s ease;
}

.shop-overview-icon i { transition: transform .42s cubic-bezier(.16,1,.3,1); }
.shop-overview article div { display: flex; flex-direction: column; }
.shop-overview small { color: #ff536a; font-size: 9px; font-weight: 900; letter-spacing: .16em; transition: color .28s ease, letter-spacing .35s ease; }
.shop-overview strong { display: inline-block; margin-top: 7px; font-size: 15px; transition: color .28s ease, transform .38s cubic-bezier(.22,1,.36,1); }
.shop-overview p { margin: 8px 0 0; color: #81828b; font-size: 11px; line-height: 1.55; transition: color .28s ease; }

@media (hover: hover) and (pointer: fine) {
  .shop-overview article:hover {
    transform: translateY(-7px) scale(1.012);
    border-color: rgba(255,80,103,.28);
    background: rgba(22,18,22,.94);
    box-shadow: 0 24px 55px rgba(0,0,0,.34), 0 0 34px rgba(255,47,76,.055);
  }

  .shop-overview article:hover::before { opacity: 1; transform: translateY(-50%) scale(1); }
  .shop-overview article:hover::after { animation: shop-overview-sheen .72s ease-out; }
  .shop-overview article:hover .shop-overview-icon {
    color: #fff;
    border-color: rgba(255,103,123,.25);
    background: rgba(255,65,91,.18);
    box-shadow: 0 13px 29px rgba(255,48,78,.16);
    transform: translateY(-3px) rotate(var(--overview-tilt)) scale(1.08);
  }
  .shop-overview article:hover .shop-overview-icon i { transform: scale(1.08); }
  .shop-overview article:hover small { color: #ff7184; letter-spacing: .18em; }
  .shop-overview article:hover strong { color: #fff; transform: translateX(2px); }
  .shop-overview article:hover p { color: #9a9ba4; }
}

.shop-catalog {
  margin-top: 72px;
}

.shop-catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.shop-catalog-head > div:first-child > span {
  color: #ff5269;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}

.shop-catalog-head h2 {
  margin: 8px 0 0;
  font-size: clamp(27px, 4vw, 42px);
  letter-spacing: -.035em;
}

.shop-catalog-head p {
  margin: 10px 0 0;
  color: #83848d;
  font-size: 12px;
}

.shop-catalog-balance {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255, 68, 93, .16);
  border-radius: 999px;
  background: rgba(255, 57, 83, .055);
}

.shop-catalog-balance img { width: 28px; height: 28px; object-fit: contain; }
.shop-catalog-balance strong { font-size: 15px; }
.shop-catalog-balance span { color: #ff6b7d; font-size: 9px; font-weight: 900; }

.shop-category-tabs {
  display: flex;
  gap: 7px;
  margin-top: 27px;
  padding-bottom: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.shop-category-tabs::-webkit-scrollbar { display: none; }

.shop-category-tabs button {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  color: #85868f;
  background: rgba(255,255,255,.022);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.shop-category-tabs button:hover { color: #fff; }
.shop-category-tabs button.is-active { border-color: rgba(255,75,99,.28); color: #fff; background: rgba(255,61,87,.1); }

.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.shop-product-grid.is-grouped {
  grid-template-columns: minmax(0, 1fr);
  gap: 42px;
}

.shop-product-group {
  min-width: 0;
}

.shop-product-group + .shop-product-group {
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.065);
}

.shop-product-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}

.shop-product-group-head > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.shop-product-group-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,78,101,.15);
  border-radius: 11px;
  color: #ff536a;
  background: rgba(255,69,94,.065);
  font-size: 13px;
}

.shop-product-group-head h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.02em;
}

.shop-product-group-head > small {
  color: #6f7079;
  font-size: 9px;
  font-weight: 800;
}

.shop-product-group-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.shop-product-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 20px;
  background: #0e0f13;
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease;
}

.shop-product-card:hover {
  z-index: 2;
  transform: translateY(-6px);
  border-color: rgba(255,78,101,.28);
  box-shadow: 0 24px 58px rgba(0,0,0,.38), 0 0 35px rgba(255,45,72,.07);
}

.shop-product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(255,59,87,.11), rgba(10,10,14,.96) 64%);
}

.shop-product-card.is-banner .shop-product-media,
.shop-product-card.is-background .shop-product-media { aspect-ratio: 16 / 8.8; }

.shop-product-card.is-avatar .shop-product-media img,
.shop-product-card.is-decoration .shop-product-media img {
  width: 76%;
  height: 76%;
  border-radius: 50%;
  object-fit: cover;
}

.shop-product-card.is-decoration .shop-product-media img { width: 84%; height: 84%; object-fit: contain; }
.shop-product-card.is-decoration:not(.has-native-motion) .shop-product-media img { animation: shop-decoration-preview 4.8s ease-in-out infinite; }
.shop-product-card.is-banner .shop-product-media img,
.shop-product-card.is-background .shop-product-media img,
.shop-product-media video { width: 100%; height: 100%; object-fit: cover; }

.shop-product-media img,
.shop-product-media video { display: block; backface-visibility: hidden; transform: translateZ(0); transition: transform .45s cubic-bezier(.22,1,.36,1), filter .35s ease; }
.shop-product-card:hover .shop-product-media img,
.shop-product-card:hover .shop-product-media video { transform: translateZ(0) scale(1.045); }

.shop-product-placeholder { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 22px; color: #ff5269; background: rgba(255,67,93,.08); font-size: 25px; }

.shop-product-badges {
  position: absolute;
  inset: 10px 10px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  pointer-events: none;
}

.shop-product-badge {
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #fff;
  background: rgba(5,6,9,.68);
  backdrop-filter: blur(10px);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}

.shop-product-badge.is-animated { color: #ff8292; }
.shop-product-badge.is-equipped { border-color: rgba(67,216,145,.26); color: #63dda3; background: rgba(10,38,27,.72); }
.shop-product-badge.is-owned { color: #ffc767; }

.shop-product-copy { padding: 15px; }
.shop-product-copy small { display: block; overflow: hidden; color: #777983; font-size: 8px; font-weight: 900; letter-spacing: .14em; text-overflow: ellipsis; white-space: nowrap; }
.shop-product-copy h3 { overflow: hidden; margin: 7px 0 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.shop-product-copy p { min-height: 34px; display: -webkit-box; overflow: hidden; margin: 8px 0 0; color: #747680; font-size: 10px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.shop-product-action {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 13px;
  border: 1px solid rgba(255,75,99,.22);
  border-radius: 11px;
  color: #fff;
  background: rgba(255,56,83,.1);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.shop-product-action:hover { border-color: rgba(255,75,99,.4); background: rgba(255,56,83,.18); }
.shop-product-action:active { transform: scale(.97); }
.shop-product-action img { width: 21px; height: 21px; object-fit: contain; }
.shop-product-action.is-owned { border-color: rgba(255,194,87,.18); color: #ffc660; background: rgba(255,183,50,.06); }
.shop-product-action.is-equipped { border-color: rgba(65,213,142,.2); color: #5cdb9e; background: rgba(54,208,133,.065); }
.shop-product-action:disabled { opacity: .5; cursor: wait; }

.shop-product-empty {
  grid-column: 1 / -1;
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 34px;
  border: 1px dashed rgba(255,255,255,.09);
  border-radius: 22px;
  color: #747680;
  text-align: center;
  background: rgba(255,255,255,.012);
}

.shop-product-empty i { color: #ff5269; font-size: 27px; }
.shop-product-empty strong { color: #d6d6dc; font-size: 14px; }
.shop-product-empty span { max-width: 440px; font-size: 11px; line-height: 1.6; }
.shop-product-skeleton { height: 310px; border-radius: 20px; background: linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.055), rgba(255,255,255,.02)); background-size: 200% 100%; animation: shop-shimmer 1.2s linear infinite; }

.shop-lower-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr); align-items: start; gap: 16px; margin-top: 58px; }
.shop-activity-panel, .shop-market-preview { border: 1px solid rgba(255,255,255,.075); border-radius: 24px; background: rgba(14,15,19,.8); }
.shop-activity-panel { padding: 25px; }
.shop-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.shop-section-head span { color: #ff5269; font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.shop-section-head h2 { margin: 7px 0 0; font-size: 20px; }
.shop-section-head .shop-live-dot { padding: 7px 9px; border: 1px solid rgba(55,211,137,.17); border-radius: 999px; color: #50d793; background: rgba(55,211,137,.055); font-size: 8px; white-space: nowrap; }

.shop-transaction-list { display: grid; gap: 9px; margin-top: 22px; }
.shop-transaction, .shop-transaction-empty { min-height: 62px; display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.055); border-radius: 15px; background: rgba(255,255,255,.018); }
.shop-transaction-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #ffc65c; background: rgba(255,181,42,.08); }
.shop-transaction-icon img { width: 33px; height: 33px; display: block; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(255,30,45,.2)); }
.shop-transaction-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 4px; }
.shop-transaction-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.shop-transaction-copy small { color: #73747c; font-size: 9px; }
.shop-transaction-amount { color: #ffc65c; font-size: 12px; font-weight: 900; white-space: nowrap; }
.shop-transaction-empty { justify-content: center; color: #777983; font-size: 11px; text-align: center; }
.shop-transaction-skeleton { height: 62px; border-radius: 15px; background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.06), rgba(255,255,255,.025)); background-size: 200% 100%; animation: shop-shimmer 1.2s linear infinite; }

.shop-market-preview { position: relative; align-self: start; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; width: 100%; min-height: 260px; padding: 25px; }
.market-preview-glow { position: absolute; width: 210px; height: 210px; right: -55px; top: -80px; border-radius: 50%; background: rgba(255,69,94,.14); filter: blur(45px); }
.market-preview-icon { position: relative; width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 15px; color: #ff536a; background: rgba(255,69,94,.09); font-size: 19px; }
.shop-market-preview small { position: relative; color: #ff536a; font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.shop-market-preview h2 { position: relative; margin: 8px 0 0; font-size: 21px; line-height: 1.15; }
.shop-market-preview p { position: relative; margin: 10px 0 0; color: #7d7e87; font-size: 11px; line-height: 1.55; }

.shop-purchase-modal {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: grid;
  place-items: center;
  padding: 20px;
}

.shop-purchase-modal[hidden] { display: none !important; }
.shop-purchase-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,3,6,.84); backdrop-filter: blur(12px); cursor: default; }
.shop-purchase-dialog { position: relative; width: min(500px, 100%); max-height: calc(100vh - 40px); overflow-x: hidden; overflow-y: auto; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 23px; background: linear-gradient(155deg, #121318, #0d0e12); box-shadow: 0 38px 100px rgba(0,0,0,.68); scrollbar-width: none; animation: shop-dialog-in .32s cubic-bezier(.22,1,.36,1); }
.shop-purchase-dialog::-webkit-scrollbar { display: none; }
.shop-purchase-close { position: absolute; z-index: 8; top: 11px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.075); border-radius: 50%; color: #9b9ca5; background: rgba(8,9,12,.58); cursor: pointer; transition: color .2s ease, transform .28s cubic-bezier(.22,1,.36,1), border-color .2s ease, background .2s ease, box-shadow .25s ease; }
.shop-purchase-close i { display: grid; place-items: center; font-size: 14px; line-height: 1; transform: translateY(1px); transition: transform .28s cubic-bezier(.22,1,.36,1); }
.shop-purchase-close:hover { color: #fff; border-color: rgba(255,82,105,.24); background: rgba(255,67,93,.12); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.shop-purchase-close:hover i { transform: translateY(1px) rotate(90deg); }
.shop-purchase-close:active { transform: scale(.9); }
.shop-purchase-kicker { display: block; margin: 3px 46px 11px 2px; color: #ff5269; font-size: 8px; font-weight: 900; letter-spacing: .18em; }

.shop-purchase-preview { height: 210px; overflow: hidden; display: grid; place-items: center; margin-bottom: 17px; border: 1px solid rgba(255,255,255,.075); border-radius: 17px; background: radial-gradient(circle, rgba(255,60,88,.12), #090a0d 70%); }
.shop-purchase-media-frame { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.shop-purchase-media-frame > img,
.shop-purchase-media-frame > video { width: 100%; height: 100%; display: block; object-fit: contain; }
.shop-purchase-media-frame > .shop-product-placeholder { width: 74px; height: 74px; }

.shop-purchase-preview.is-avatar-preview { height: 164px; display: block; background: #090a0d; }
.shop-purchase-preview.is-decoration-preview { height: 184px; display: block; background: #090a0d; }
.shop-avatar-profile-preview { position: relative; width: 100%; height: 100%; overflow: hidden; }
.shop-avatar-preview-cover { height: 78px; border-bottom: 1px solid rgba(255,255,255,.055); background: radial-gradient(circle at 18% 0, rgba(255,66,92,.2), transparent 42%), linear-gradient(115deg, #101116, #171219 62%, #111216); }
.shop-avatar-preview-user { position: absolute; inset: auto 0 0; height: 87px; display: flex; align-items: center; padding: 0 17px; background: rgba(23,24,29,.96); }
.shop-avatar-preview-image { position: relative; width: 78px; height: 78px; display: grid; place-items: center; flex: 0 0 78px; margin-top: -30px; border: 3px solid #17181d; border-radius: 50%; background: #0c0d11; box-shadow: 0 11px 28px rgba(0,0,0,.42); }
.shop-avatar-preview-image > img:not(.sakura-avatar-decoration),
.shop-avatar-preview-image > video { position: relative; z-index: 2; width: 100%; height: 100%; display: block; overflow: hidden; border-radius: 50%; object-fit: cover; }
.shop-avatar-preview-image > .shop-product-placeholder { width: 100%; height: 100%; border-radius: 50%; }
.shop-avatar-preview-decoration { width: 140% !important; height: 140% !important; }
.shop-avatar-preview-image.is-decoration-product { width: 88px; height: 88px; flex-basis: 88px; margin-top: -34px; border-color: #17181d; overflow: visible; }
.shop-decoration-avatar { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: visible; border-radius: 50%; color: #fff; font-size: 23px; font-weight: 900; }
.shop-decoration-preview-avatar { position: relative; z-index: 2; width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.shop-decoration-preview-fallback { position: relative; z-index: 2; width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; color: inherit; }
.shop-avatar-preview-image.is-decoration-product .shop-avatar-preview-decoration { width: 148% !important; height: 148% !important; }
.shop-avatar-preview-identity { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 5px; margin-left: 14px; }
.shop-avatar-preview-identity > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.shop-avatar-preview-identity strong { overflow: hidden; color: #fff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.shop-avatar-preview-identity span { flex: 0 0 auto; padding: 4px 6px; border: 1px solid rgba(83,219,151,.22); border-radius: 7px; color: #67dda5; background: rgba(53,204,128,.065); font-size: 7px; font-weight: 900; }
.shop-avatar-preview-identity span.is-premium { border-color: rgba(255,177,52,.25); color: #ffc15b; background: rgba(255,166,33,.07); }
.shop-avatar-preview-identity small { overflow: hidden; color: #72737c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.shop-purchase-copy { padding: 0 2px; }
.shop-purchase-copy h2 { margin: 0; font-size: 23px; }
.shop-purchase-copy p { margin: 8px 0 0; color: #7f8089; font-size: 11px; line-height: 1.55; }
.shop-purchase-meta { overflow: hidden; margin-top: 16px; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: rgba(255,255,255,.016); }
.shop-purchase-meta > div { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 12px; }
.shop-purchase-meta > div + div { border-top: 1px solid rgba(255,255,255,.06); }
.shop-purchase-meta span { color: #777983; font-size: 10px; }
.shop-purchase-meta strong { color: #e6e6ea; font-size: 10px; text-align: right; }
.shop-purchase-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 17px; }
.shop-purchase-price { min-width: 0; display: flex; flex-direction: column; gap: 3px; color: #777983; font-size: 9px; }
.shop-purchase-price strong { display: flex; align-items: center; gap: 5px; color: #fff; font-size: 21px; line-height: 1; }
.shop-purchase-price img { width: 30px; height: 30px; object-fit: contain; }
.shop-purchase-price small { color: #ff687c; font-size: 8px; font-weight: 900; }
.shop-purchase-confirm { min-width: 168px; min-height: 44px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #f0445d, #d92849); box-shadow: 0 12px 30px rgba(225,43,72,.2); font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; transition: transform .18s ease, box-shadow .22s ease, filter .22s ease; }
.shop-purchase-confirm:hover { filter: brightness(1.08); box-shadow: 0 15px 34px rgba(225,43,72,.29); }
.shop-purchase-confirm:active { transform: scale(.97); }
.shop-purchase-confirm:disabled { opacity: .5; cursor: wait; }

.shop-toast { position: fixed; z-index: 2000; left: 50%; bottom: 28px; max-width: min(430px, calc(100% - 28px)); padding: 12px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; color: #fff; background: rgba(19,20,25,.94); box-shadow: 0 18px 48px rgba(0,0,0,.48); backdrop-filter: blur(16px); font-size: 11px; font-weight: 800; transform: translateX(-50%); animation: shop-toast-in .25s cubic-bezier(.22,1,.36,1); }
.shop-toast[hidden] { display: none !important; }
.shop-toast.is-error { border-color: rgba(255,71,95,.25); color: #ff9ba8; }

@keyframes shop-dialog-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes shop-toast-in { from { opacity: 0; transform: translate(-50%, 15px); } to { opacity: 1; transform: translate(-50%, 0); } }

@keyframes shop-enter-up {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes shop-wallet-enter {
  from { opacity: 0; transform: translate3d(34px, 12px, 0) scale(.965); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes shop-wallet-sheen {
  0% { opacity: 0; transform: translate3d(-180%,0,0) skewX(-17deg); }
  22% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(520%,0,0) skewX(-17deg); }
}

@keyframes shop-overview-sheen {
  0% { left: -42%; opacity: 0; }
  24% { opacity: .7; }
  100% { left: 122%; opacity: 0; }
}

@keyframes shop-shimmer { to { background-position: -200% 0; } }

@keyframes shop-decoration-preview {
  0%, 100% { transform: scale(1) rotate(-0.35deg); filter: brightness(1); }
  50% { transform: scale(1.035) rotate(0.55deg); filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .shop-product-card.is-decoration .shop-product-media img { animation: none; }
  html.shop-motion .shop-intro .shop-kicker,
  html.shop-motion .shop-intro h1,
  html.shop-motion .shop-intro > p,
  html.shop-motion .shop-rate-pill,
  html.shop-motion .shop-wallet-card,
  html.shop-motion .shop-wallet-card::after {
    animation: none;
  }

  html.shop-motion .shop-scroll-reveal,
  html.shop-motion .shop-scroll-reveal.is-shop-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .shop-overview article,
  .shop-overview article::before,
  .shop-overview-icon,
  .shop-overview-icon i,
  .shop-overview small,
  .shop-overview strong,
  .shop-overview p {
    transition: none;
  }

  .shop-overview article:hover,
  .shop-overview article:hover .shop-overview-icon,
  .shop-overview article:hover strong {
    transform: none;
  }

  .shop-overview article:hover::after { animation: none; }
}

@media (max-width: 900px) {
  .shop-hero { grid-template-columns: 1fr; gap: 38px; }
  .shop-wallet-card { width: min(100%, 440px); }
  .shop-overview { grid-template-columns: 1fr; }
  .shop-overview article { min-height: 0; }
  .shop-lower-grid { grid-template-columns: 1fr; }
  .shop-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-product-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .shop-shell { width: calc(100% - 28px); max-width: 1180px; padding: 92px 0 112px; }
  .shop-hero { min-height: 0; }
  .shop-shell, .shop-hero, .shop-intro, .shop-wallet-card { min-width: 0; max-width: 100%; }
  .shop-intro h1 { font-size: clamp(42px, 13vw, 60px); }
  .shop-intro p { max-width: 100%; overflow-wrap: anywhere; font-size: 13px; }
  .shop-wallet-card { box-sizing: border-box; min-height: 300px; padding: 21px; border-radius: 23px; }
  .wallet-progress-copy { gap: 12px; }
  .wallet-progress-copy strong { min-width: 0; text-align: right; }
  .wallet-balance-row strong { font-size: 38px; }
  .kaiyo-coin-mark { width: 68px; height: 68px; }
  .shop-overview { margin-top: 38px; }
  .shop-catalog { margin-top: 48px; }
  .shop-catalog-head { align-items: flex-start; }
  .shop-catalog-head p { max-width: 260px; }
  .shop-catalog-balance { flex: 0 0 auto; }
  .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-product-grid.is-grouped { gap: 34px; }
  .shop-product-group + .shop-product-group { padding-top: 27px; }
  .shop-product-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-product-group-head { margin-bottom: 12px; }
  .shop-product-group-head h3 { font-size: 16px; }
  .shop-product-copy { padding: 12px; }
  .shop-product-copy p { display: none; }
  .shop-product-action { margin-top: 10px; }
  .shop-product-skeleton { height: 235px; }
  .shop-lower-grid { margin-top: 40px; }
  .shop-activity-panel, .shop-market-preview { padding: 19px; border-radius: 20px; }
  .shop-section-head { align-items: flex-start; flex-direction: column; gap: 11px; }
  .shop-purchase-modal { padding: 10px; }
  .shop-purchase-dialog { max-height: calc(100vh - 20px); padding: 14px; border-radius: 19px; }
  .shop-purchase-preview.is-avatar-preview { height: 156px; }
  .shop-avatar-preview-user { padding: 0 13px; }
  .shop-avatar-preview-image { width: 72px; height: 72px; flex-basis: 72px; }
  .shop-avatar-preview-identity { margin-left: 11px; }
  .shop-avatar-preview-identity strong { font-size: 13px; }
  .shop-purchase-actions { gap: 12px; }
  .shop-purchase-confirm { min-width: 142px; }
}

@media (max-width: 390px) {
  .shop-catalog-head { display: block; }
  .shop-catalog-balance { width: max-content; margin-top: 15px; }
}