/* 10.5.26.15: a centered house mark above the public navigation. */
:root{--mysterez-hero-header-offset:186px;--mysterez-hero-top-chrome:220px}
.site-header.has-centered-brand{--mysterez-expanded-header-height:186px;height:186px;grid-template-columns:1fr minmax(0,auto) 1fr;grid-template-rows:128px 58px;padding:0 3.2vw}
.site-header.has-centered-brand>.wordmark{grid-column:2;grid-row:1;justify-self:center;display:block;width:116px;height:116px;max-width:116px;line-height:0;margin:6px 0 0}
.site-header.has-centered-brand .mysterez-wordmark-lockup{width:116px;height:116px;max-width:none;display:block}
.site-header.has-centered-brand .wordmark img,.site-header.has-centered-brand .mysterez-wordmark-art{width:100%;height:100%;max-height:none;object-fit:var(--mysterez-frame-fit,contain);filter:none;mix-blend-mode:normal}
.site-header.has-centered-brand>.desktop-nav{grid-column:2;grid-row:2;justify-content:center;align-self:center}
.site-header.has-centered-brand>.header-actions{grid-column:3;grid-row:2;justify-self:end}
.site-header.has-centered-brand.is-scrolled{height:124px;grid-template-rows:76px 48px;color:#fff;background:rgba(5,5,5,.97);border-color:#242424}
.site-header.has-centered-brand.is-scrolled>.wordmark,.site-header.has-centered-brand.is-scrolled .mysterez-wordmark-lockup{width:68px;height:68px;max-width:68px}
.site-header.has-centered-brand.is-scrolled>.wordmark{margin:4px 0 0}
.site-header.has-centered-brand.is-scrolled .desktop-nav>ul>li>a,.site-header.has-centered-brand.is-scrolled .header-actions button,.site-header.has-centered-brand.is-scrolled .header-actions a{color:#fff}
.site-header.has-centered-brand+.mobile-menu{top:220px}
.site-header.has-centered-brand.is-scrolled+.mobile-menu{top:124px}
.mysterez-initial-spin{animation:mysterez-brand-arrival 1.05s cubic-bezier(.22,.72,.25,1) both}
@keyframes mysterez-brand-arrival{from{transform:rotate(-360deg)}to{transform:rotate(0)}}
.mysterez-login-brand{justify-content:center;margin:0 0 28px}
.mysterez-login-brand picture{display:block;width:126px;height:126px}
.mysterez-login-brand img{width:126px;height:126px;object-fit:var(--mysterez-frame-fit,contain)}
.collection-page{padding-top:var(--mysterez-hero-header-offset,186px)}
.native-product-page{padding-top:calc(var(--mysterez-hero-header-offset,186px) + 54px)}
.content-shell.singular-shell{padding-top:calc(var(--mysterez-hero-header-offset,186px) + 60px)}
.mysterez-builder-page{padding-top:var(--mysterez-hero-header-offset,186px)}
.mysterez-gender-page{padding-top:var(--mysterez-hero-header-offset,186px);background:#efeee9}
.gender-editorial-hero{display:grid;grid-template-columns:1fr 1fr;min-height:610px;background:#190d14;color:#f7f3ef}
.mysterez-gender-men .gender-editorial-hero{background:#101319}
.gender-hero-copy{padding:clamp(50px,6.2vw,112px);align-self:center}
.gender-hero-copy .section-kicker{font-size:10px;letter-spacing:.22em;color:#d9bfc9}
.mysterez-gender-men .gender-hero-copy .section-kicker{color:#bbc5d2}
.gender-hero-copy h1{font-family:var(--serif);font-size:clamp(54px,6vw,94px);line-height:.95;letter-spacing:-.055em;font-weight:400;max-width:620px;margin:28px 0}
.gender-hero-copy>p:not(.section-kicker){font-size:15px;line-height:1.8;max-width:390px;color:#d2c8cb}
.gender-primary-link{display:flex;align-items:center;justify-content:space-between;gap:32px;max-width:340px;min-height:54px;padding:17px 21px;background:#f3efeb;color:#141013;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:35px;transition:background .2s,color .2s}
.gender-primary-link:hover{background:#a82040;color:#fff}
.gender-primary-link span{font-size:20px;line-height:1}
.gender-text-link{display:inline-block;margin-top:24px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid #76646a;padding-bottom:6px}
.gender-hero-gallery{position:relative;min-width:0;background:#e5e1df;align-self:stretch;overflow:hidden}
.gender-hero-slide[hidden]{display:none!important}
.gender-hero-slide>a{display:block;position:relative;height:100%}
.gender-hero-slide img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:var(--mysterez-frame-fit,contain);background:#e5e1df}
.gender-slide-caption{position:absolute;left:0;right:0;bottom:0;padding:55px 28px 78px;display:grid;grid-template-columns:1fr auto;gap:7px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:white}
.gender-slide-caption>span:first-child{font-size:9px;letter-spacing:.18em;text-transform:uppercase;grid-column:1}
.gender-slide-caption strong{font:400 clamp(22px,2.2vw,36px)/1.1 var(--serif);grid-column:1}
.gender-slide-caption>span:last-child{grid-column:2;grid-row:1/3;font-size:28px;align-self:end}
.gender-carousel-controls{position:absolute;bottom:19px;left:28px;right:28px;display:flex;align-items:center;gap:12px;color:white;z-index:2}
.gender-carousel-controls[hidden]{display:none}
.gender-carousel-controls button{border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.3);color:#fff;min-width:38px;min-height:38px;font-size:16px}
.gender-carousel-controls>span{font-size:10px;min-width:34px;text-align:center}
.gender-carousel-controls [data-gender-autoplay]{font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;margin-left:auto}
.gender-carousel-controls button:disabled{opacity:.45;cursor:default}
.gender-hero-empty{min-height:610px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#d5c6c9;background:radial-gradient(ellipse at 50% 45%,#452535,#170d15)}
.gender-hero-empty>span{font:28px var(--serif);letter-spacing:.28em}
.gender-hero-empty p{font:italic 20px var(--serif)}
.gender-chapter-strip{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:84px;padding:25px 5vw;background:#070707;color:#ddd;border-top:1px solid #292127;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.gender-chapter-strip>span:nth-child(2){font:20px var(--serif);letter-spacing:.3em;color:#fff}
.mysterez-gender-page .mysterez-gender-catalog{padding:90px 5vw 100px}
.mysterez-gender-page .section-head h2{max-width:670px;font-size:clamp(36px,4.5vw,62px)}
.mysterez-gender-page .mysterez-gender-product-grid{gap:42px 20px;align-items:start}
/* Gender-card controls are handled consistently in JS, including keyboard and touch. */
.mysterez-gender-product-grid .collection-product-card:hover .collection-product-images img{opacity:0;position:absolute;inset:0;transform:none}
.mysterez-gender-product-grid .collection-product-card:hover .collection-product-images img.is-active{opacity:1;position:relative;inset:auto}
.mysterez-gender-product-grid .collection-product-card:focus-within .collection-image-nav{opacity:1;transform:none}
.gender-story{display:grid;grid-template-columns:1fr 1fr;background:#29151f;color:#f9f3ef}
.mysterez-gender-men .gender-story{background:#171c22}
.gender-story-image{background:#d6d2d0;min-width:0}
.gender-story-image img{display:block;width:100%;height:auto;aspect-ratio:auto 2/3;object-fit:var(--mysterez-frame-fit,contain)}
.gender-story-copy{padding:clamp(40px,6vw,100px);align-self:center}
.gender-story-copy h2{font:400 clamp(38px,4.5vw,68px)/1.04 var(--serif);letter-spacing:-.045em;margin:24px 0}
.gender-story-copy>p:not(.section-kicker){max-width:450px;font-size:15px;line-height:1.85;color:#d8cdd2}
.gender-story-copy .section-kicker{color:#d0b9c3}
.gender-closing{padding:100px 24px;text-align:center}
.gender-closing h2{font:400 clamp(40px,6vw,78px)/1 var(--serif);letter-spacing:-.045em;margin:24px 0 34px}
.gender-closing a{display:inline-block;padding:15px 0;border-bottom:1px solid #222;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.mcart-recommendation-price{font-size:12px;font-weight:700;margin:3px 0 10px}
@media(max-width:1100px) and (min-width:761px){.site-header.has-centered-brand>.desktop-nav{grid-column:1/3;justify-self:center}.site-header.has-centered-brand .desktop-nav>ul{gap:20px}.gender-hero-copy{padding:45px}.gender-chapter-strip>span:nth-child(2){display:none}}
@media(max-width:760px){
 :root{--mysterez-hero-header-offset:140px;--mysterez-hero-top-chrome:170px}
 .site-header.has-centered-brand{--mysterez-expanded-header-height:140px;height:140px;grid-template-rows:94px 46px;grid-template-columns:1fr 1fr 1fr;padding:0 20px}
 .site-header.has-centered-brand>.wordmark,.site-header.has-centered-brand .mysterez-wordmark-lockup{width:84px;height:84px;max-width:84px}
 .site-header.has-centered-brand>.header-actions{grid-column:1/-1;justify-self:stretch;justify-content:center;gap:30px}
 .site-header.has-centered-brand>.desktop-nav{display:none}
 .site-header.has-centered-brand.is-scrolled{height:112px;grid-template-rows:68px 44px}
 .site-header.has-centered-brand.is-scrolled>.wordmark,.site-header.has-centered-brand.is-scrolled .mysterez-wordmark-lockup{width:60px;height:60px;max-width:60px}
 .site-header.has-centered-brand+.mobile-menu,.site-header.has-centered-brand:not(.is-scrolled)+.mobile-menu{top:170px;max-height:calc(100svh - 170px);overflow:auto}
 .site-header.has-centered-brand.is-scrolled+.mobile-menu{top:112px;max-height:calc(100svh - 112px)}
 .gender-editorial-hero{grid-template-columns:1fr;min-height:0}
 .gender-hero-copy{padding:48px 26px 45px}.gender-hero-copy h1{font-size:58px;max-width:500px;margin:22px 0}.gender-hero-copy>p:not(.section-kicker){font-size:14px;max-width:430px}
 .gender-primary-link{margin-top:26px;max-width:100%}.gender-text-link{margin-top:21px}
 .gender-hero-gallery{width:100%}.gender-slide-caption{padding-left:24px;padding-right:24px}
 .gender-chapter-strip{min-height:100px;flex-wrap:wrap;justify-content:center;text-align:center;gap:18px;padding:23px}.gender-chapter-strip>span:nth-child(2){display:none}
 .mysterez-gender-page .mysterez-gender-catalog{padding:56px 20px 60px}.mysterez-gender-page .section-head{align-items:flex-start;flex-direction:column;gap:24px}.mysterez-gender-page .section-head h2{font-size:39px}.mysterez-gender-page .mysterez-gender-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 12px}
 .gender-story{grid-template-columns:1fr}.gender-story-copy{padding:45px 25px 55px}.gender-story-copy h2{font-size:46px}.gender-closing{padding:65px 22px}
 .mysterez-gender-product-grid .collection-image-nav{opacity:1;transform:none;width:32px;min-height:40px}
 .mysterez-login-brand picture,.mysterez-login-brand img{width:104px;height:104px}
}
@media(prefers-reduced-motion:reduce){.mysterez-initial-spin{animation:none!important}.gender-primary-link,.site-header.has-centered-brand{transition:none}.gender-hero-slide{animation:none!important}}

/* The supplied mark is black with transparency; reverse it on the dark masthead. */
.site-header.has-centered-brand .wordmark .mysterez-wordmark-art,.site-header.has-centered-brand.is-scrolled .wordmark .mysterez-wordmark-art,.mysterez-login-brand img{filter:brightness(0) invert(1)}

/* The taller chrome also clears existing system and editorial page headings. */
.native-commerce-page,.native-catalog-page,.content-shell{padding-top:calc(var(--mysterez-hero-header-offset,186px) + 60px)}
.mysterez-contact-hero,.mysterez-legal-hero,.runway-hero{padding-top:calc(var(--mysterez-hero-header-offset,186px) + 65px)}
.mysterez-password-stage{padding-top:var(--mysterez-hero-header-offset,186px)}
.site-header.has-centered-brand .wordmark img,.site-header.has-centered-brand.is-scrolled .wordmark img{filter:brightness(0) invert(1)}

/* 10.5.26.16: default landing campaigns only; catalog and authored pages are untouched. */
.gender-editorial-hero.has-campaign-art{grid-template-columns:minmax(0,1fr);min-height:0;background:#0b0910}
.has-campaign-art .gender-hero-gallery{grid-area:1/1;background:#0b0910;overflow:visible}
.has-campaign-art .gender-hero-copy{grid-area:1/1;z-index:1;width:44%;padding:clamp(38px,5vw,94px);pointer-events:none;text-shadow:0 2px 18px rgba(0,0,0,.85)}
.has-campaign-art .gender-hero-copy a{pointer-events:auto;text-shadow:none}
.has-campaign-art .gender-hero-copy h1{font-size:clamp(56px,5.4vw,96px);line-height:.97;margin:22px 0}
.has-campaign-art .gender-hero-copy>p:not(.section-kicker){color:#f0e9ed;font-size:14px;line-height:1.7}
.has-campaign-art .gender-hero-copy .section-kicker{color:#e2d6df}
.has-campaign-art .gender-primary-link{margin-top:27px}
.has-campaign-art .gender-hero-slide picture{display:block;background:#0b0910}
.has-campaign-art .gender-hero-slide picture img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:var(--mysterez-frame-fit,contain);object-position:var(--mysterez-framed-position,79% center);background:#0b0910}
.has-campaign-art .gender-slide-caption{position:relative;background:#100d14;padding:23px 30px 80px;min-height:145px}
.has-campaign-art .gender-slide-caption strong{font-size:27px}
.has-campaign-art .gender-carousel-controls{bottom:20px;left:30px;right:30px}
.has-campaign-art .gender-hero-slide:only-child .gender-slide-caption{padding-bottom:24px;min-height:0}
.has-campaign-art .gender-hero-slide>a:focus-visible{outline:3px solid #fff;outline-offset:-4px}
@media(min-width:1101px){
 .has-campaign-art .gender-hero-copy{align-self:start;margin-top:clamp(15px,3.4vw,70px)}
 .has-campaign-art .gender-hero-gallery:after{content:"";position:absolute;left:0;top:0;width:46%;height:calc(100% - 145px);pointer-events:none;background:linear-gradient(90deg,rgba(4,3,8,.42),rgba(4,3,8,.09) 85%,transparent)}
 .has-campaign-art .gender-slide-caption{padding-left:5vw;padding-right:5vw}
 .has-campaign-art .gender-carousel-controls{left:auto;width:315px;right:5vw;bottom:35px}
}
@media(max-width:1100px){
 .has-campaign-art .gender-hero-gallery{grid-area:1/1}
 .has-campaign-art .gender-hero-copy{grid-area:2/1;width:100%;padding:46px 26px 48px;text-shadow:none;background:#160e18}
 .mysterez-gender-men .has-campaign-art .gender-hero-copy{background:#101319}
 .has-campaign-art .gender-hero-copy h1{max-width:650px;font-size:clamp(50px,8vw,76px)}
 .has-campaign-art .gender-hero-copy>p:not(.section-kicker){max-width:500px}
 .has-campaign-art .gender-primary-link{max-width:440px}
 .has-campaign-art .gender-hero-slide picture img{aspect-ratio:4/3;object-fit:var(--mysterez-frame-fit,cover);object-position:var(--mysterez-framed-position,79% center)}
}
@media(max-width:760px){
 .has-campaign-art .gender-hero-slide picture img{aspect-ratio:4/5;object-fit:var(--mysterez-frame-fit,cover);object-position:var(--mysterez-framed-position,79% center)}
 .has-campaign-art .gender-slide-caption{padding:22px 24px 82px;min-height:150px}
 .has-campaign-art .gender-carousel-controls{left:24px;right:24px}
 .has-campaign-art .gender-hero-copy{padding:42px 24px 45px}
 .has-campaign-art .gender-hero-copy h1{font-size:clamp(44px,11.5vw,70px)}
}

/* 10.5.26.17: balanced logo spacing, a larger login mark, and centered footer. */
.site-header.has-centered-brand{--mysterez-brand-gap:12px;--mysterez-expanded-header-height:198px;height:198px;grid-template-rows:140px 58px}
.site-header.has-centered-brand>.wordmark{align-self:center;margin:0}
.site-header.has-centered-brand.is-scrolled{height:140px;grid-template-rows:92px 48px}
.site-header.has-centered-brand.is-scrolled>.wordmark{margin:0}
.mysterez-login-brand picture,.mysterez-login-brand img{width:min(230px,62vw);height:min(230px,62vw)}
.mysterez-login-brand{margin-bottom:24px}
.footer-top{flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.footer-top>.footer-wordmark{align-self:center;margin:0 auto}
.footer-top>p{max-width:100%;margin:0;text-align:center}
.mysterez-logo-shine{position:relative;overflow:hidden;isolation:isolate}
.mysterez-logo-shine::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 48%,rgba(255,255,255,.05) 53%,transparent 66%);transform:translateX(-110%);mix-blend-mode:screen;pointer-events:none;animation:mysterez-logo-shimmer 2.8s ease-in-out 1.1s 1 both}
@keyframes mysterez-logo-shimmer{0%,15%{transform:translateX(-110%);opacity:0}30%{opacity:.85}80%,100%{transform:translateX(110%);opacity:0}}
.gender-hero-gallery{touch-action:pan-y}
.gender-editorial-hero:focus-visible{outline:2px solid #a82040;outline-offset:-2px}
@media(max-width:760px){
 .site-header.has-centered-brand{--mysterez-expanded-header-height:154px;height:154px;grid-template-rows:108px 46px}
 .site-header.has-centered-brand.is-scrolled{height:128px;grid-template-rows:84px 44px}
 .mysterez-login-brand picture,.mysterez-login-brand img{width:min(196px,62vw);height:min(196px,62vw)}
}
@media(prefers-reduced-motion:reduce){.mysterez-logo-shine::after{animation:none!important;display:none}}

/* The same explicit gap is used above the mark and before the nav row. */
.site-header.has-centered-brand{--mysterez-brand-gap:20px;--mysterez-expanded-header-height:198px;grid-template-rows:116px 42px;row-gap:var(--mysterez-brand-gap);padding-top:var(--mysterez-brand-gap);padding-bottom:0;box-sizing:border-box}
.site-header.has-centered-brand>.wordmark{align-self:start}
.site-header.has-centered-brand>.desktop-nav,.site-header.has-centered-brand>.header-actions{align-self:start}
.site-header.has-centered-brand.is-scrolled{--mysterez-brand-gap:16px;grid-template-rows:68px 40px;height:140px;padding-top:var(--mysterez-brand-gap)}
@media(max-width:760px){
 .site-header.has-centered-brand{--mysterez-brand-gap:16px;--mysterez-expanded-header-height:154px;grid-template-rows:84px 38px;height:154px;padding-top:var(--mysterez-brand-gap)}
 .site-header.has-centered-brand.is-scrolled{--mysterez-brand-gap:16px;grid-template-rows:60px 36px;height:128px;padding-top:var(--mysterez-brand-gap)}
}
/* Constrain the shimmer to the transparent house artwork, never a white box. */
.mysterez-logo-shine::after{inset:0;mask-image:url('../images/mysterez-radial-minimal-v10.png');mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-image:url('../images/mysterez-radial-minimal-v10.png');-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;background-size:250% 100%;transform:none}
@keyframes mysterez-logo-shimmer{0%,15%{background-position:150% 0;opacity:0}30%{opacity:.85}80%,100%{background-position:-100% 0;opacity:0}}
.mysterez-login-dialog{justify-content:flex-start;justify-content:safe center}
.mysterez-login-dialog:not(.is-open) .mysterez-logo-shine::after{animation:none}
/* Keep expanded-menu offsets and the no-script hero fallback in step with the
   balanced header heights. Measured chrome variables take over after load. */
:root{--mysterez-hero-header-offset:198px;--mysterez-hero-top-chrome:232px}
.site-header.has-centered-brand+.mobile-menu{top:var(--mysterez-hero-top-chrome,232px)}
.site-header.has-centered-brand.is-scrolled+.mobile-menu{top:140px}
@media(max-width:760px){
 :root{--mysterez-hero-header-offset:154px;--mysterez-hero-top-chrome:184px}
 .site-header.has-centered-brand+.mobile-menu,.site-header.has-centered-brand:not(.is-scrolled)+.mobile-menu{top:var(--mysterez-hero-top-chrome,184px);max-height:calc(100svh - var(--mysterez-hero-top-chrome,184px))}
 .site-header.has-centered-brand.is-scrolled+.mobile-menu{top:128px;max-height:calc(100svh - 128px)}
}

/* 10.5.26.20: independent motion layers preserve arrival and masked shine.
   The link keeps its layout box; only its artwork moves inside that box. */
.site-header.has-centered-brand .mysterez-header-logo-motion{display:block;width:100%;height:100%;line-height:0;transform-origin:50% 50%;animation:mysterez-header-logo-drift 24s ease-in-out 1.1s infinite;transition:scale .45s ease,filter .45s ease}
@keyframes mysterez-header-logo-drift{0%,100%{transform:rotate(0deg)}25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}}
@media(hover:hover) and (pointer:fine){.site-header.has-centered-brand>.wordmark:hover .mysterez-header-logo-motion{scale:1.06;filter:drop-shadow(0 0 7px rgba(255,255,255,.28))}}
.site-header.has-centered-brand>.wordmark:focus-visible .mysterez-header-logo-motion{scale:1.06;filter:drop-shadow(0 0 7px rgba(255,255,255,.28))}
@media(prefers-reduced-motion:reduce){.site-header.has-centered-brand .mysterez-header-logo-motion{animation:none!important;transition:none!important;transform:none!important;scale:1!important;filter:none!important}}

/* 10.5.26.34: extra black space below the mobile action row, not wider gaps. */
@media(max-width:760px){
 :root{--mysterez-hero-header-offset:176px;--mysterez-hero-top-chrome:206px}
 .site-header.has-centered-brand{--mysterez-expanded-header-height:176px;height:176px;padding-bottom:16px;grid-template-rows:84px 44px}
 .site-header.has-centered-brand.is-scrolled{height:152px;padding-bottom:16px;grid-template-rows:60px 44px}
 .site-header.has-centered-brand+.mobile-menu,.site-header.has-centered-brand:not(.is-scrolled)+.mobile-menu{top:var(--mysterez-hero-top-chrome,206px);max-height:calc(100svh - var(--mysterez-hero-top-chrome,206px))}
 .site-header.has-centered-brand.is-scrolled+.mobile-menu{top:152px;max-height:calc(100svh - 152px)}
}

/* 2026-10-09 editorial patch: lower portraits only; retain the complete composed image. */
.gender-story--editorial .gender-story-image{background:#100d14}
.gender-story--editorial .gender-story-image a,.gender-story--editorial .gender-story-image picture{display:block}
.gender-story--editorial .gender-story-image img{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;object-position:center}
.gender-story--editorial .gender-story-image a:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.gender-story--editorial:not(.has-editorial-art){grid-template-columns:1fr}
.gender-story--editorial:not(.has-editorial-art) .gender-story-copy{max-width:850px;justify-self:center}