/* FYB owns its viewport; the native YouTube player remains unobscured. */
html:has(body.fyb-page){overflow:hidden}
html body.fyb-page{overflow:hidden;background:#121212!important}
html body.fyb-page>.skip-link{position:fixed;top:-80px;left:12px;z-index:130;padding:12px 16px;background:var(--te-surface,#20242a);color:var(--te-text,#f1f1f1)}
html body.fyb-page>.skip-link:focus{top:12px}
html body.fyb-page #fyb-main{height:calc(100dvh - var(--te-header-height,64px));padding:0 16px;display:flex;flex-direction:column;position:relative;overflow:hidden;container-type:inline-size}
.fyb-heading{display:flex;align-items:center;flex:0 0 48px;max-width:920px;width:100%;margin:0 auto}
.fyb-heading h1{font-size:20px;line-height:1.2;margin:0;color:var(--te-text,#f1f1f1)}
.fyb-heading h1 span{font-size:11px;letter-spacing:.08em;color:var(--te-muted,#b7bbc2);margin-left:8px}
.fyb-status{margin:0;text-align:center;color:var(--te-muted,#b7bbc2);font-size:13px}
.fyb-status:empty{display:none}
#fyb-main:has(.fyb-item)>.fyb-status{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fyb-feed{flex:1;min-height:0;width:100%;position:relative;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scrollbar-width:none;outline-offset:-3px!important;container-type:size;touch-action:pan-y}
.fyb-feed::-webkit-scrollbar{display:none}
.fyb-item{--fyb-toolbar-height:56px;--fyb-inset-left:4px;--fyb-inset-right:4px;--fyb-inset-top:8px;--fyb-inset-bottom:12px;--fyb-frame-width:min(calc(100cqw - var(--fyb-inset-left) - var(--fyb-inset-right)),max(200px,calc((100cqh - var(--fyb-inset-top) - var(--fyb-inset-bottom) - var(--fyb-toolbar-height)) * 9 / 16)));--fyb-frame-height:min(calc(100cqh - var(--fyb-inset-top) - var(--fyb-inset-bottom) - var(--fyb-toolbar-height)),calc(var(--fyb-frame-width) * 16 / 9));height:100%;min-height:0;width:100%;margin:0 auto;padding:var(--fyb-inset-top) var(--fyb-inset-right) var(--fyb-inset-bottom) var(--fyb-inset-left);box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--fyb-toolbar-height);align-items:center;justify-items:center;position:relative}
.fyb-stage{width:var(--fyb-frame-width);height:var(--fyb-frame-height);max-width:100%;aspect-ratio:9/16;min-width:0;min-height:0;display:flex;justify-content:center;align-items:center;grid-column:1;grid-row:1;background:#000;border-radius:12px;overflow:hidden;position:relative}
.fyb-player,.fyb-poster{width:100%;height:100%;min-height:0}
.fyb-player-overlay{position:absolute;z-index:2;background:#000;border-radius:12px;overflow:clip;touch-action:pan-y}
.fyb-player-overlay[hidden],.fyb-poster[hidden]{display:none}
.fyb-player iframe{display:block;width:100%;height:100%;min-width:0;min-height:0;border:0}
.fyb-poster{display:flex;align-items:center;justify-content:center;padding:0;border:0;background:#000;color:white;cursor:pointer;position:relative;overflow:hidden}
.fyb-poster img{width:100%;height:100%;object-fit:contain;opacity:.82;pointer-events:none}
.fyb-poster span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;background:rgba(0,0,0,.7);border:1px solid #aeb5bf;border-radius:50%;font-size:26px;padding-left:4px}
/* App actions stay below the unobscured player and remain part of the feed. */
.fyb-side{grid-column:1;grid-row:2;align-self:stretch;min-height:0;width:min(100%,max(280px,var(--fyb-frame-width)));display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:4px 0;touch-action:pan-y}
.fyb-side a,.fyb-side button,.fyb-utility a,.fyb-utility button{width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:10px;border:1px solid var(--te-border,#464a50);border-radius:50%;display:grid;place-items:center;background:var(--te-elevated,#20242a);color:var(--te-text,#f1f1f1);text-decoration:none;cursor:pointer}
.fyb-side svg,.fyb-navigation svg,.fyb-utility svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fyb-caption{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fyb-utility{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:max(4px,env(safe-area-inset-bottom));display:flex;flex-direction:row;align-items:center;gap:8px;width:auto;z-index:4;touch-action:pan-y}
.fyb-side>.fyb-utility{position:static;margin-right:auto;z-index:auto}
.fyb-utility [hidden]{display:none!important}
.fyb-utility .fyb-play-fallback{background:#2563eb;color:#fff;border-color:#69aaff;font-size:12px;font-weight:700;padding:4px}
.fyb-utility [aria-busy=true] svg{animation:fyb-refresh-spin 850ms linear infinite}
#fyb-main:has(.fyb-feed[data-pull-state=ready]) #fyb-refresh{border-color:#69aaff;background:#174f9e}
#fyb-main:has(.fyb-feed[data-pull-state=pulling]) #fyb-refresh{border-color:#69aaff}
.fyb-inline-message{position:absolute;left:8px;right:8px;bottom:8px;padding:8px;margin:0;background:#20242a;border:1px solid #737983;border-radius:8px;text-align:center;color:#fff;font-size:13px}
.fyb-stage[data-fyb-player] .fyb-inline-message{width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fyb-inline-message a{color:#8cc2ff}
.fyb-navigation{position:absolute;right:max(16px,env(safe-area-inset-right));top:50%;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:4}
.fyb-navigation button{width:44px;height:44px;border:1px solid var(--te-border,#464a50);border-radius:50%;background:var(--te-elevated,#20242a);color:var(--te-text,#f1f1f1);display:grid;place-items:center;cursor:pointer}
.fyb-navigation button:disabled{opacity:.35;cursor:default}
.fyb-navigation button:not(:disabled):hover,.fyb-side :is(a,button):hover,.fyb-utility :is(a,button):hover{background:var(--te-hover,#303741);border-color:var(--te-blue,#69aaff)}
.fyb-retry{margin:20px auto;display:block;padding:10px 18px;border-radius:8px;border:1px solid #737983;background:#2563eb;color:#fff;cursor:pointer}
@keyframes fyb-refresh-spin{to{transform:rotate(360deg)}}
/* Phones, foldables and touch tablets use an immersive, route-only canvas. */
@media(max-width:767px),(pointer:coarse){
 html body.fyb-page{padding-top:0!important;--te-sidebar-width:0px}
 html body.fyb-page>.site-header,html body.fyb-page>.te-sidebar,html body.fyb-page>.te-sidebar-overlay{display:none!important}
 html body.fyb-page #fyb-main{height:100dvh;width:100%!important;max-width:100%!important;margin:0!important;padding:0;inset:0}
 .fyb-heading{position:absolute!important;width:1px;height:1px;min-height:0;flex-basis:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .fyb-item{--fyb-inset-left:env(safe-area-inset-left,0px);--fyb-inset-right:env(safe-area-inset-right,0px);--fyb-inset-top:env(safe-area-inset-top,0px);--fyb-inset-bottom:env(safe-area-inset-bottom,0px)}
 .fyb-stage,.fyb-player-overlay{border-radius:0}
 .fyb-navigation{display:none}
 .fyb-utility{left:max(8px,env(safe-area-inset-left))}
 .fyb-side{width:min(100%,max(296px,var(--fyb-frame-width)));padding:4px 8px;box-sizing:border-box}
 .fyb-side svg{width:20px;height:20px}
}
@container(max-height:355px){.fyb-item{--fyb-inset-top:0px;--fyb-inset-bottom:0px}.fyb-side{gap:6px}.fyb-utility{gap:6px}}
@media(prefers-reduced-motion:reduce){.fyb-feed{scroll-behavior:auto}.fyb-utility [aria-busy=true] svg{animation:none}}

/* Comments share the Watch conversation while the paused feed stays in place. */
.fyb-comments{width:min(620px,calc(100vw - 32px));height:min(780px,90dvh);max-width:none;max-height:min(90dvh,calc(var(--fyb-comments-visible-height,100dvh) - 16px));padding:0;margin:auto;border:1px solid #60656c;border-radius:16px;background:#121212;color:#f1f1f1;box-sizing:border-box;overflow:hidden}
.fyb-comments:not([open]){display:none}
.fyb-comments[open]{display:flex;flex-direction:column}
.fyb-comments::backdrop{background:#0009;backdrop-filter:blur(4px)}
.fyb-comments-heading{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #464a50;flex:none;min-width:0}
.fyb-comments-heading>div{min-width:0}
.fyb-comments-heading h2{font-size:20px;line-height:1.3;margin:0 0 4px}
.fyb-comments-heading p{font-size:13px;line-height:1.4;color:#b7bbc2;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
#fyb-comments-close{width:44px;height:44px;flex:none;border:1px solid #60656c;border-radius:50%;background:#20242a;color:#fff;font:inherit;font-size:28px;line-height:1;cursor:pointer}
#fyb-comments-close:hover,#fyb-comments-close:focus-visible{border-color:#69aaff;background:#263d5a}
.fyb-comments-content{flex:1;min-height:0;overflow:hidden}
.fyb-comments-frame{width:100%;height:100%;display:block;border:0;background:#121212}
.fyb-comments-status{margin:0;padding:12px 16px;color:#b7bbc2;flex:none}
.fyb-comments-status[hidden]{display:none}
.fyb-comments-fallback{margin:0;padding:10px 16px max(12px,env(safe-area-inset-bottom));font-size:13px;border-top:1px solid #464a50;flex:none}
.fyb-comments-fallback a{color:#8cc2ff}
@media(max-width:767px),(pointer:coarse){
 .fyb-comments{position:fixed;inset:auto 0 var(--fyb-comments-keyboard-offset,0px);width:100%;height:88dvh;max-height:calc(var(--fyb-comments-visible-height,100dvh) - max(8px,env(safe-area-inset-top)));margin:0;border-radius:16px 16px 0 0;border-bottom:0}
 .fyb-comments-heading{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
}


/* Connected-product action stays with the other app controls below the player. */
.fyb-side .fyb-products-button{color:#8cc2ff;border-color:#508dd8}
@media(max-width:355px){.fyb-side{gap:4px;padding-inline:4px}.fyb-side>.fyb-utility{gap:4px}.fyb-side:has(.fyb-play-fallback:not([hidden])){gap:2px}.fyb-side:has(.fyb-play-fallback:not([hidden]))>.fyb-utility{gap:2px}}

.fyb-comments[data-sheet="products"]{width:min(940px,calc(100vw - 32px))}
@media(max-width:767px),(pointer:coarse){.fyb-comments[data-sheet="products"]{width:100%}}

.fyb-comments[data-sheet="products"] [data-fyb-product-view]{height:100%;overflow:auto;overscroll-behavior-y:contain}