@font-face { font-family: "SZ Motion Public"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/hero-motion/assets/public-sans-latin.woff2") format("woff2"); }
#sz-motion-hero{--canvas: #e9ece6; --ink: #171c18; --muted: #535a53; --line: #a3aaa1; --header: 76px; --gutter: clamp(28px,3.6vw,76px); color-scheme: light;}
#sz-motion-hero *{box-sizing: border-box;}
#sz-motion-hero,#sz-motion-hero{margin: 0px; min-height: 100%; background: var(--canvas); color: var(--ink);}
#sz-motion-hero{font-family: "SZ Motion Public", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;}
#sz-motion-hero a{color: inherit; text-decoration: none;}
#sz-motion-hero button{font: inherit; color: inherit; cursor: pointer;}
#sz-motion-hero button,#sz-motion-hero a{-webkit-tap-highlight-color: transparent;}
#sz-motion-hero button:focus-visible,#sz-motion-hero a:focus-visible,#sz-motion-hero [tabindex]:focus-visible{outline: 2px solid var(--ink); outline-offset: 5px;}
#sz-motion-hero button:disabled{cursor: default;}
#sz-motion-hero .skip-link{position: absolute; top: 8px; left: 16px; z-index: 5; padding: 12px 18px; background: var(--ink); color: var(--canvas); transform: translateY(-160%);}
#sz-motion-hero .skip-link:focus{transform: none;}
#sz-motion-hero .site-header{height: var(--header); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px;}
#sz-motion-hero .wordmark{font-size: 23px; font-weight: 700; letter-spacing: -1.15px; white-space: nowrap;}
#sz-motion-hero .desktop-nav{display: flex; align-items: center; gap: clamp(20px, 2.5vw, 48px); font-size: 12px;}
#sz-motion-hero .desktop-nav a{padding: 16px 0px; white-space: nowrap; position: relative;}
#sz-motion-hero .desktop-nav a::after{content: ""; position: absolute; left: 0px; right: 0px; bottom: 8px; height: 1px; background: currentcolor; transform: scaleX(0); transform-origin: left center; transition: transform 240ms;}
#sz-motion-hero .desktop-nav a:hover::after{transform: scaleX(1);}
#sz-motion-hero .menu-button,#sz-motion-hero .close-menu{border: 0px; background: transparent; min-height: 44px; padding: 8px 0px; display: flex; align-items: center; gap: 14px; font-size: 13px;}
#sz-motion-hero .menu-button{display: none;}
#sz-motion-hero .menu-button span,#sz-motion-hero .close-menu span{font-size: 23px; font-weight: 400;}
#sz-motion-hero{--photo-gap: 14px; --photo-left: 42vw; --photo-width: min(38vw,calc((100svh - 190px)*.666667)); --detail-width: min(18vw,25svh,calc(100vw - var(--gutter) - var(--photo-left) - var(--photo-width) - var(--photo-gap))); position: relative; height: calc(100svh - var(--header)); min-height: 320px; isolation: isolate; overflow: clip;}
#sz-motion-hero .hero-text{position: absolute; z-index: 2; left: var(--gutter); top: 24%; pointer-events: none; transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);}
#sz-motion-hero .hero-category{font-size: 12px; font-weight: 400; margin: 0px 0px 32px; line-height: 1.4;}
#sz-motion-hero h1{margin: 0px; font-size: min(8vw, 14svh); font-weight: 700; letter-spacing: -0.075em; line-height: 0.98;}
#sz-motion-hero .title-row{display: block; overflow: clip; padding: 0px 0.06em 0.045em 0px; margin-bottom: -0.045em;}
#sz-motion-hero .title-word{display: block; white-space: nowrap;}
#sz-motion-hero .letter{display: inline-block; transform-origin: 50% 100%;}
#sz-motion-hero .hero-description{font-size: 14px; line-height: 1.5; margin: 30px 0px 0px; color: var(--muted);}
#sz-motion-hero .portrait-frame{position: absolute; left: var(--photo-left); top: 18px; width: var(--photo-width); aspect-ratio: 2 / 3; overflow: clip; background: rgb(217, 222, 213); touch-action: pan-y; z-index: 1;}
#sz-motion-hero .image-fallback{position: absolute; inset: 0px; display: grid; place-items: center; margin: 0px; font-size: 13px; color: var(--muted); z-index: 0;}
#sz-motion-hero figure{margin: 0px;}
#sz-motion-hero .shot,#sz-motion-hero .detail-shot{position: absolute; inset: 0px; overflow: clip;}
#sz-motion-hero .shot[hidden],#sz-motion-hero .detail-shot[hidden]{display: none;}
#sz-motion-hero picture{display: block; width: 100%; height: 100%;}
#sz-motion-hero img{display: block; width: 100%; height: 100%; object-fit: cover; user-select: none;}
#sz-motion-hero .shot img{object-position: 50% 50%;}
#sz-motion-hero .detail-frame{position: absolute; top: calc(18px + var(--photo-width)*1.5 - var(--detail-width)*1.5 - 44px); left: calc(var(--photo-left) + var(--photo-width) + var(--photo-gap)); width: var(--detail-width); height: calc(var(--detail-width)*1.5 + 44px); overflow: clip; z-index: 2;}
#sz-motion-hero .detail-shot img{object-position: 50% 50%;}
#sz-motion-hero .shoe-link{display: grid; grid-template-rows: minmax(0px, 1fr) 44px; width: 100%; height: 100%; background: var(--canvas);}
#sz-motion-hero .shoe-link:focus-visible{outline-offset: -3px; outline-width: 3px;}
#sz-motion-hero .shoe-caption{display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0px 10px; font-size: 12px; line-height: 1; white-space: nowrap; background: var(--canvas); color: var(--ink); transition: background-color 200ms, color 200ms;}
#sz-motion-hero .shoe-caption span{font-size: 18px; line-height: 1;}
#sz-motion-hero .shoe-link:hover .shoe-caption,#sz-motion-hero .shoe-link:focus-visible .shoe-caption{background: var(--ink); color: var(--canvas);}
#sz-motion-hero .catalogue-link{position: absolute; left: var(--gutter); bottom: 28px; z-index: 3; min-height: 52px; padding: 14px 21px; background: var(--ink); color: var(--canvas); display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background-color 200ms;}
#sz-motion-hero .catalogue-link span{font-size: 22px; line-height: 1; display: block; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);}
#sz-motion-hero .catalogue-link:hover{background: rgb(45, 53, 44);}
#sz-motion-hero .catalogue-link:active{background: rgb(58, 66, 57);}
#sz-motion-hero .gallery-controls{position: absolute; left: var(--photo-left); right: var(--gutter); bottom: 20px; z-index: 3; display: none; align-items: center; justify-content: flex-start; gap: 10px;}
#sz-motion-hero[data-enhanced] .gallery-controls{display: flex;}
#sz-motion-hero .frame-choices{display: flex; gap: 8px;}
#sz-motion-hero .arrow-button,#sz-motion-hero .frame-choice,#sz-motion-hero .playback-button{border: 0px; background: transparent; min-width: 44px; min-height: 44px; padding: 10px; position: relative; transition: background-color 180ms;}
#sz-motion-hero .arrow-button{font-size: 22px; line-height: 1;}
#sz-motion-hero .frame-choice{font-size: 11px; letter-spacing: 0.03em; color: var(--muted); font-variant-numeric: tabular-nums;}
#sz-motion-hero .frame-choice[aria-current="true"]{color: var(--ink);}
#sz-motion-hero .progress-track{position: absolute; height: 2px; background: var(--line); bottom: 2px; left: 7px; right: 7px; overflow: hidden;}
#sz-motion-hero .progress-fill{display: block; background: var(--ink); width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center;}
#sz-motion-hero .frame-choice[aria-current="true"] .progress-fill{transform: scaleX(1);}
#sz-motion-hero .playback-button{display: inline-flex; align-items: center; gap: 10px; font-size: 11px; margin-left: 10px; min-width: 88px;}
#sz-motion-hero .playback-icon{font-size: 17px; line-height: 1;}
#sz-motion-hero .arrow-button:hover,#sz-motion-hero .frame-choice:hover,#sz-motion-hero .playback-button:hover{background: rgb(217, 223, 212);}
#sz-motion-hero .arrow-button:active,#sz-motion-hero .frame-choice:active,#sz-motion-hero .playback-button:active{background: rgb(203, 211, 197);}
#sz-motion-hero .parallax{transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);}
#sz-motion-hero .visually-hidden{width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0px; position: absolute !important;}
#sz-motion-hero .gallery-status[data-error]{left: 44%; right: var(--gutter); bottom: 80px; width: auto; height: auto; clip-path: none; white-space: normal; overflow: visible; margin: 0px; font-size: 12px; line-height: 1.5; background: var(--canvas); padding: 12px; z-index: 4; position: absolute !important;}
#sz-motion-hero .navigation-dialog{width: min(560px, 100vw); max-width: 100vw; max-height: 100svh; min-height: 100svh; margin: 0px 0px 0px auto; padding: 28px; border: 0px; background: var(--canvas); color: var(--ink);}
#sz-motion-hero .navigation-dialog::backdrop{background: rgba(23, 28, 24, 0.45);}
#sz-motion-hero .dialog-header{display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 76px;}
#sz-motion-hero .dialog-header p{font-weight: 700; font-size: 21px; letter-spacing: -1px; margin: 0px;}
#sz-motion-hero .navigation-dialog nav{display: grid; gap: 30px;}
#sz-motion-hero .navigation-dialog nav a{font-size: clamp(23px, 5vw, 34px); line-height: 1.3;}
#sz-motion-hero .fallback-nav{display: flex; flex-wrap: wrap; gap: 24px; padding: 24px var(--gutter); font-size: 14px;}
@media (max-width: 899px) {#sz-motion-hero{--header: 64px; --gutter: 28px;}
#sz-motion-hero .site-header{padding: 0 var(--gutter);}
#sz-motion-hero .wordmark{font-size: 22px;}
#sz-motion-hero .desktop-nav{display: none;}
#sz-motion-hero .menu-button{display: flex;}
#sz-motion-hero .hero-text{top: 18px; left: var(--gutter); right: var(--gutter);}
#sz-motion-hero .hero-category,#sz-motion-hero .hero-description{display: none;}
#sz-motion-hero h1{font-size: min(16.8vw, 11svh); letter-spacing: -0.07em; line-height: 0.92;}
#sz-motion-hero .title-row:first-child{font-size: 12px; letter-spacing: 0.26em; font-weight: 500; margin-bottom: 15px; line-height: 1.4; overflow: visible;}
#sz-motion-hero{--photo-width: min(calc((100vw - var(--gutter)*2)*.72),calc((100svh - 318px)/2.22)); --detail-width: calc(var(--photo-width)*.48); --photo-left: calc((100vw - var(--photo-width) - var(--detail-width) + 24px)/2);}
#sz-motion-hero .portrait-frame{top: 160px; left: var(--photo-left); width: var(--photo-width);}
#sz-motion-hero .detail-frame{top: calc(160px + var(--photo-width)*1.5 - 90px); left: calc(var(--photo-left) + var(--photo-width) - 24px); width: var(--detail-width);}
#sz-motion-hero .shoe-caption{font-size: 11px; padding: 0px 8px;}
#sz-motion-hero .catalogue-link{bottom: 78px; left: var(--gutter); min-height: 48px; padding: 13px 18px; gap: 35px;}
#sz-motion-hero .gallery-controls{bottom: 12px; left: var(--gutter); right: var(--gutter); justify-content: space-between; gap: 4px;}
#sz-motion-hero .frame-choices{gap: 4px;}
#sz-motion-hero .playback-button{position: static; margin-left: 0px; padding: 10px 4px; min-width: 74px; gap: 6px;}
#sz-motion-hero .gallery-status[data-error]{left: var(--gutter); bottom: 134px; right: var(--gutter);}}
@media (max-width: 599px) {#sz-motion-hero{--gutter: 20px;}
#sz-motion-hero .wordmark{font-size: 20px;}
#sz-motion-hero .hero-text{top: 16px;}
#sz-motion-hero h1{font-size: min(18.2vw, 11svh);}
#sz-motion-hero .title-row:first-child{font-size: 11px; margin-bottom: 14px;}
#sz-motion-hero{--photo-width: min(calc((100vw - var(--gutter)*2)*.72),calc((100svh - 274px)/2.22));}
#sz-motion-hero .portrait-frame{top: 116px;}
#sz-motion-hero .detail-frame{top: calc(116px + var(--photo-width)*1.5 - 90px);}
#sz-motion-hero .previous-frame{display: none;}}
@media (max-width: 599px) and (max-height: 720px) {#sz-motion-hero .hero-text{top: 10px;}
#sz-motion-hero h1{font-size: min(18.2vw, 10.5svh);}
#sz-motion-hero .title-row:first-child{margin-bottom: 10px;}
#sz-motion-hero{--photo-width: min(calc((100vw - var(--gutter)*2)*.72),calc((100svh - 260px)/2.22));}
#sz-motion-hero .portrait-frame{top: 102px;}
#sz-motion-hero .detail-frame{top: calc(102px + var(--photo-width)*1.5 - 90px);}
#sz-motion-hero .catalogue-link{bottom: 72px; min-height: 44px;}
#sz-motion-hero .gallery-controls{bottom: 6px;}}
@media (max-width: 899px) and (max-height: 560px) and (min-aspect-ratio: 13 / 10) {#sz-motion-hero{--header: 54px; --gutter: 24px;}
#sz-motion-hero{min-height: 0px;}
#sz-motion-hero .hero-text{top: 46px; right: auto;}
#sz-motion-hero h1{font-size: min(9vw, 18svh); line-height: 1;}
#sz-motion-hero .title-row:first-child{font-size: 11px; margin-bottom: 12px;}
#sz-motion-hero{--photo-left: 50vw; --photo-width: calc((100svh - 136px)*.666667); --detail-width: min(15vw,30svh,calc(100vw - var(--gutter) - var(--photo-left) - var(--photo-width) - var(--photo-gap)));}
#sz-motion-hero .portrait-frame{left: var(--photo-left); top: 0px; width: var(--photo-width);}
#sz-motion-hero .detail-frame{left: calc(var(--photo-left) + var(--photo-width) + var(--photo-gap)); top: calc(var(--photo-width)*1.5 - var(--detail-width)*1.5 - 44px);}
#sz-motion-hero .catalogue-link{bottom: 20px;}
#sz-motion-hero .gallery-controls{left: 45%; right: 20px; bottom: 4px;}
#sz-motion-hero .playback-button{position: static; right: auto; bottom: auto; min-width: 64px;}
#sz-motion-hero .gallery-status[data-error]{left: 48%; bottom: 62px;}}
@media (max-width: 700px) and (max-height: 560px) and (min-aspect-ratio: 13 / 10) {#sz-motion-hero .previous-frame{display: none;}}
@media (min-width: 900px) and (max-height: 700px) {#sz-motion-hero .hero-text{top: 16%;}
#sz-motion-hero .hero-category{margin-bottom: 24px;}
#sz-motion-hero .hero-description{margin-top: 20px;}}
@media (prefers-reduced-motion: reduce) {#sz-motion-hero *,#sz-motion-hero ::before,#sz-motion-hero ::after{animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important;}
#sz-motion-hero .playback-button{display: none;}}
#sz-motion-hero{width:100%;margin:0;display:block;border:0;--header:63px;}
#sz-motion-hero .hero-category,#sz-motion-hero .hero-description,#sz-motion-hero .image-fallback{font-family:"SZ Motion Public","Segoe UI",sans-serif;}

@media(min-width:900px){#sz-motion-hero{--photo-width:min(38vw,calc((100svh - 190px - max(0px,var(--header) - 76px))*.666667));}}
@media(max-width:899px){#sz-motion-hero{--photo-width:min(calc((100vw - var(--gutter)*2)*.72),calc((100svh - 318px - max(0px,var(--header) - 64px))/2.22));}}
@media(max-width:599px){#sz-motion-hero{--photo-width:min(calc((100vw - var(--gutter)*2)*.72),calc((100svh - 274px - max(0px,var(--header) - 64px))/2.22));}}
@media(max-width:599px) and (max-height:720px){#sz-motion-hero{--photo-width:min(calc((100vw - var(--gutter)*2)*.72),calc((100svh - 260px - max(0px,var(--header) - 64px))/2.22));}}
@media(max-width:899px) and (max-height:560px) and (min-aspect-ratio:13/10){#sz-motion-hero{--photo-width:calc((100svh - 136px - max(0px,var(--header) - 54px))*.666667);}}
@media(max-width:359px){#sz-motion-hero{--detail-width:max(80px,calc(var(--photo-width)*.48));}#sz-motion-hero .shoe-caption{font-size:10px;padding:0 6px;gap:4px;}#sz-motion-hero .shoe-caption span{font-size:14px;}.zs-ptl-section .zs-ptl-product-tab{font-size:13px!important;}}
@media(max-width:359px) and (max-height:720px){#sz-motion-hero .detail-frame{top:calc(102px + var(--photo-width)*1.5 - var(--detail-width)*1.5);}}
.sz-home-motion-inview .elementor-widget-elementskit-back-to-top,.sz-home-motion-inview .chaty-widget{visibility:hidden!important;pointer-events:none!important;}
