.mm-slider{position:relative;display:block;aspect-ratio:16 / 9;max-height:88vh;min-height:520px;width:100%;overflow:hidden;background:#2a2a2a;color:var(--on-accent);font-family:var(--font-sans)}.mm-slider__track{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:pan-y}.mm-slider__slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;visibility:hidden}.mm-slider__slide.is-on{opacity:1;visibility:visible}.mm-motion .mm-slider__slide{transition:opacity .7s var(--ease-settle, cubic-bezier(.22, 1, .36, 1)),visibility 0s linear .7s}.mm-motion .mm-slider__slide.is-on{transition:opacity .7s var(--ease-settle, cubic-bezier(.22, 1, .36, 1)),visibility 0s}.mm-slider__slide picture{display:contents}.mm-slider__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.mm-slider__slide:after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(#14141400,#14141480);pointer-events:none}.mm-slider__copy{position:absolute;z-index:1;left:50%;bottom:96px;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(620px,calc(100% - 40px));transform:translate(-50%);text-align:center}.mm-slider__title{margin:0;font-family:var(--font-heading);font-size:var(--head-2xl);font-weight:500;line-height:1.05;color:inherit;text-wrap:balance}.mm-slider__line{margin:0;font-size:var(--text-body);letter-spacing:.2px;line-height:1.6}.mm-slider__link{display:inline-block;margin-top:4px;padding-bottom:4px;border-bottom:var(--border-width, 1px) solid currentColor;font-size:var(--text-xs);letter-spacing:1.8px;text-transform:uppercase;color:inherit;text-decoration:none}:lang(th) .mm-slider__link{letter-spacing:0}.mm-slider__link:focus-visible,.mm-slider__btn:focus-visible,.mm-slider__dot:focus-visible{outline:2px solid var(--on-accent);outline-offset:3px}.mm-slider__btn{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#efecec33;color:var(--on-accent);cursor:pointer;transition:background-color .15s ease}.mm-slider__btn:hover{background:#efecec52}.mm-slider__btn svg{width:16px;height:16px}.mm-slider__btn[hidden]{display:none}.mm-slider__prev{left:40px;top:50%;margin-top:-22px}.mm-slider__next{right:40px;top:50%;margin-top:-22px}.mm-slider__pause{right:40px;bottom:30px}.mm-slider__pause .mm-icon-play,.mm-slider.is-held .mm-icon-pause{display:none}.mm-slider.is-held .mm-icon-play{display:block}.mm-slider__dots{position:absolute;z-index:2;left:50%;bottom:40px;display:flex;gap:10px;transform:translate(-50%)}.mm-slider__dot{position:relative;width:56px;height:24px;padding:0;border:0;background:none;cursor:pointer}.mm-slider__dot:before,.mm-slider__dot span{content:"";position:absolute;left:0;top:11px;height:2px;border-radius:2px}.mm-slider__dot:before{right:0;background:#efecec59}.mm-slider__dot span{width:0;background:var(--on-accent)}.mm-slider__dot.is-done span,.mm-slider:not(.is-auto) .mm-slider__dot.is-on span{width:100%}.mm-slider.is-auto .mm-slider__dot.is-on span{animation:mm-slide-fill var(--mm-slide-ms, 6s) linear forwards}.mm-slider.is-paused .mm-slider__dot.is-on span{animation-play-state:paused}@keyframes mm-slide-fill{0%{width:0}to{width:100%}}@media(prefers-reduced-motion:reduce){.mm-slider.is-auto .mm-slider__dot.is-on span{animation:none;width:100%}}@media(max-width:749px){.mm-slider{aspect-ratio:4 / 5;max-height:none;min-height:0}.mm-slider__copy{bottom:72px}.mm-slider__prev,.mm-slider__next{display:none}.mm-slider__dots{bottom:26px;gap:8px}.mm-slider__dot{width:40px}.mm-slider__pause{right:12px;bottom:16px}}.mm-slider--pair{aspect-ratio:auto;max-height:none;min-height:0;max-width:min(100%,160vh);margin:0 auto;overflow:hidden;background:none;color:var(--ink);--per: 2;--at: 0}.mm-slider--pair .mm-slider__track{position:relative;inset:auto;display:flex;gap:2px;transform:translate(calc(var(--at) * (-100% - 2px) / var(--per)))}.mm-motion .mm-slider--pair .mm-slider__track{transition:transform .7s var(--ease-settle, cubic-bezier(.22, 1, .36, 1))}.mm-slider--pair .mm-slider__slide{position:relative;inset:auto;flex:0 0 calc((100% - (var(--per) - 1) * 2px) / var(--per));aspect-ratio:4 / 5;opacity:1;visibility:visible;transition:none;background:var(--surface-raised)}.mm-slider--pair .mm-slider__slide:after{display:none}.mm-slider--pair .mm-slider__bar{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,auto);align-items:center;gap:24px;padding:28px 40px 36px}.mm-slider--pair .mm-slider__caption{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px}.mm-slider--pair .mm-slider__caption[hidden]{display:none}.mm-slider--pair .mm-slider__title{font-size:var(--head-lg)}.mm-slider--pair :is(.mm-slider__btn,.mm-slider__dots){position:static;margin:0;transform:none}.mm-slider--pair .mm-slider__btn{background:none;border:var(--border-width, 1px) solid var(--hairline);color:var(--ink)}.mm-slider--pair .mm-slider__btn:hover{background:var(--surface-raised)}.mm-slider--pair .mm-slider__bar>*{grid-row:1}.mm-slider--pair .mm-slider__captions{grid-column:1}.mm-slider--pair .mm-slider__dots{grid-column:2}.mm-slider--pair .mm-slider__prev{grid-column:3}.mm-slider--pair .mm-slider__next{grid-column:4}.mm-slider--pair .mm-slider__pause{grid-column:5}.mm-slider--pair .mm-slider__dot:before{background:var(--hairline)}.mm-slider--pair .mm-slider__dot span{background:var(--ink)}.mm-slider--pair :is(.mm-slider__link,.mm-slider__btn,.mm-slider__dot):focus-visible{outline-color:var(--ink)}@media(max-width:749px){.mm-slider--pair{--per: 1}.mm-slider--pair .mm-slider__bar{grid-template-columns:minmax(0,1fr) auto;gap:14px 12px;padding:20px var(--space-20, 20px) 28px}.mm-slider--pair .mm-slider__captions{grid-column:1 / -1}.mm-slider--pair .mm-slider__bar>*{grid-row:2}.mm-slider--pair .mm-slider__captions{grid-row:1}.mm-slider--pair .mm-slider__dots{grid-column:1}.mm-slider--pair .mm-slider__pause{grid-column:2;position:static}}@media(pointer:coarse){.mm-slider__dot,.mm-slider--pair .mm-slider__dot{width:44px;height:var(--hit-target, 44px)}.mm-slider__dot:before,.mm-slider__dot span{top:21px}.mm-slider__dots,.mm-slider--pair .mm-slider__dots{gap:4px}}
/*# sourceMappingURL=/cdn/shop/t/24/assets/mm-slider.css.map */