/* Character view (option B layout), shared by shop.html (tile click) - copied from shop-b.css 2026-11-05 */
.pill { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #343946; background: none; color: #cfcabf; font-weight: 500; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pill.on, .pill[aria-pressed="true"] { background: var(--ink); color: var(--night); border-color: var(--ink); }
.cs { padding: 44px 0 20px; scroll-margin-top: 120px; }
.banner { position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); min-height: 300px; display: grid; align-items: end; background: var(--night-2); }
@media (min-width: 900px) { .banner { min-height: 340px; align-items: center; } }
.banner > img { position: absolute; z-index: -2; inset: 0 0 0 auto; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 1.2s var(--ease); }
@media (min-width: 900px) { .banner > img { width: 62%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); } }
.banner:hover > img { transform: scale(1.04); }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgb(11 12 16 / .92) 78%), radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%); }
@media (min-width: 900px) { .banner::before { background: linear-gradient(90deg, var(--night-2) 30%, transparent 70%), radial-gradient(70% 140% at 0% 100%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 65%); } }
.banner .ghost { position: absolute; z-index: -1; left: 0; right: 0; bottom: -0.12em; white-space: nowrap; overflow: hidden; font: 400 clamp(110px, 18vw, 260px)/.8 var(--display); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 45%, transparent); opacity: .35; pointer-events: none; }
.banner .ghost span { display: inline-block; animation: ghost 50s linear infinite; }
@keyframes ghost { to { transform: translateX(-50%); } }
.banner .b-in { padding: 24px; display: grid; gap: 8px; max-width: 640px; }
@media (min-width: 900px) { .banner .b-in { padding: 36px 40px; } }
.banner .file { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.banner h2 { margin: 0; font: 400 clamp(48px, 8vw, 110px)/.86 var(--display); text-transform: uppercase; }
.banner .kick { margin: 0; color: #e2ddd3; font-size: 17px; max-width: 40ch; }
.banner .b-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.banner .b-cats a { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 7px 10px; border-radius: 6px; background: rgb(11 12 16 / .65); border: 1px solid rgb(242 239 232 / .2); }
.banner .b-cats a:hover { border-color: var(--accent); color: var(--accent); }
.cs-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 18px 0 6px; padding-bottom: 2px; }
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tabs .pill span { font: 500 10px var(--mono); opacity: .7; }
.cs-tabs .pill.on { background: var(--accent); border-color: var(--accent); color: var(--night); }
.cs-rail { position: relative; }
.cs-products { display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 8px 2px 14px; overscroll-behavior-x: contain; }
.cs-products::-webkit-scrollbar { display: none; }
.cs-products > * { scroll-snap-align: start; }
@media (min-width: 640px) { .cs-products { grid-auto-columns: calc((100% - 14px) / 2.2); } }
@media (min-width: 1024px) { .cs-products { grid-auto-columns: calc((100% - 42px) / 4.15); } }
.cs-rail .arrow { position: absolute; top: calc(50% - 60px); z-index: 3; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgb(242 239 232 / .25); background: rgb(11 12 16 / .82); backdrop-filter: blur(8px); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: opacity .3s, background .2s, color .2s; box-shadow: 0 10px 30px rgb(0 0 0 / .45); }
.cs-rail .arrow svg { width: 18px; height: 18px; }
.cs-rail .arrow.prev { left: 4px; } .cs-rail .arrow.next { right: 4px; }
@media (min-width: 1340px) { .cs-rail .arrow.prev { left: -25px; } .cs-rail .arrow.next { right: -25px; } }
.cs-rail .arrow:hover { background: var(--accent); color: var(--night); }
.cs-rail .arrow:disabled { opacity: 0; pointer-events: none; }
.cs-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.cs-foot button { background: none; border: 0; color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer; }
.cs-foot q { font-style: italic; }
.cat-label { display: block; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px 2px; }
.slot { display: flex; flex-direction: column; }
.slot .product { flex: 1; }
@media (prefers-reduced-motion: reduce) { .banner .ghost span { animation: none; } }

/* Shop page: character view bar + tile link */
.char-view { padding-bottom: 30px; }
.cv-bar { position: sticky; top: 64px; z-index: 15; background: rgb(11 12 16 / .9); backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
.cv-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 0; }
.cv-back { color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.cv-back:hover { color: var(--amber); }
.cv-bar .jumps { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.cv-bar .jumps::-webkit-scrollbar { display: none; }
.cv-bar .pill.on { background: var(--accent); border-color: var(--accent); color: var(--night); }
.char-view .cs { padding-top: 26px; }
.char-view[hidden], .filterbar[hidden], .results[hidden] { display: none !important; }
.suspect { cursor: pointer; }
.suspect .dd { cursor: auto; }
.suspect .s-link { color: inherit; text-decoration: none; }
.suspect .s-link:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; border-radius: 4px; }
.suspect:hover h2 { color: var(--accent); }

/* Shop clips: tile + banner videos fade in over their still once playing */
.suspect .s-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s, transform 1s var(--ease); }
.suspect .s-img video.on { opacity: 1; }
/* Wide tiles (2 columns, 700-899px) crop top/bottom: keep heads in frame, same crop for still and clip */
.suspect .s-img img, .suspect .s-img video { object-position: 50% 15%; }
.suspect:hover .s-img video { transform: scale(1.05); }
.banner > video { position: absolute; z-index: -2; inset: 0 0 0 auto; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; transition: opacity .6s, transform 1.2s var(--ease); }
.banner > video.on { opacity: 1; }
@media (min-width: 900px) { .banner > video { width: 62%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); } }
.banner:hover > video { transform: scale(1.04); }