/* Marketplace (2026-09-26). Kept in its own file so styles.css (and its ?v= number) is not touched. Uses the site's colour variables. */
.mp-hero { background: var(--gradient-hero); color: #fff; border-radius: 12px; padding: 1.6rem 1.5rem; }
.mp-hero h1 { color: #fff; font-size: 1.7rem; font-weight: 800; margin-bottom: .25rem; }
.mp-hero .mp-search { max-width: 640px; }

.mp-free-band { background: #e8f6ee; border: 1px solid #9fd3b5; border-radius: 12px; padding: 1rem 1.1rem; }
.mp-free-band h2, .mp-free-band .mp-free-title { color: #14603a; }
.mp-free-tag { display: inline-block; background: #1f8a4c; color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .03em; padding: .15rem .55rem; border-radius: 99px; }

.mp-card { display: block; height: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: var(--transition-smooth); }
.mp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }
.mp-card.is-free { border-color: #9fd3b5; }
.mp-card-img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; display: block; background: var(--muted); }
.mp-card-tile { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.mp-card-tile svg { width: 34%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mp-card-body { padding: .55rem .7rem .7rem; }
.mp-card-title { font-weight: 600; font-size: .92rem; line-height: 1.25; height: 2.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mp-price { font-weight: 800; font-size: 1.05rem; }
.mp-price.is-free { color: #1f8a4c; }
.mp-sub { font-size: .78rem; color: var(--muted-foreground); }

.mp-store-card { display: flex; align-items: center; gap: .7rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; color: inherit; text-decoration: none; height: 100%; }
.mp-store-card:hover { box-shadow: var(--shadow-md); color: inherit; }
.mp-logo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--muted); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.mp-logo-lg { width: 88px; height: 88px; border: 4px solid #fff; box-shadow: var(--shadow-md); font-size: 1.6rem; }

.mp-banner { height: 150px; border-radius: 12px 12px 0 0; background: var(--gradient-hero); object-fit: cover; width: 100%; display: block; }
.mp-storehead { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

.mp-gallery-main { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--muted); border-radius: 10px; }
.mp-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; background: var(--muted); }
.mp-thumb.on { border-color: var(--primary); }

.mp-catbar { display: flex; gap: .4rem; flex-wrap: wrap; }
.mp-chip { display: inline-block; padding: .25rem .75rem; border-radius: 99px; background: var(--muted); color: var(--foreground); text-decoration: none; font-size: .85rem; font-weight: 600; border: 1px solid transparent; }
.mp-chip:hover { border-color: var(--border); color: var(--foreground); }
.mp-chip.on { background: var(--primary); color: #fff; }
.mp-chip.free { background: #e8f6ee; color: #14603a; }
.mp-chip.free.on { background: #1f8a4c; color: #fff; }

.mp-status { font-size: .75rem; font-weight: 700; padding: .12rem .5rem; border-radius: 99px; }
.mp-status.live { background: #e0f3e8; color: #1f8a4c; }
.mp-status.draft { background: #eceef3; color: #5b6478; }
.mp-status.hidden { background: #fdf1d8; color: #b7791f; }
.mp-status.taken { background: #eceef3; color: #5b6478; }
.mp-status.pending { background: #fdf1d8; color: #b7791f; }
.mp-status.suspended { background: #fbe3e3; color: #c53030; }
.mp-status.active { background: #e0f3e8; color: #1f8a4c; }
.mp-sample { background: #eceef3; color: #5b6478; }

.mp-thumb-sm { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--muted); flex: none; }
.mp-restricted { background: #fff4e6; border: 1px solid #f0cfa2; border-radius: 8px; padding: .6rem .8rem; font-size: .85rem; color: #7a4a10; }