/* The artwork stays in document flow: hiding the filter strip never jumps content. */
.cw-casting-tabs{position:sticky;top:var(--cw-tabs-top,70px);z-index:12;background:transparent;margin-inline:-22px;padding:3px 22px;scrollbar-width:none;gap:6px;align-items:center;min-height:50px}
.cw-casting-tabs::-webkit-scrollbar{display:none}
.cw-casting-tabs.is-stuck{background:transparent;box-shadow:none;border-bottom-color:transparent}
.cw .cw-casting-tabs button{min-height:44px;line-height:22px;padding:9px 9px;border:1px solid transparent;border-bottom-width:2px;border-radius:0;transition:background-color .18s,border-color .18s,box-shadow .18s,border-radius .18s}
.cw .cw-casting-tabs button[aria-pressed=true]{border-bottom-color:#d9e2b6}
.cw .cw-casting-tabs.is-stuck button{background:#262b2a;border-color:#ffffff40;border-radius:12px;box-shadow:0 3px 12px #0005;color:#f2efe9}
.cw .cw-casting-tabs.is-stuck button[aria-pressed=true]{background:#354032;border-color:#819167;border-bottom-color:#d9e2b6;color:#e3ebc8}
.cw .cw-casting-tabs.is-stuck button:hover{background:#424b40}
.cw .cw-casting-tabs button:focus-visible{outline:2px solid #d9e2b6;outline-offset:-3px}
@media(max-width:359px){.cw .cw-casting-tabs button{font-size:11px;padding-inline:7px}}
@media(prefers-reduced-motion:reduce){.cw .cw-casting-tabs button{transition:none}}
.cw .cw-medium-bar,.cw-discovery-stage.has-hero>.cw-medium-bar{display:flex;gap:7px;padding:8px 22px;transition:opacity .24s ease,transform .24s ease;z-index:6;position:relative;inset:auto}
.cw-medium-shortcuts{display:flex;flex-wrap:wrap;gap:5px;overflow:visible;min-width:0;align-items:center;flex:0 1 auto;padding-block:3px;margin-block:-3px}
.cw-medium-shortcuts::-webkit-scrollbar{display:none}
.cw-medium-bar .cw-medium-picker{flex:0 0 auto}
.cw-medium-shortcuts>.cw-btn,.cw-medium-bar .cw-medium-picker>summary,.cw-discovery-stage.has-hero .cw-medium-bar .cw-medium-picker>summary,.cw-category-select .cw-medium-picker>summary{flex-shrink:0;min-height:38px;padding:7px 11px;border:1px solid #ffffff50;border-radius:18px 18px 12px 18px;background:#ffffff12;box-shadow:inset 0 1px 0 #ffffff0a;line-height:22px;font-size:12px;font-weight:600;white-space:nowrap}
.cw-medium-shortcuts>.cw-btn:hover,.cw-medium-bar .cw-medium-picker>summary:hover{background:#ffffff22;border-color:#ffffff80}
.cw-medium-shortcuts>.cw-btn:focus-visible{outline-offset:-3px}
.cw-medium-shortcuts>.cw-btn{padding-inline:7px}
.cw-medium-bar.is-tucked{opacity:0;transform:translateY(-12px);pointer-events:none}
.cw-medium-bar:focus-within{opacity:1;transform:none;pointer-events:auto}
.cw-medium-bar .cw-medium-picker>summary{gap:8px}
@media(min-width:700px){.cw .cw-medium-bar,.cw-discovery-stage.has-hero>.cw-medium-bar{padding-inline:42px}.cw-casting-tabs{margin-inline:-42px;padding-inline:42px}}
@media(max-width:359px){.cw .cw-medium-bar,.cw-discovery-stage.has-hero>.cw-medium-bar{padding-inline:16px}.cw-casting-tabs{margin-inline:-16px;padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.cw-medium-bar{transition:none!important}}

/* Owner instruction 17 Oct 2026: fix overlapping buttons and small tap targets. Media chips keep their drawn 38px height; an invisible area fills the shortcut row's 3px padding (44px tall) and the gaps between chips. */
.cw-medium-shortcuts{padding-inline:5px;margin-inline:-5px}
.cw-medium-shortcuts>.cw-btn{position:relative}
.cw-medium-shortcuts>.cw-btn::before{content:"";position:absolute;inset:-4px -5.5px}
/* Fix round 11 Nov 2026 (item 112; tap area of at least 44x44 px, design/shared-navigation/verify-fix-1111-tap-targets.cjs): the work-type
   shortcuts ("ภาพยนตร์ / MV"). Was: 38 tall, "MV" 35 wide. */
.cw-medium-shortcuts>.cw-btn{min-height:44px;min-width:44px}