/* ================================================================
   REFERENCE HEADER / 2026-09-29
   Supplied desktop reference: 2047 x 235 px.
   7.2 accent + 43.2 utility + 120 masthead + 64.8 navigation.
   Only the header is overridden. Campaign and page styles are intact.
   The supplied logo letterforms are an embedded transparent brand asset;
   all navigation labels, icons and controls are independent live elements.
   ================================================================ */
:root {
 --reference-paper: #faf9f7;
 --reference-utility: #edede7;
 --reference-ink: #222823;
 --reference-muted: #6c6f68;
 --reference-gutter: clamp(28px,3.63556vw,74.4px);
 --reference-optical: clamp(0px,1.17245vw,24px);
 --reference-sans: "Avenir Next",Avenir,Lato,"Segoe UI","Noto Sans","PingFang SC","Microsoft YaHei",sans-serif;
}
html { scroll-padding-top: 205px; }
.mba-reference-accent {
 position:relative; z-index:2; height:7.2px;
 background:#1a365b; box-shadow:0 3px 6px rgba(34,40,35,.32);
}
.utility.mba-utility.mba-reference-utility {
 display:flex; flex-direction:row; align-items:center;
 justify-content:space-between; gap:24px;
 width:100%; height:43.2px; min-height:43.2px;
 padding:0 calc(var(--reference-gutter) + var(--reference-optical)) 0 var(--reference-gutter);
 background:var(--reference-utility); color:var(--reference-muted);
 font:400 13.2px/1.5 var(--reference-sans);
 letter-spacing:.08em; text-transform:uppercase;
}
.mba-reference-utility .reference-utility-brand,
.mba-reference-utility .reference-utility-note {
 display:block; width:auto; max-width:none; padding:0; margin:0;
 font:inherit; letter-spacing:inherit; white-space:nowrap;
 overflow:visible; text-overflow:clip;
}
.mba-reference-utility .reference-utility-note {letter-spacing:.06em;text-align:right;}
.header.mba-header.mba-reference-header {
 position:sticky; top:0; z-index:30;
 width:100%; background:var(--reference-paper); color:var(--reference-ink);
 border:0; box-shadow:none; backdrop-filter:none;
}
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))) {
 .header.mba-header.mba-reference-header {background:transparent;}
 /* A separate glass layer lets the dropdown blur the page beneath it. */
 .header.mba-header.mba-reference-header::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(250,249,247,.78);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
 }
}
.mba-header.mba-reference-header .masthead {
 display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
 align-items:center; column-gap:26.4px; row-gap:0;
 width:100%; max-width:none; height:120px; margin:0;
 padding:0 calc(var(--reference-gutter) + var(--reference-optical)) 0 var(--reference-gutter);
}
.mba-header.mba-reference-header .header-sub {
 display:block; grid-column:1; grid-row:1; justify-self:start;
 margin:0; padding:0; font:400 14.4px/1.5 var(--reference-sans);
 letter-spacing:.07em; white-space:nowrap; color:var(--reference-muted);
}
.mba-header.mba-reference-header .brand {
 display:block; grid-column:2; grid-row:1; justify-self:center;
 width:364px; height:72px; max-width:none; margin:0; padding:0;
 font-size:0; line-height:0; letter-spacing:0;
 text-align:center; white-space:nowrap; position:relative; left:.5px; top:-.375px;
}
.mba-header.mba-reference-header .brand-reference-wordmark {
 display:block; width:100%; height:100%; max-width:none; margin:0;
 object-fit:contain; border:0; filter:none;
}
.mba-header.mba-reference-header .header-tools {
 display:flex; grid-column:3; grid-row:1; justify-self:end;
 align-items:center; justify-content:flex-end;
 flex-wrap:nowrap; gap:7.2px; min-width:0; margin:0; padding:0;
}
.mba-header.mba-reference-header .icon-btn {
 position:relative; display:inline-flex; flex:none;
 align-items:center; justify-content:center;
 width:52.8px; height:52.8px; min-width:52.8px;
 padding:0; margin:0; background:transparent; border:0; border-radius:50%;
 color:var(--reference-ink); transition:background .2s ease;
}
.mba-header.mba-reference-header .icon-btn:hover {background:#eeeee9;}
.mba-header.mba-reference-header .icon-btn svg {
 width:26.4px; height:26.4px; stroke:currentColor;
 stroke-width:1.35; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.mba-header.mba-reference-header .bag-count {
 position:absolute; top:1.2px; right:2.4px;
 min-width:20.4px; height:20.4px; padding:0 3px;
 font:400 12px/20.4px var(--reference-sans);
 letter-spacing:0; text-align:center; border-radius:50%;
 background:var(--reference-ink); color:#fff;
}
.mba-header.mba-reference-header .language-switch {
 display:inline-flex; flex:none; align-items:center; justify-content:center;
 gap:5.5px; height:52.8px; min-height:52.8px;
 margin:0 0 0 7.2px; padding:0 7.2px;
 font:400 15.6px/1.4 var(--reference-sans); letter-spacing:.035em;
 background:transparent; border:0; border-radius:0; white-space:nowrap;
}
.mba-header.mba-reference-header .language-switch span {color:var(--reference-muted);}
.mba-header.mba-reference-header .language-switch .is-active {color:var(--reference-ink);}
.mba-header.mba-reference-header .language-switch:hover .is-active {color:var(--reference-ink);}
.mba-header.mba-reference-header .main-nav {
 display:flex; align-items:center; justify-content:center;
 flex-wrap:nowrap; gap:clamp(24px,2.69663vw,55.2px);
 width:100%; height:64.8px; min-height:64.8px;
 margin:0; padding:0 var(--reference-optical) 0 0;
 font:400 16.8px/1.2 var(--reference-sans);
 letter-spacing:.055em; text-transform:uppercase;
 color:var(--reference-ink);
}
.mba-header.mba-reference-header .nav-link {
 display:inline-flex; position:relative; flex:none;
 align-items:center; justify-content:center; gap:7.2px;
 height:64.8px; min-height:44px; margin:0; padding:0;
 font:inherit; font-weight:400; letter-spacing:inherit;
 color:inherit; background:transparent; border:0; border-radius:0;
 text-transform:uppercase; white-space:nowrap;
}
.mba-header.mba-reference-header .nav-collections {padding:0 7.2px;letter-spacing:0;}
.mba-header.mba-reference-header .nav-link svg {
 width:14.4px; height:14.4px; flex:none; stroke-width:1.35;
}
.mba-header.mba-reference-header .nav-link::after {
 content:""; position:absolute; left:0; right:100%; bottom:10.8px;
 height:1px; background:currentColor; transition:right .22s ease;
}
.mba-header.mba-reference-header .nav-link:hover::after,
.mba-header.mba-reference-header .nav-link[aria-current="page"]::after,
.mba-header.mba-reference-header .nav-link[aria-expanded="true"]::after {right:0;}
.mba-header.mba-reference-header .mobile-menu {display:none;}
.mba-header.mba-reference-header .mega {
 top:100%; background:var(--reference-paper);
 padding-left:var(--reference-gutter);
 padding-right:calc(var(--reference-gutter) + var(--reference-optical));
 border-top:1px solid #e7e6e0;
}
.mba-header.mba-reference-header .mega[hidden] {display:none;}
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))) {
 .mba-header.mba-reference-header .mega {
  background:rgba(250,249,247,.78);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
 }
}
html:lang(zh) .mba-header.mba-reference-header .main-nav {
 font-family:var(--reference-sans); font-size:16.8px;
 letter-spacing:.08em; gap:clamp(28px,3.5vw,65px);
}
@media(min-width:1101px) and (max-width:1340px) {
 .mba-header.mba-reference-header .header-sub {font-size:12.5px;}
 .mba-header.mba-reference-header .brand {width:336px;height:66.46px;}
 .mba-header.mba-reference-header .icon-btn {width:44px;height:44px;min-width:44px;}
 .mba-header.mba-reference-header .header-tools {gap:4px;}
 .mba-header.mba-reference-header .main-nav {font-size:15px;gap:30px;}
 .mba-header.mba-reference-header .language-switch {font-size:14px;margin-left:2px;}
}
@media(max-width:1100px) {
 :root {--reference-optical:0px;--reference-gutter:28px;}
 html {scroll-padding-top:118px;}
 .utility.mba-utility.mba-reference-utility {height:36px;min-height:36px;font-size:10.5px;gap:20px;}
 .mba-header.mba-reference-header .masthead {
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  height:100px;column-gap:14px;
 }
 .mba-header.mba-reference-header .header-sub,
 .mba-header.mba-reference-header .main-nav,
 .mba-header.mba-reference-header .mega {display:none;}
 .mba-header.mba-reference-header .mobile-menu {display:inline-flex;grid-column:1;grid-row:1;justify-self:start;}
 .mba-header.mba-reference-header .brand {width:324px;height:64.09px;}
 .mba-header.mba-reference-header .header-tools {gap:3px;}
 .mba-header.mba-reference-header .header-wishlist {display:none;}
 .mba-header.mba-reference-header .icon-btn {width:44px;height:44px;min-width:44px;}
 .mba-header.mba-reference-header .language-switch {height:44px;min-height:44px;margin-left:2px;font-size:14px;}
}
@media(max-width:767px) {
 :root {--reference-gutter:16px;}
 html {scroll-padding-top:106px;}
 .mba-reference-accent {height:4px;box-shadow:0 2px 5px #22282326;}
 .utility.mba-utility.mba-reference-utility {
  height:31px;min-height:31px;padding:0 12px;justify-content:center;gap:0;
 }
 .mba-reference-utility .reference-utility-brand {display:none;}
 .mba-reference-utility .reference-utility-note {
  display:block;width:auto;max-width:100%;font-size:9.4px;
  letter-spacing:.055em;line-height:1.4;text-align:center;white-space:nowrap;
 }
 .mba-header.mba-reference-header .masthead {
  position:relative;height:87px;padding:0 12px;
  grid-template-columns:44px minmax(0,1fr) 44px;column-gap:0;
 }
 .mba-header.mba-reference-header .brand {
  position:absolute;grid-column:auto;grid-row:auto;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(166px,46vw,290px);height:auto;aspect-ratio:364/72;
 }
 .mba-header.mba-reference-header .header-tools {gap:0;}
 .mba-header.mba-reference-header .icon-btn {width:44px;height:44px;min-width:44px;}
 .mba-header.mba-reference-header .icon-btn svg {width:23px;height:23px;}
 .mba-header.mba-reference-header .header-search {display:inline-flex;}
 .mba-header.mba-reference-header .header-wishlist,
 .mba-header.mba-reference-header .language-switch {display:none;}
 .mba-header.mba-reference-header .bag-count {
  top:0;right:0;min-width:17px;height:17px;font-size:10px;line-height:17px;
 }
}
@media(max-width:399px) {
 .mba-header.mba-reference-header .masthead {grid-template-columns:44px minmax(0,1fr) 44px;}
 .mba-header.mba-reference-header .brand {width:clamp(176px,54vw,213px);}
}
@media(prefers-reduced-motion:reduce) {
 .mba-header.mba-reference-header :is(.nav-link::after,.icon-btn) {transition:none;}
}
/* Temporarily hide these navigation entries and the preview shortcut. */
.mba-header.mba-reference-header .main-nav a[href="#/collection?cat=home"],
.mba-header.mba-reference-header .main-nav a[href="#/collection?cat=body"],
.nav-mobile-link[href="#/collection?cat=home"],
.nav-mobile-link[href="#/collection?cat=body"],
.demo-launch {display:none;}

/* Extend the homepage artwork behind the existing header. */
:root {--hero-header-offset:192px;}
body[data-page="home"] #main {margin-top:calc(0px - var(--hero-header-offset));}
body[data-page="home"] .hero.hero-carousel {height:calc(clamp(468px,35.2vw,775px) + var(--hero-header-offset));}
body[data-page="home"] .hero-carousel .hero-copy.wrap {top:calc(var(--hero-header-offset) + (100% - var(--hero-header-offset)) * .187);}
body[data-page="home"] .header.mba-header.mba-reference-header::before {background:rgba(250,249,247,.5);}
.hero-carousel .hero-art video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
body[data-page="home"] .hero-carousel .hero-art :is(img,video) {object-position:var(--art-focus,center) bottom;}
@media(max-width:1100px) {
 :root {--hero-header-offset:107.2px;}
}
@media(max-width:767px) {
 :root {--hero-header-offset:91px;}
 body[data-page="home"] .hero.hero-carousel {height:auto;}
 body[data-page="home"] .hero-carousel .hero-track {height:calc(clamp(300px,82vw,465px) + var(--hero-header-offset));}
 body[data-page="home"] .hero-carousel .hero-copy.wrap {top:auto;}
 body[data-page="home"] .hero-carousel .hero-controls {top:calc(clamp(300px,82vw,465px) + var(--hero-header-offset) - 57px);}
 body[data-page="home"] .hero-carousel .hero-art :is(img,video) {object-position:82% bottom;}
}
