/* Themes & Plugins store, on Float tokens (float.css + site.css). No new colours beyond an item's own accent. */

.store-filter { display: flex; gap: 8px; justify-content: center; margin-top: var(--s-4); flex-wrap: wrap; }
.store-filter .chip { text-decoration: none; padding: 8px 16px; font-size: var(--fs-sm); transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-med) var(--ease-spring); }
.store-filter .chip:hover { transform: translateY(-1px); }
.store-filter .chip.on { background: var(--accent); color: #fff; }

.store-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: var(--s-6) 0; }
.store-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.store-hit { display: block; }
.store-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.store-body h2 { margin: 4px 0 0; font-size: var(--fs-lg); }
.store-body h2 a { color: inherit; text-decoration: none; }
.store-body p { margin: 0; }
.store-top { display: flex; justify-content: space-between; align-items: center; }
.store-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.price-tag { font: 700 var(--fs-sm)/1 var(--font-display); }

.cover { --item-accent: var(--accent); position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in oklab, var(--item-accent) 18%, var(--surface-2)); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease-liquid); }
.store-card:hover .cover img { transform: scale(1.035); }
.cover.blank { display: grid; place-items: center; background: linear-gradient(135deg, var(--item-accent), color-mix(in oklab, var(--item-accent) 45%, var(--accent-2))); }
.cover.blank span { font: 800 64px/1 var(--font-display); color: #fff; opacity: .9; }
.cover.big { border-radius: var(--r-lg); padding: 0; }

.crumbs { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--s-4) 0; }
.crumbs a { color: inherit; }
.item-page { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.item-main { display: grid; gap: var(--s-5); min-width: 0; }
.item-head h1 { margin-top: 8px; }
.item-head .lead { margin: 0 0 var(--s-3); }
.item-side { display: grid; gap: var(--s-4); position: sticky; top: 96px; }
.buy-box .price { margin: 0 0 6px; font-size: var(--fs-xl); }
.buy-box .fields { margin: var(--s-3) 0; }
.shots { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; }
.shot { flex: 0 0 min(78%, 420px); scroll-snap-align: start; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e-2); transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med); }
.shot:hover { transform: translateY(-3px); box-shadow: var(--e-3, var(--e-2)); }
.shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.item-main .prose { max-width: none; margin: 0; width: 100%; }
.lib h2 a { color: inherit; text-decoration: none; }

.adm-shots { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: var(--s-3); }
.adm-shot { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.adm-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.adm-shot figcaption { display: flex; gap: 6px; padding: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .item-page { grid-template-columns: 1fr; }
  .item-side { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .cover img, .shot, .store-filter .chip { transition: none; }
  .store-card:hover .cover img, .shot:hover { transform: none; }
}