/* The Rail – hanging products + viewer. Logical properties; RTL-safe. */
.mm-rail{--r-bg:#f6f6f3;--r-ink:#0b0d12;position:relative;background:var(--r-bg);color:var(--r-ink);padding-block:clamp(2.5rem,7vw,5rem) 0;overflow:hidden;isolation:isolate}
.mm-rail__stage{position:relative;max-inline-size:1200px;margin-inline:auto;padding-inline:1rem}
.mm-rail__bar{position:absolute;inset-inline:0;inset-block-start:0;block-size:6px;border-radius:3px;background:linear-gradient(180deg,#e9e9e9,#9aa0a6 55%,#d7d9dc);box-shadow:0 8px 14px rgba(0,0,0,.08)}
.mm-rail__row{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:clamp(.2rem,1.4vw,1.2rem);align-items:flex-start}
.mm-rail__row li{flex:0 1 clamp(64px,12vw,160px);min-inline-size:0}
.mm-rail__it{all:unset;box-sizing:border-box;display:block;inline-size:100%;position:relative;padding-block-start:22px;cursor:pointer;transform-origin:50% 0;animation:mmRailSway 6s ease-in-out infinite;animation-delay:calc(var(--d,0) * -1.1s);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s,filter .3s;-webkit-tap-highlight-color:transparent}
.mm-rail__it img{display:block;inline-size:100%;block-size:auto;mix-blend-mode:multiply;filter:drop-shadow(0 14px 14px rgba(0,0,0,.12))}
.mm-rail__hook{position:absolute;inset-block-start:0;inset-inline-start:50%;inline-size:2px;block-size:26px;background:#8a8f96;translate:-50% 0}
.mm-rail__hook::after{content:"";position:absolute;inset-block-start:-3px;inset-inline-start:50%;translate:-50% 0;inline-size:9px;block-size:9px;border-radius:50%;border:2px solid #8a8f96;background:var(--r-bg)}
@keyframes mmRailSway{0%,100%{rotate:-1.1deg}50%{rotate:1.1deg}}
@media(hover:hover){.mm-rail__row:hover .mm-rail__it{opacity:.45;filter:blur(.4px)}.mm-rail__row .mm-rail__it:hover,.mm-rail__row .mm-rail__it:focus-visible{opacity:1;filter:none;transform:translateY(-8px) scale(1.07);animation-play-state:paused}}
.mm-rail__it:focus-visible{outline:2px solid var(--r-ink);outline-offset:4px;border-radius:6px}
.mm-rail__hint{margin:clamp(1.5rem,4vw,3rem) 0 .4rem;text-align:center;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(11,13,18,.5)}
.mm-rail__all{display:block;inline-size:max-content;margin:0 auto clamp(1.8rem,5vw,3rem);padding:.7rem 1.4rem;border:1px solid var(--r-ink);border-radius:999px;color:var(--r-ink);text-decoration:none;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
.mm-rail__all:hover,.mm-rail__all:focus-visible{background:var(--r-ink);color:#fff}
.mm-rail__tick{background:#c8ff2e;color:#0b0d12;overflow:hidden;white-space:nowrap;border-block-start:1px solid rgba(0,0,0,.2)}
.mm-rail__tick div{display:inline-flex;gap:2rem;padding:.55rem 1rem;animation:mmRailTick 38s linear infinite;font-size:.68rem;font-weight:800;letter-spacing:.2em}
.mm-rail__tick span::after{content:"•";margin-inline-start:2rem}
@keyframes mmRailTick{to{transform:translateX(-50%)}}
[dir=rtl] .mm-rail__tick div{animation-direction:reverse}

/* viewer */
.mm-rv{position:fixed;inset:0;z-index:99990;background:var(--r-bg,#f6f6f3);color:#0b0d12;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;overscroll-behavior:contain}
.mm-rv.is-on{opacity:1;visibility:visible;transition-delay:0s}
.mm-rv *{box-sizing:border-box}
.mm-rv__x{all:unset;position:absolute;inset-block-start:max(1rem,env(safe-area-inset-top));inset-inline-end:1.2rem;cursor:pointer;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.6rem}
.mm-rv__x:hover,.mm-rv__x:focus-visible{text-decoration:underline}
.mm-rv__stage{position:relative;inline-size:100%;block-size:min(62vh,640px);display:grid;place-items:center}
.mm-rv__g{position:absolute;inset-block:0;inline-size:min(26vw,300px);display:grid;place-items:center;opacity:.35;filter:blur(7px);scale:.78;pointer-events:none;transition:all .5s cubic-bezier(.2,.8,.2,1)}
.mm-rv__g img{max-inline-size:100%;max-block-size:78%;mix-blend-mode:multiply}
.mm-rv__g--p{inset-inline-start:max(3rem,8vw)}
.mm-rv__g--n{inset-inline-end:max(3rem,8vw)}
.mm-rv__c{position:relative;inline-size:min(44vw,460px);block-size:100%;display:grid;place-items:center;transform-origin:50% 0;animation:mmRailSway 7s ease-in-out infinite}
.mm-rv__c::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:50%;inline-size:2px;block-size:30px;background:#8a8f96;translate:-50% 0}
.mm-rv__c img{max-inline-size:100%;max-block-size:calc(100% - 30px);margin-block-start:30px;mix-blend-mode:multiply;filter:drop-shadow(0 26px 24px rgba(0,0,0,.16));transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),filter .35s}
.mm-rv__c img.sw{opacity:0;transform:scale(.96);filter:blur(8px)}
.mm-rv__tags{position:absolute;inset-block-start:34px;inset-inline-end:-2%;display:flex;gap:10px;align-items:flex-start;margin:0;padding:0;list-style:none}
.mm-rv__tags li{position:relative;padding-block-start:34px}
.mm-rv__tags li::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:50%;inline-size:1px;block-size:34px;background:#8a8f96}
.mm-rv__tags button{all:unset;cursor:pointer;display:block;inline-size:26px;block-size:84px;border-radius:3px;border:1px solid rgba(0,0,0,.35);writing-mode:vertical-rl;text-align:center;font-size:8px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;line-height:26px;transition:transform .2s;color:#fff;mix-blend-mode:normal}
.mm-rv__tags button[aria-pressed=true]{outline:2px solid #0b0d12;outline-offset:2px;transform:translateY(4px)}
.mm-rv__tags button:focus-visible{outline:2px solid #0b0d12;outline-offset:2px}
.mm-rv__ar{all:unset;position:absolute;inset-block-start:46%;inline-size:46px;block-size:46px;border:1px solid #0b0d12;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:18px;background:transparent;transition:background .2s,color .2s}
.mm-rv__ar:hover,.mm-rv__ar:focus-visible{background:#0b0d12;color:#fff}
.mm-rv__ar--p{inset-inline-start:max(1rem,6vw)}.mm-rv__ar--n{inset-inline-end:max(1rem,6vw)}
[dir=rtl] .mm-rv__ar{scale:-1 1}
.mm-rv__info{display:grid;justify-items:center;gap:.9rem;padding-inline:1rem;text-align:center}
.mm-rv__name{margin:0;font-family:"Arial Black","Archivo Black",Impact,system-ui,sans-serif;font-weight:900;font-size:clamp(1rem,3vw,1.5rem);letter-spacing:.01em;text-transform:uppercase}
.mm-rv__tg{display:inline-flex;border:1px solid #0b0d12;border-radius:999px;padding:3px}
.mm-rv__tg button{all:unset;cursor:pointer;padding:.4rem 1rem;border-radius:999px;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.mm-rv__tg button[aria-pressed=true]{background:#0b0d12;color:#fff}
.mm-rv__tg[hidden]{display:none}
.mm-rv__see{color:#0b0d12;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;padding:.5rem}
.mm-rv__inner{display:grid;gap:1.2rem;inline-size:100%;justify-items:center}
@media(max-width:700px){
	.mm-rail__row{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x proximity;padding-inline:.5rem;padding-block-end:.5rem;scrollbar-width:none}
	.mm-rail__row::-webkit-scrollbar{display:none}
	.mm-rail__row li{flex:0 0 30vw;scroll-snap-align:center}
	.mm-rail__bar{inset-inline:-100vw}
	.mm-rv__stage{block-size:56vh}
	.mm-rv__g{display:none}
	.mm-rv__c{inline-size:76vw}
	.mm-rv__ar{inset-block-start:auto;inset-block-end:5.5rem}
	.mm-rv__tags{inset-inline-end:2%}
}
@media(prefers-reduced-motion:reduce){.mm-rail__it,.mm-rv__c,.mm-rail__tick div{animation:none}.mm-rv,.mm-rv__c img,.mm-rv__g{transition:none}}
/* v4.18.1: definite image sizes so any photo fits the stage */
.mm-rv__c{align-content:start}
.mm-rv__c img{block-size:calc(100% - 30px);inline-size:auto;max-inline-size:76%;object-fit:contain;margin-block-start:30px}
.mm-rv__g img{block-size:78%;inline-size:auto;object-fit:contain}
.mm-rv__tags{inset-inline-end:2%}
@media(max-width:700px){.mm-rv__c img{max-inline-size:84%}.mm-rv__tags{inset-inline-end:0}}
.mm-rv__tags{inset-inline-end:auto;inset-inline-start:88%;gap:8px}
.mm-rv__tags button{inline-size:auto;block-size:auto;width:24px;height:84px;line-height:24px}
@media(max-width:700px){.mm-rv__tags{inset-inline-start:86%}}
@media(max-width:700px){.mm-rv__tags{inset-inline-start:auto;inset-inline-end:-6px;gap:5px}.mm-rv__tags button{width:20px;height:72px;line-height:20px;font-size:7px}}
