/* MIXTYS v6.16 — isolated, viewport-aware home pages */

:root{
  --mx-banner-h:0px;
  --mx-page-h:calc(100dvh - var(--mx-banner-h) - var(--header-h,74px));
  --mx-page-ease:cubic-bezier(.22,.72,.18,1);
}

html.mx-home-pager,
body.mx-home-pager{
  height:100%;
  overflow:hidden!important;
  overscroll-behavior:none;
}

body.mx-home-pager{
  padding-bottom:0!important;
}

body.mx-home-pager #app{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  width:100%;
  height:calc(100dvh - var(--mx-banner-h));
  min-height:0;
  overflow:hidden;
}

body.mx-home-pager .site-header{
  position:relative;
  top:auto;
  flex:none;
}

body.mx-home-pager main.mx-page-stack{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow-x:clip;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
  scroll-padding:0;
  scrollbar-gutter:stable;
  touch-action:pan-y;
  background:var(--ivory);
}

.mx-page-frame{
  position:relative;
  isolation:isolate;
  width:100%;
  min-width:0;
  min-height:var(--mx-page-h);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:var(--ivory);
}

.mx-page-frame>section,
.mx-page-frame>footer{
  width:100%;
  min-width:0;
  max-width:100%;
}

/* Short editorial sections grow to one complete screen, so the next page
   cannot appear below them. Long mobile content keeps its natural height. */
.mx-page-frame>.hero,
.mx-page-frame>.curated,
.mx-page-frame>.shop-look,
.mx-page-frame>.ai-entry,
.mx-page-frame>.concierge,
.mx-page-frame>.journal,
.mx-page-frame>.footer{
  min-height:var(--mx-page-h)!important;
}

.mx-page-frame>.hero.hero-v54{
  height:var(--mx-page-h)!important;
  max-height:none!important;
}

.mx-page-frame>.journal>div,
.mx-page-frame>.journal>article{
  min-height:var(--mx-page-h);
}

.mx-page-frame>.footer{
  align-content:center;
}

/* Premium page change without changing layout geometry. */
.mx-page-frame.is-active>section,
.mx-page-frame.is-active>footer{
  animation:mx-page-arrive .72s var(--mx-page-ease) both;
}

.mx-page-frame.is-active:after{
  content:"";
  position:absolute;
  z-index:8;
  left:clamp(18px,5vw,90px);
  right:clamp(18px,5vw,90px);
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(186,126,57,.58),transparent);
  transform-origin:center;
  animation:mx-page-line .82s var(--mx-page-ease) both;
}

@keyframes mx-page-arrive{
  from{opacity:.88;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes mx-page-line{
  from{opacity:0;transform:scaleX(.18)}
  to{opacity:1;transform:scaleX(1)}
}

.mx-page-nav{
  position:fixed;
  z-index:145;
  right:clamp(12px,1.5vw,28px);
  top:calc(var(--mx-banner-h) + var(--header-h,74px) + 50%);
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 8px;
  border:1px solid rgba(119,82,46,.12);
  border-radius:999px;
  background:rgba(255,252,247,.76);
  box-shadow:0 16px 42px rgba(61,42,24,.09);
  backdrop-filter:blur(14px);
}

.mx-page-nav button{
  position:relative;
  width:10px;
  height:10px;
  min-width:10px;
  padding:0;
  border:1px solid rgba(73,54,37,.46);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:transform .28s var(--mx-page-ease),background .28s ease,border-color .28s ease;
}

.mx-page-nav button:before{
  content:attr(aria-label);
  position:absolute;
  right:20px;
  top:50%;
  transform:translate(7px,-50%);
  width:max-content;
  max-width:180px;
  padding:6px 9px;
  border-radius:9px;
  background:#211a14;
  color:#fff;
  font-size:11px;
  line-height:1;
  letter-spacing:.03em;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}

.mx-page-nav button:hover:before,
.mx-page-nav button:focus-visible:before{
  opacity:1;
  transform:translate(0,-50%);
}

.mx-page-nav button.active{
  border-color:#bd8039;
  background:#bd8039;
  transform:scale(1.35);
}

body.mx-home-pager .scroll-progress{
  top:var(--mx-banner-h);
}

@media(max-width:820px){
  :root{--mx-page-h:calc(100dvh - var(--mx-banner-h) - 56px)}

  body.mx-home-pager #app{
    padding-bottom:48px;
  }

  body.mx-home-pager main.mx-page-stack{
    scrollbar-gutter:auto;
    scroll-snap-type:y proximity;
  }

  .mx-page-frame{
    min-height:var(--mx-page-h);
  }

  .mx-page-frame>.hero.hero-v54{
    height:auto!important;
    min-height:var(--mx-page-h)!important;
  }

  .mx-page-frame>.journal>div,
  .mx-page-frame>.journal>article{
    min-height:0;
  }

  .mx-page-nav{
    right:7px;
    top:calc(var(--mx-banner-h) + 50%);
    gap:8px;
    padding:9px 6px;
    background:rgba(255,252,247,.66);
  }

  .mx-page-nav button{
    width:8px;
    height:8px;
    min-width:8px;
  }

  .mx-page-nav button:before{display:none}
}

@media(prefers-reduced-motion:reduce){
  body.mx-home-pager main.mx-page-stack{scroll-behavior:auto}
  .mx-page-frame.is-active>section,
  .mx-page-frame.is-active>footer,
  .mx-page-frame.is-active:after{animation:none!important}
  .mx-page-nav button{transition:none!important}
}