/* V2 kawaii wardrobe extension — accessory & jewelry, isolated from outfit/pet shop. */
.items-grid.shop-art-gallery {
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  max-height: 510px;
  gap: 12px;
}
.shop-art-gallery .item-card {
  isolation: isolate;
  min-height: 234px;
  padding: 11px 9px;
  border-radius: 19px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(184, 120, 255, .16), transparent 68%),
    var(--bg-card);
}
.shop-art-gallery[data-shop-category="accessory"] .item-card {
  border-color: rgba(143, 123, 231, .5);
}
.shop-art-gallery[data-shop-category="jewelry"] .item-card {
  border-color: rgba(215, 144, 252, .48);
}
.shop-art-gallery .item-card::before {
  content: "✦";
  position: absolute;
  right: 10px;
  top: 12px;
  color: #fee7ae;
  font-size: 15px;
  opacity: .85;
  pointer-events: none;
}
.shop-art-gallery .item-card.equipped-active::before { display: none; }
.shop-art-gallery .item-card.selected {
  border-color: #62eaa1;
  background: radial-gradient(circle at 50% 23%, rgba(117, 250, 179, .18), transparent 78%), var(--bg-card);
  box-shadow: 0 0 17px rgba(85, 242, 160, .25);
}
.shop-art-gallery .item-card-shop-art {
  display: block;
  height: 164px;
  width: 100%;
  max-width: 174px;
  object-fit: contain;
  margin: 0 auto 5px;
  filter: drop-shadow(0 7px 13px rgba(156, 101, 252, .32));
  transition: transform .2s ease;
}
.shop-art-gallery .item-card:hover .item-card-shop-art {
  transform: translateY(-4px) scale(1.035);
}
.shop-art-gallery .item-card-name {
  font-weight: 900;
  line-height: 1.45;
  font-size: .87rem;
}
.shop-art-gallery .item-card-price { margin-top: 5px; }
.shop-art-gallery .item-card.locked .item-card-shop-art {
  /* Locked means not yet owned, but learners may preview the artwork before buying. */
  opacity: 1;
}
.stage-shop-badge-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(174, 130, 255, .42));
}
.stage-accessory-badge {
  max-width: 46%;
  overflow: hidden;
  gap: 4px;
}
.stage-accessory-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-shop-art-preview {
  position: absolute;
  left: 13px;
  bottom: 24px;
  z-index: 4;
  border: 1px solid rgba(236, 191, 255, .7);
  border-radius: 16px;
  padding: 4px 5px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(39, 26, 81, .78);
  box-shadow: 0 7px 15px rgba(27, 16, 65, .42);
  pointer-events: none;
}
.stage-shop-art-preview[hidden] { display: none !important; }
.stage-shop-art-preview img {
  width: 73px;
  height: 76px;
  object-fit: contain;
}
.stage-shop-art-preview span {
  font-size: 10px;
  color: #f6d6ff;
  font-weight: 850;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .items-grid.shop-art-gallery {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    max-height: 57vh !important;
    gap: 8px !important;
  }
  .shop-art-gallery .item-card {
    min-height: 196px;
    padding: 8px 5px !important;
  }
  .shop-art-gallery .item-card-shop-art {
    height: 127px;
    max-width: 143px;
  }
  .shop-art-gallery .item-card-name { font-size: .78rem !important; }
  .stage-shop-badge-img { width: 23px; height: 23px; }
  .stage-shop-art-preview img { width: 58px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-art-gallery .item-card-shop-art { transition: none; }
  .shop-art-gallery .item-card:hover .item-card-shop-art { transform: none; }
}

/* Kawaii tab accent: same glowing active treatment as the pet collection. */
#tab-cat-acc,#tab-cat-jewel {
  position: relative;
  border: 1px solid rgba(172,132,237,.32);
  border-radius: 15px;
  background: rgba(77, 51, 124, .17);
  transition: background .18s ease, border-color .18s ease;
}
#tab-cat-acc:hover,#tab-cat-jewel:hover { border-color: rgba(202,151,255,.65); }
#tab-cat-acc.active {
  background: linear-gradient(110deg,rgba(98,244,170,.21),rgba(128,109,246,.24));
  border-color: #66f7af;
  color: #7bf5c3;
  box-shadow: inset 0 0 13px rgba(123,238,185,.18), 0 0 12px rgba(120,253,177,.15);
}
#tab-cat-jewel.active {
  background: linear-gradient(110deg,rgba(194,132,255,.26),rgba(255,146,210,.20));
  border-color: #d8a2ff;
  color: #ffe0fa;
  box-shadow: inset 0 0 15px rgba(211,133,255,.24), 0 0 13px rgba(213,137,255,.17);
}