/* All content paints in its final usable state before optional enhancement. */
.metoin-redesign{--mr-motion-top:90px}
.metoin-redesign .mr-header-shell{position:sticky;top:0;z-index:100}
.metoin-redesign .mr-header-shell .mr-header{position:relative;top:auto}
.metoin-redesign .mr-home{overflow:clip}
.metoin-redesign .mr .mr-motion-hero h1 span{display:block}
.metoin-redesign .mr .mr-chapter{padding:64px 0;min-height:85svh;display:grid;align-items:center}
.metoin-redesign .mr-chapter-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,6vw,88px);align-items:center}
.metoin-redesign .mr-chapter-copy h2{font-size:clamp(36px,4.5vw,68px);line-height:1.05;letter-spacing:-.035em;margin:20px 0}
.metoin-redesign .mr-chapter-copy p{font-size:18px;max-width:38ch;color:#555}
.metoin-redesign .mr-chapter-photo{margin:0;position:relative;overflow:hidden;background:transparent}
.metoin-redesign .mr-chapter-photo img{display:block;width:100%;height:auto;object-fit:contain}
.metoin-redesign .mr-fabric-labels{position:absolute;inset:auto 20px 20px;display:flex;flex-wrap:wrap;gap:8px}
.metoin-redesign .mr-fabric-labels span{background:#fff;color:#151515;padding:9px 14px;font-size:13px}
.metoin-redesign .mr-big-type{font-size:clamp(44px,8vw,112px);line-height:1.05;letter-spacing:-.05em;padding-block:72px;color:#151515}
.metoin-redesign .mr-pdp-story{grid-column:1/-1;width:100%;min-width:0}
.metoin-redesign .mr-pack{padding:48px 0}
.metoin-redesign .mr-pack-views{display:flex;align-items:center;padding:32px 16px;isolation:isolate}
.metoin-redesign .mr-pack-views figure{width:36%;margin:0 -2%;aspect-ratio:1;background:#fff;box-shadow:0 8px 24px #0000000b;transform:translateY(-8px)}
.metoin-redesign .mr-pack-views figure:nth-child(2){transform:translateY(12px);z-index:1}
.metoin-redesign .mr-pack-views img{width:100%;height:100%;object-fit:contain}
@keyframes mr-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mr-unmask{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@keyframes mr-focus{from{opacity:.25;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
@keyframes mr-fabric{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes mr-hero-line{from{transform:translateY(8px)}to{transform:none}}
@keyframes mr-hero-scale{from{transform:translateY(10px) scale(.85)}to{transform:translateY(-12px) scale(1)}}
@keyframes mr-hero-exit{0%,75%{opacity:1}100%{opacity:0}}
@keyframes mr-rail{to{transform:translateX(calc(-1 * var(--mr-rail-distance,0px)))}}
@keyframes mr-card-center{0%,100%{transform:scale(.96)}50%{transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){
 .metoin-redesign.mr-motion-ready [data-motion-enter].mr-motion-pending{opacity:0}
 .metoin-redesign .mr-motion-in .mr-chapter-copy>*{animation:mr-enter 500ms both}
 .metoin-redesign .mr-motion-in .mr-chapter-copy p:nth-of-type(1){animation-delay:80ms}
 .metoin-redesign .mr-motion-in .mr-chapter-copy p:nth-of-type(2){animation-delay:160ms}
 .metoin-redesign .mr-motion-in .mr-chapter-photo{animation:mr-unmask 650ms both}
 .metoin-redesign .mr-motion-in .mr-fabric-labels span,.metoin-redesign .mr-motion-in.mr-pack figure{animation:mr-enter 500ms both}
 .metoin-redesign .mr-motion-in .mr-fabric-labels span:nth-child(2),.metoin-redesign .mr-motion-in.mr-pack figure:nth-child(2){animation-delay:80ms}
 .metoin-redesign .mr-motion-in .mr-fabric-labels span:nth-child(3),.metoin-redesign .mr-motion-in.mr-pack figure:nth-child(3){animation-delay:160ms}
 .metoin-redesign .mr-motion-in.mr-big-type{animation:mr-focus 650ms both}
 .metoin-redesign .mr-motion-in .mr-ken-burns img{animation:mr-fabric 700ms ease-out both}
}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .metoin-redesign .mr .mr-motion-hero{min-height:125svh;view-timeline-name:--mr-hero;view-timeline-axis:block}
 .metoin-redesign .mr .mr-hero-stage{position:sticky;top:var(--mr-motion-top);min-height:calc(100svh - var(--mr-motion-top));padding-block:32px}
 .metoin-redesign .mr-rail-enhanced{height:var(--mr-rail-height,160svh);view-timeline-name:--mr-rail;view-timeline-axis:block}
 .metoin-redesign .mr-rail-enhanced .mr-rail-stage{position:sticky;top:var(--mr-motion-top);overflow:hidden;padding-block:24px}
 .metoin-redesign .mr-rail-enhanced .grid-3{display:flex;gap:24px;width:max-content}
 .metoin-redesign .mr-rail-enhanced .card{flex:0 0 300px;width:300px;opacity:1!important}
 .metoin-redesign .mr-rail-enhanced .card-img{aspect-ratio:4/3}
 .metoin-redesign .mr-rail-enhanced .card-img img{height:100%;object-fit:contain}
 .metoin-redesign .mr-rail-enhanced .card[hidden]{display:none!important}
 .metoin-redesign.mr-motion-fallback .hero-photo{transform:translateY(calc(10px - var(--mr-p,0) * 22px)) scale(calc(.85 + var(--mr-p,0) * .15));opacity:var(--mr-hero-opacity,1)}
 .metoin-redesign.mr-motion-fallback .mr-rail-enhanced .grid-3{transform:translateX(calc(-1 * var(--mr-p,0) * var(--mr-rail-distance,0px)))}
 .metoin-redesign.mr-motion-fallback .mr-rail-enhanced .card{transform:scale(var(--mr-card-scale,1))}
 @supports(animation-timeline:view()){
  .metoin-redesign .mr-motion-hero .hero-photo{animation:mr-hero-scale linear both,mr-hero-exit linear both;animation-timeline:--mr-hero;animation-range:contain}
  .metoin-redesign .mr-motion-hero h1 span{animation:mr-hero-line linear both,mr-hero-exit linear both;animation-timeline:--mr-hero;animation-range:contain 0% contain 18%,contain}
  .metoin-redesign .mr-motion-hero h1 span:nth-child(2){animation-range:contain 5% contain 25%,contain}
  .metoin-redesign .mr-rail-enhanced .grid-3{animation:mr-rail linear both;animation-timeline:--mr-rail;animation-range:contain}
  .metoin-redesign .mr-rail-enhanced .card{animation:mr-card-center linear both;animation-timeline:--mr-rail;animation-range:var(--mr-card-start,0%) var(--mr-card-end,100%)}
 }
}
@media(max-width:900px){
 .metoin-redesign .mr .mr-chapter{min-height:0;padding-block:40px}
 .metoin-redesign .mr-chapter-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .metoin-redesign .mr-chapter-copy h2{font-size:38px}
 .metoin-redesign .mr-product-story .grid-3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:4px 0 20px;max-width:100%}
 .metoin-redesign .mr-product-story .card{flex:0 0 86%;scroll-snap-align:start;transform:none}
 .metoin-redesign .mr-motion-in .mr-chapter-photo{animation:mr-enter 400ms both}
 .metoin-redesign .mr-motion-in .mr-ken-burns img{animation:none}
 .metoin-redesign .mr-pack-views{padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){
 .metoin-redesign [data-motion-enter],.metoin-redesign [data-motion-enter] *,.metoin-redesign .mr-motion-hero *{animation:none!important;transition:none!important;opacity:1!important;filter:none!important;clip-path:none!important;transform:none!important}
 .metoin-redesign .mr-product-story{height:auto!important}
 .metoin-redesign .mr-rail-stage{position:static!important}
 .metoin-redesign .mr-product-story .grid-3{transform:none!important;width:auto!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
}

/* Buy controls precede long descriptions; none participate in entrance animation. */
.metoin-redesign.single-product .summary{display:flex;flex-direction:column}
.metoin-redesign.single-product .summary>.woocommerce-product-details__short-description{order:8}
.metoin-redesign.single-product .summary>.mr-attributes{order:9}
.metoin-redesign.single-product .summary>.product_meta{order:10}
.metoin-redesign.single-product .summary .mr-brand{margin:8px 0}
.metoin-redesign.single-product .summary form.cart{margin-top:12px}

@media(prefers-reduced-motion:no-preference){
 .metoin-redesign .woocommerce-product-gallery__image img{transition:opacity 200ms ease,transform 200ms ease}
 .metoin-redesign .woocommerce-product-gallery__image img.mr-image-loading{transform:scale(.985)}
}

@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .metoin-redesign.mr-motion-fallback .mr-motion-hero h1 span{transform:translateY(calc(8px - var(--mr-p,0) * 8px));opacity:var(--mr-hero-opacity,1)}
 .metoin-redesign.mr-motion-fallback .mr-motion-hero h1 span:nth-child(2){transform:translateY(calc(12px - var(--mr-p,0) * 12px))}
}

/* V2 has one screen of hero; reuse the existing native/fallback progress. */
@keyframes mr-home-v2-float{from{transform:translateY(0)}to{transform:translateY(-18px)}}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 body.metoin-redesign.mr-home-v2 .mr-home .mr-motion-hero{min-height:92svh}
 body.metoin-redesign.mr-home-v2 .mr-home .mr-hero-stage{position:relative;top:auto}
 body.metoin-redesign.mr-home-v2 .mr-home .mr-motion-hero h1 span{animation:none;transform:none;opacity:1}
 body.metoin-redesign.mr-home-v2.mr-motion-fallback .mr-home .hero-photo{transform:translateY(calc(var(--mr-p,0) * -18px));opacity:1}
 @supports(animation-timeline:view()){
  body.metoin-redesign.mr-home-v2 .mr-home .hero-photo{animation:mr-home-v2-float linear both;animation-timeline:--mr-hero;animation-range:exit 0% exit 100%}
 }
}
@media(prefers-reduced-motion:reduce){
 body.metoin-redesign.mr-home-v2 .mr-home .card-img img{transition:none;transform:none}
}