.store { --control-radius: calc(var(--radius-xl) / 2); padding-top: 3.5rem; padding-bottom: 2rem; min-height: calc(100vh - 12rem); }
.store-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.store-toolbar .section-title { margin-bottom: 0; }

.size-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--control-radius); overflow: hidden; }
.size-toggle a {
  min-width: 2.25rem; padding: .4rem .6rem; text-align: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em;
  color: var(--muted-foreground);
  transition: color .2s, background .2s;
}
.size-toggle a + a { border-left: 1px solid var(--border); }
.size-toggle a:hover { color: var(--foreground); }
.size-toggle a.active { color: var(--main-foreground); background: var(--main); }

.store-frame {
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--foreground) 2%, transparent);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  min-height: 420px;
}

.tiles { display: grid; gap: 1.75rem 1rem; }
.tiles.sm { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.tiles.md { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.tiles.lg { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }

.tile { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.tile .app-icon { transition: transform .2s, border-color .2s, color .2s; }
.tile:hover .app-icon { transform: translateY(-2px); color: var(--main); border-color: color-mix(in oklch, var(--main) 45%, transparent); }
.tiles.sm .app-icon { width: 48px; height: 48px; border-radius: var(--radius-xl); }
.tiles.sm .app-icon svg { width: 22px; height: 22px; }
.tiles.md .app-icon { width: 64px; height: 64px; border-radius: var(--radius-2xl); }
.tiles.md .app-icon svg { width: 28px; height: 28px; }
.tiles.lg .app-icon { width: 88px; height: 88px; border-radius: calc(var(--radius-2xl) * 1.25); }
.tiles.lg .app-icon svg { width: 36px; height: 36px; }

.label {
  text-align: center; line-height: 1.3; font-weight: 400;
  color: color-mix(in oklch, var(--foreground) 80%, transparent);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tiles.sm .label { font-size: .7rem; max-width: 84px; }
.tiles.md .label { font-size: .8rem; max-width: 104px; }
.tiles.lg .label { font-size: .85rem; max-width: 136px; }
.tile:hover .label { color: var(--foreground); }

.store-empty { text-align: center; padding: 6rem 0; color: var(--muted-foreground); font-size: .9rem; }

.pagination {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .4rem;
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.pagination a, .pagination span {
  min-width: 2rem; padding: .35rem .7rem; text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--border); border-radius: var(--control-radius);
  color: var(--muted-foreground);
}
.pagination a:hover { color: var(--foreground); border-color: color-mix(in oklch, var(--foreground) 25%, transparent); }
.pagination a.active { color: var(--main-foreground); background: var(--main); border-color: transparent; }
.pagination .disabled { opacity: .35; }

.store-count { margin-top: 1.25rem; text-align: center; }

@media (max-width: 480px) {
  .store { padding-top: 2rem; }
  .store-frame { padding: 1.25rem 1rem; }
  .tiles.sm { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .tiles.md { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .tiles.lg { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}