/* ============================================================
   v0.4.65: profile store page (/store). Page chrome only - the
   theme tiles (.theme-shop*), the try-on preview (.shop-preview)
   and the shape plates (.shape-preview) come from 22-profile-themes.css.
   Layout mirrors 17-pit-page.css (header, back link, centered column).
   ============================================================ */
.store-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
.store-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.store-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin: 0;
}
.store-back {
  font-size: 13px;
  font-weight: 600;
  color: var(--chronos-fg-secondary);
  text-decoration: none;
}
.store-back:hover { color: var(--chronos-violet); }
.store-balance {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--chronos-card-bg);
  border: 1px solid var(--chronos-outline);
  font-weight: 800;
  font-size: 14px;
}

.store-section { margin-top: 26px; }
.store-section-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chronos-fg-secondary);
  margin: 0 0 4px;
}
.store-section-hint {
  font-size: 12px;
  color: var(--chronos-fg-secondary);
  margin: 0 0 12px;
}
.store-page-hint {
  font-size: 13px;
  color: var(--chronos-fg-secondary);
  margin: 0;
}

/* The store reuses .theme-shop tiles; give the page grid a roomier column. */
.store-page .theme-shop {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* v0.4.67.18: the .theme-shop tiles + buy/equip buttons come from
   22-profile-themes.css, which is hardcoded for the ALWAYS-dark profile modal
   (pale text on faint translucent tints, near-transparent tiles). On the
   token-driven store page that canvas is WHITE in the default light theme, so
   those pale controls read as very low contrast - the "buy" buttons in
   particular. Re-skin them here, scoped to .store-page, with solid theme-token
   fills that stay legible in light AND dark. */
.store-page .theme-shop-tile {
  background: var(--chronos-card-bg);
  border-color: var(--chronos-outline);
}
.store-page .theme-shop-name { color: var(--chronos-fg-primary); }
.store-page .theme-shop-locked { color: var(--chronos-fg-muted); }
/* Equip / secondary action: readable chip with a violet hover cue. */
.store-page .theme-shop-btn {
  border: 1px solid var(--chronos-outline);
  background: var(--chronos-chip-bg);
  color: var(--chronos-fg-primary);
}
.store-page .theme-shop-btn:hover:not(:disabled) {
  border-color: var(--chronos-violet);
  opacity: 1;
}
/* BUY is the primary CTA - solid violet + white ink (same as .store-unbundle-buy),
   high contrast on either theme. Placed AFTER .theme-shop-btn so it wins at equal
   specificity (both classes sit on the same button). */
.store-page .theme-shop-buy {
  background: var(--chronos-violet);
  border-color: transparent;
  color: #fff;
}
.store-page .theme-shop-buy:hover:not(:disabled) {
  filter: brightness(1.08);
  opacity: 1;
}

/* Unbundle (mix and match) card. */
.store-unbundle {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--chronos-card-bg);
  border: 1px solid var(--chronos-outline);
}
.store-unbundle-icon {
  font-size: 26px;
  color: var(--chronos-violet);
}
.store-unbundle-body { flex: 1; min-width: 220px; }
.store-unbundle-title { font-weight: 800; font-size: 15px; margin: 0 0 2px; }
.store-unbundle-desc { font-size: 13px; color: var(--chronos-fg-secondary); margin: 0; }
.store-unbundle-owned {
  font-size: 13px;
  font-weight: 700;
  color: #34d399;
}
.store-unbundle-buy {
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--chronos-violet);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: filter 0.15s;
}
.store-unbundle-buy:hover:not(:disabled) { filter: brightness(1.1); }
.store-unbundle-buy:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Source badges ----
   The shelf is the inventory, so a tile has to say where it comes from without the
   reader decoding a price tag. One chip per tile, tinted by CosmeticSource. */
.theme-shop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -2px 0 0;
}
.store-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}
/* Same "chip = coloured dot + text" language as .label-dot / .priority-dot elsewhere in the
   app (06-planning-tasks.css) - the source badge was the one chip in the product with no dot. */
.store-source::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.store-source-free {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.45);
  color: var(--chronos-fg-secondary);
}
.store-source-shards {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.5);
  color: #0e7490;
}
.store-source-pro {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.5);
  color: #b45309;
}
.store-source-streak {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.5);
  color: #b91c1c;
}
.store-source-grant {
  background: rgba(124, 58, 237, 0.16);
  border-color: rgba(124, 58, 237, 0.5);
  color: #6d28d9;
}
/* The chip inks above are picked for the light canvas; on dark the same hues need to
   come forward instead of sinking into the card. */
[data-theme="dark"] .store-source-shards { color: #7dd3fc; }
[data-theme="dark"] .store-source-pro { color: #fcd34d; }
[data-theme="dark"] .store-source-streak { color: #fca5a5; }
[data-theme="dark"] .store-source-grant { color: #c4b5fd; }

/* ---- Filter bar ----
   v0.9.8: three single-select axes (type / source / state). Each axis is ONE row that scrolls
   HORIZONTALLY instead of wrapping, so the whole bar stays a fixed three short lines tall no
   matter how many chips a locale's labels need - it never grows to fill the screen, and the
   page itself never gets a horizontal scrollbar because only these rows do. */
.store-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--chronos-card-bg);
  border: 1px solid var(--chronos-outline);
}
.store-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.store-filter-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--chronos-fg-secondary);
  white-space: nowrap;
}
.store-filter-row {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.store-filter-chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--chronos-outline);
  background: var(--chronos-chip-bg);
  color: var(--chronos-fg-primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.store-filter-chip:hover { border-color: var(--chronos-violet); }
.store-filter-chip.is-active {
  background: var(--chronos-violet);
  border-color: transparent;
  color: #fff;
}
.store-filter-reset {
  align-self: flex-start;
  padding: 4px 2px;
  border: none;
  background: none;
  color: var(--chronos-fg-secondary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.store-filter-reset:hover { color: var(--chronos-violet); }
.store-filter-empty {
  font-size: 13px;
  color: var(--chronos-fg-secondary);
  text-align: center;
  padding: 16px 4px 4px;
}

/* Owned reads off the tile, not off the absence of a buy button. */
.store-owned {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.5);
  color: #047857;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}
[data-theme="dark"] .store-owned { color: #6ee7b7; }
.store-page .theme-shop-tile.is-owned {
  border-color: rgba(52, 211, 153, 0.45);
}

/* The nameless tile standing in for the grant-only rows the shelf withholds. */
.store-page .theme-shop-tile.is-sealed {
  border-style: dashed;
  opacity: 0.75;
}
.store-sealed-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: var(--chronos-chip-bg);
  border-color: var(--chronos-outline);
}

/* Split equip row (style / frame) on an owned theme tile after unbundling. */
.theme-shop-split {
  display: flex;
  gap: 6px;
}
.theme-shop-split .theme-shop-btn { flex: 1; }
.theme-shop-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Shape tiles reuse .theme-shop-tile; centre the preview plate. */
.store-page .theme-shop-tile .shape-preview { margin: 6px auto; }
.store-error {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #f87171;
}

/* ---- v0.4.66: per-tile try-on popup ----
   Replaces the old always-on top preview: hovering a store item pops a mini profile
   card above it, showing how that theme frame / cutout shape sits on the avatar while
   keeping the user's other equipped parts. Pure CSS hover, no Blazor state. */
.theme-shop-tile { position: relative; }
.store-tile-popup {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.theme-shop-tile:hover .store-tile-popup,
.theme-shop-tile:focus-within .store-tile-popup {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* The popup card is a real .profile-card so the .theme-<id>/.frame-<id> descendant
   rules (card gradient, avatar frame, ornaments) apply - just resized for a preview. */
.store-pop-card.profile-card {
  width: 150px;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(124, 58, 237, 0.28);
}
.store-pop-card .store-pop-avatar {
  width: 64px;
  height: 64px;
  margin: 0;
}
.store-pop-card .store-pop-avatar .profile-avatar-initial { font-size: 24px; }
/* A little downward pointer so the popup clearly belongs to the tile below it. */
.store-tile-popup::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--chronos-violet);
  opacity: 0.28;
}

/* "Open the store" link inside the profile customization overlay. */
.store-open-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(124, 58, 237, 0.45);
  color: #ede9fe;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s, transform 0.12s;
}
.store-open-link:hover { background: rgba(124, 58, 237, 0.28); transform: translateY(-1px); }
.store-open-arrow { font-weight: 900; }

@media (max-width: 560px) {
  .store-balance { margin-left: 0; }
  .store-page .theme-shop {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    /* v0.9.8, owner rule ("дёргающиеся окна это грех"): a filter changes how many tiles a
       grid holds, and on a full-height grid that changes the grid's own height, which shoves
       everything below it up or down on every tap. A FIXED height + its own scrollbar keeps
       the rest of the page still; only the shelf's internal scroll position moves. Desktop
       keeps the natural auto-height grid (more room, and the per-tile hover try-on popup - see
       .store-tile-popup - would clip against a scroll box it cannot escape upward out of, a
       trade this page does not need to make where there is space to avoid it). */
    height: 320px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .store-filter-bar { padding: 10px 12px; }
}