/* 390px design baseline: component dimensions scale with the mobile viewport. */
:root{--xl-h5-unit:calc(100vw / 390)}
/* Figma H5 shared shell. Page content is handled separately in steps 45–49. */
.xl-h5-header,.xl-h5-bottom-nav,.xl-h5-floating,.xl-h5-search-back{display:none}
@media(max-width:640px){
  body.xl-h5-shell-enabled{padding-top:calc(calc(56 * var(--xl-h5-unit)) + env(safe-area-inset-top,calc(0 * var(--xl-h5-unit))))!important;padding-bottom:env(safe-area-inset-bottom,0px)!important}
  body.xl-h5-shell-enabled.xl-h5-secondary-page{padding-top:calc(44 * var(--xl-h5-unit) + env(safe-area-inset-top,0px))!important}
  body.xl-home.xl-h5-shell-enabled.xl-h5-has-bottom-nav{padding-bottom:calc(calc(56 * var(--xl-h5-unit)) + max(calc(8 * var(--xl-h5-unit)),env(safe-area-inset-bottom,calc(0 * var(--xl-h5-unit)))))!important}
  .xl-h5-shell-enabled #app-header{display:none!important}
  .xl-h5-shell-enabled #app-footer{display:none!important}
  .xl-h5-shell-enabled .download-app,.xl-h5-shell-enabled .floating-live-link,.xl-h5-shell-enabled .floating-tg-group{display:none!important}
  .xl-h5-shell-enabled .xl-h5-header{display:flex;position:fixed;inset:0 0 auto;z-index:90;box-sizing:border-box;align-items:center;gap:calc(12 * var(--xl-h5-unit));height:calc(calc(56 * var(--xl-h5-unit)) + env(safe-area-inset-top,calc(0 * var(--xl-h5-unit))));padding:calc(calc(8 * var(--xl-h5-unit)) + env(safe-area-inset-top,calc(0 * var(--xl-h5-unit)))) calc(16 * var(--xl-h5-unit)) calc(8 * var(--xl-h5-unit));background:var(--bg-page)}
  .xl-h5-secondary-page .xl-h5-header{height:calc(44 * var(--xl-h5-unit) + env(safe-area-inset-top,0px));gap:0;padding:env(safe-area-inset-top,0px) calc(16 * var(--xl-h5-unit)) 0;font-family:var(--font-ui)}
  .xl-h5-page-back{position:absolute;left:calc(6 * var(--xl-h5-unit));top:env(safe-area-inset-top,0px);display:flex;align-items:center;justify-content:center;width:calc(44 * var(--xl-h5-unit));height:calc(44 * var(--xl-h5-unit));color:var(--text-secondary);text-decoration:none}
  .xl-h5-page-back span{display:block;width:calc(13.1233 * var(--xl-h5-unit));height:calc(13.1158 * var(--xl-h5-unit));background:var(--text-secondary);mask:url('/static/web/images/redesign/h5-search/back.svg') center/contain no-repeat;-webkit-mask:url('/static/web/images/redesign/h5-search/back.svg') center/contain no-repeat;transform:translateX(calc(2 * var(--xl-h5-unit))) rotate(45deg)}
  .xl-h5-page-title{display:block;width:100%;min-width:0;padding:0 calc(40 * var(--xl-h5-unit));box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;color:var(--text-primary);font-size:calc(16 * var(--xl-h5-unit));font-weight:600;line-height:calc(22 * var(--xl-h5-unit))}
  .xl-h5-page-back:focus-visible{outline:calc(2 * var(--xl-h5-unit)) solid var(--brand-blue-default);outline-offset:calc(-2 * var(--xl-h5-unit));border-radius:calc(4 * var(--xl-h5-unit))}
  .xl-h5-secondary-page .xl-breadcrumb,.xl-h5-secondary-page .xl-user-crumb,.xl-h5-secondary-page .xl-announcement-crumb,.xl-h5-secondary-page .vip-breadcrumb,.xl-h5-secondary-page .dx-breadcrumbs{display:none}
  body.xl-h5-legacy-shell>.main{margin-top:0;padding-top:calc(16 * var(--xl-h5-unit))}
  .xl-h5-logo{display:flex;align-items:center;flex:none;width:calc(108.001 * var(--xl-h5-unit));height:calc(40 * var(--xl-h5-unit))}
  .xl-h5-logo img{width:calc(108.001 * var(--xl-h5-unit));height:calc(27 * var(--xl-h5-unit))}
  .xl-h5-shell-enabled .xl-h5-light{display:block}.xl-h5-shell-enabled .xl-h5-dark{display:none}
  :root[data-theme="dark"] .xl-h5-shell-enabled .xl-h5-light{display:none}:root[data-theme="dark"] .xl-h5-shell-enabled .xl-h5-dark{display:block}
  .xl-h5-search{display:flex;align-items:center;gap:calc(8 * var(--xl-h5-unit));flex:1;min-width:0;height:calc(36 * var(--xl-h5-unit));border-radius:calc(100 * var(--xl-h5-unit));background:var(--bg-surface);padding:0 calc(12 * var(--xl-h5-unit))}
  .xl-h5-search button{display:flex;align-items:center;justify-content:center;position:relative;flex:none;width:calc(16 * var(--xl-h5-unit));height:calc(36 * var(--xl-h5-unit));padding:0;border:0;background:transparent}
  .xl-h5-search button:before{content:'';position:absolute;inset:calc(-4 * var(--xl-h5-unit)) calc(-6 * var(--xl-h5-unit))}
  .xl-h5-search button img{width:calc(16 * var(--xl-h5-unit));height:calc(16 * var(--xl-h5-unit))}
  .xl-h5-search input{display:block;min-width:0;width:100%;height:calc(36 * var(--xl-h5-unit));margin:0;padding:0;background:transparent;border:0!important;outline:none!important;box-shadow:none!important;color:var(--text-primary);font:400 calc(12 * var(--xl-h5-unit))/normal var(--font-ui);appearance:none}
  .xl-h5-search input::placeholder{color:var(--text-tertiary);opacity:1}
  .xl-h5-search input::-webkit-search-cancel-button{display:none}
  .xl-h5-search:focus-within{outline:calc(1 * var(--xl-h5-unit)) solid var(--brand-blue-default);outline-offset:calc(1 * var(--xl-h5-unit))}
  .xl-h5-search-entry{color:var(--text-tertiary);text-decoration:none;font:400 calc(12 * var(--xl-h5-unit))/normal var(--font-ui)}
  .xl-h5-search-entry-icon,.xl-h5-search-entry-icon img{flex:none;width:calc(16 * var(--xl-h5-unit));height:calc(16 * var(--xl-h5-unit))}
  .xl-h5-search-entry>span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .xl-h5-shell-enabled.xl-h5-has-bottom-nav .xl-h5-bottom-nav{display:flex;position:fixed;inset:auto 0 0;z-index:90;background:var(--bg-page);padding-bottom:max(calc(8 * var(--xl-h5-unit)),env(safe-area-inset-bottom,calc(0 * var(--xl-h5-unit))));box-sizing:content-box}
  .xl-h5-nav-item{display:flex;flex:1;min-width:0;height:calc(56 * var(--xl-h5-unit));align-items:center;justify-content:center;flex-direction:column;gap:calc(4 * var(--xl-h5-unit));color:var(--text-secondary)!important;text-decoration:none!important}
  .xl-h5-nav-icon{display:block;position:relative;flex:none;width:calc(24 * var(--xl-h5-unit));height:calc(24 * var(--xl-h5-unit))}
  .xl-h5-nav-icon img{position:absolute;max-width:none}
  .xl-h5-nav-0 img{width:calc(18.65 * var(--xl-h5-unit));height:calc(18.4267 * var(--xl-h5-unit));left:calc(2.675 * var(--xl-h5-unit));top:calc(2.897 * var(--xl-h5-unit))}
  .xl-h5-nav-1 img{width:calc(19.65 * var(--xl-h5-unit));height:calc(16.65 * var(--xl-h5-unit));left:calc(2.175 * var(--xl-h5-unit));top:calc(3.675 * var(--xl-h5-unit))}
  .xl-h5-nav-2 img{width:calc(20.65 * var(--xl-h5-unit));height:calc(17.15 * var(--xl-h5-unit));left:calc(1.675 * var(--xl-h5-unit));top:calc(3.675 * var(--xl-h5-unit))}
  .xl-h5-nav-3 img{width:calc(17.65 * var(--xl-h5-unit));height:calc(18.65 * var(--xl-h5-unit));left:calc(3.175 * var(--xl-h5-unit));top:calc(2.675 * var(--xl-h5-unit))}
  .xl-h5-nav-4 img{width:calc(16.65 * var(--xl-h5-unit));height:calc(18.25 * var(--xl-h5-unit));left:calc(3.675 * var(--xl-h5-unit));top:calc(3.075 * var(--xl-h5-unit))}
  .xl-h5-nav-label{font:600 calc(11 * var(--xl-h5-unit))/normal var(--font-ui)}
  .xl-h5-nav-item[aria-current="page"] .xl-h5-nav-label{background:linear-gradient(90deg,var(--brand-gradient-default-start),var(--brand-gradient-default-end));background-clip:text;-webkit-background-clip:text;color:transparent}
  .xl-h5-shell-enabled .xl-h5-floating{display:flex;position:fixed;right:calc(8 * var(--xl-h5-unit));bottom:calc(calc(114 * var(--xl-h5-unit)) + max(calc(8 * var(--xl-h5-unit)),env(safe-area-inset-bottom,calc(0 * var(--xl-h5-unit)))));z-index:80;width:calc(40 * var(--xl-h5-unit));flex-direction:column;gap:calc(8 * var(--xl-h5-unit))}
  .xl-h5-shell-enabled:not(.xl-h5-has-bottom-nav) .xl-h5-floating{bottom:calc(50 * var(--xl-h5-unit) + max(calc(8 * var(--xl-h5-unit)),env(safe-area-inset-bottom,0px)))}
  .xl-h5-floating>a,.xl-h5-floating .xl-h5-backtop{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:calc(40 * var(--xl-h5-unit));height:calc(52 * var(--xl-h5-unit));padding:calc(10 * var(--xl-h5-unit)) 0;border-radius:calc(20 * var(--xl-h5-unit));background:linear-gradient(-33.554938264159574deg,var(--brand-gradient-default-end) 11.981%,var(--brand-gradient-default-start) 88.437%);color:var(--text-on-brand)!important;text-align:center;text-decoration:none!important;font:600 calc(12 * var(--xl-h5-unit))/calc(16 * var(--xl-h5-unit)) var(--font-ui)}
  .xl-h5-shell-enabled .dx-backtop{display:none!important}
  .xl-h5-floating .xl-h5-backtop{width:calc(40 * var(--xl-h5-unit));height:calc(40 * var(--xl-h5-unit));background:var(--brand-blue-default);padding:0;border-radius:50%;border:0;box-shadow:none;visibility:hidden;pointer-events:none}
  .xl-h5-shell-enabled.is-backtop-visible .xl-h5-backtop{visibility:visible;pointer-events:auto}
  .xl-h5-shell-enabled.modal-open .xl-h5-backtop{visibility:hidden;pointer-events:none}
  .xl-h5-backtop img{width:calc(24 * var(--xl-h5-unit));height:calc(24 * var(--xl-h5-unit));display:block;flex:none;color:var(--text-on-brand)}
  .xl-h5-nav-item:focus-visible,.xl-h5-logo:focus-visible,.xl-h5-floating a:focus-visible,.xl-h5-backtop:focus-visible{outline:calc(2 * var(--xl-h5-unit)) solid var(--brand-blue-default);outline-offset:calc(-2 * var(--xl-h5-unit))}
  .xl-h5-shell-enabled.modal-open .xl-h5-floating,.xl-h5-shell-enabled.modal-open .xl-h5-bottom-nav{visibility:hidden}
}

/* Separate fixed mobile navigation from the scrolling content. */
@media(max-width:640px){
  .xl-h5-shell-enabled .xl-h5-header{box-shadow:0 4px 12px -4px rgba(20,20,28,.14)}
  .xl-h5-shell-enabled .xl-h5-bottom-nav{box-shadow:0 -4px 12px -4px rgba(20,20,28,.14)}
}

/* Secondary H5 pages use the shared shell without desktop breadcrumbs/footer. */
@media(max-width:640px){
 .xl-search-entry .xl-search-breadcrumb,.xl-film-detail .xl-film-breadcrumb,.xl-person-detail .xl-breadcrumb,.xl-article-page .xl-breadcrumb{display:none}
 .xl-h5-shell-enabled.xl-search-entry #app-footer,.xl-h5-shell-enabled.xl-film-detail #app-footer,.xl-h5-shell-enabled.xl-person-detail #app-footer,.xl-h5-shell-enabled.xl-article-page #app-footer{display:none}
}