/* Homepage artwork selection; language-dependent title logos stay with existing hero code. */
#banner .banner__item .banner__bg{object-position:var(--home-x,50%) var(--home-y,50%)!important}
#banner .banner__item picture{position:absolute;inset:0;display:block;width:100%;height:100%}
@media(max-width:900px){#banner .banner__item .banner__bg{object-position:var(--home-mobile-x,50%) var(--home-mobile-y,50%)!important}}

/* Match the existing hero height before its observer starts. */
body.page-home-body{--home-hero-height:clamp(420px,62svh,560px)}
@media(max-width:1100px){body.page-home-body:has(main.mobile-home-page){--home-hero-height:clamp(380px,52svh,440px)}body.page-home-body #banner [data-hero-title-logo]{max-height:72px}}
@media(min-width:1101px){#smartFilter.home-quick-filter #smartFilterRows{min-height:144px}}

/* The category rail shares the recommendation container gutter. */
html body main.mobile-home-page>.container>nav.smart-home-types{padding-inline:0!important}

/* Use the same centered content gutter for hero copy, arrows and recommendations. */
main.mobile-home-page{--home-content-inset:max(var(--mobile-gutter,16px),calc((100% - 920px)/2 + var(--mobile-gutter,16px)))}
@media(min-width:1101px){main.mobile-home-page{--home-content-inset:max(24px,calc((100% - 1280px)/2 + 24px))}}
html body:has(#siteHeader.mobile-app-header) main.mobile-home-page #banner :is(.banner__content,.banner__arrow--prev){left:var(--home-content-inset)!important}
html body:has(#siteHeader.mobile-app-header) main.mobile-home-page #banner .banner__arrow--next{right:var(--home-content-inset)!important}