:root{--mobile-menu-bg: #FEF9F5;--mobile-menu-expanded-bg: #EFE9F5;--mobile-menu-hover-bg: #E2DBFF;--mobile-menu-text: #283047;--mobile-menu-shadow: #7C7C7C}.mobile-menu{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000;pointer-events:none}.mobile-menu[hidden]{display:none}.mobile-menu--open{pointer-events:auto}.mobile-menu__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#87878780;opacity:0;transition:opacity .2s ease;cursor:pointer}.mobile-menu--open .mobile-menu__backdrop{opacity:1}.mobile-menu__panel{position:fixed;top:39px;left:0;width:270px;height:calc(100vh - 30px);background-color:var(--mobile-menu-bg);border-top-right-radius:16px;border-bottom-right-radius:16px;box-shadow:2px 8px 8px 0 var(--mobile-menu-shadow);overflow:hidden;transform:translate(-100%);transition:transform .3s ease-out;z-index:1001;display:flex;flex-direction:column}.mobile-menu--open .mobile-menu__panel{transform:translate(0)}.mobile-menu__header{display:flex;align-items:center;gap:16px;height:49px;padding:3px 16px;flex-shrink:0;background-color:var(--mobile-menu-bg);border-top-right-radius:16px}.mobile-menu__close{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;background:none;border:none;cursor:pointer;flex-shrink:0;color:#878787}.mobile-menu__close:hover,.mobile-menu__close:focus-visible{opacity:.7}.mobile-menu__close:focus-visible{outline:2px solid var(--mobile-menu-text);outline-offset:2px}.mobile-menu__close svg{display:block;width:18px;height:18px}.mobile-menu__logo{display:block;line-height:0}.mobile-menu__logo img{display:block;width:126px;height:36px;object-fit:contain}.mobile-menu__nav{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:16px}.mobile-menu__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.mobile-menu__item{position:relative}.mobile-menu__link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;padding:8px 12px;background-color:var(--mobile-menu-bg);border:none;border-radius:8px;font-family:Kanit,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:var(--mobile-menu-text);text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s ease}.mobile-menu__link:hover,.mobile-menu__link:focus-visible{background-color:var(--mobile-menu-hover-bg)}.mobile-menu__link:focus-visible{outline:2px solid var(--mobile-menu-text);outline-offset:2px}.mobile-menu__link--parent{position:relative}.mobile-menu__link--parent[aria-expanded=true]{background-color:var(--mobile-menu-expanded-bg)}.mobile-menu__arrow{flex-shrink:0;width:24px;height:24px;color:#649bc0;transform:rotate(-90deg);transition:transform .2s ease}.mobile-menu__link--parent[aria-expanded=true] .mobile-menu__arrow{transform:rotate(90deg)}.mobile-menu__submenu{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.mobile-menu__submenu[hidden]{display:none}.mobile-menu__submenu:not([hidden]){display:grid;grid-template-rows:1fr;margin-top:4px}.mobile-menu__submenu>*{overflow:hidden}.mobile-menu__submenu li{display:flex;flex-direction:column;gap:4px}.mobile-menu__submenu li:first-child{padding-top:0}.mobile-menu__sublink{display:block;min-height:33px;padding:8px 12px;background-color:var(--mobile-menu-bg);border-radius:8px;font-family:Kanit,sans-serif;font-weight:300;font-size:14px;line-height:1.2;color:var(--mobile-menu-text);text-decoration:none;transition:background-color .15s ease}.mobile-menu__sublink:hover,.mobile-menu__sublink:focus-visible{background-color:var(--mobile-menu-hover-bg)}.mobile-menu__sublink:focus-visible{outline:2px solid var(--mobile-menu-text);outline-offset:2px}body.mobile-menu-open{overflow:hidden;position:fixed;width:100%}@media(prefers-reduced-motion:reduce){.mobile-menu__panel,.mobile-menu__backdrop,.mobile-menu__arrow,.mobile-menu__submenu{transition-duration:.01ms!important}}@media(min-width:1025px){.mobile-menu{display:none!important}}.mobile-menu *:focus{outline:none}.mobile-menu *:focus-visible{outline:2px solid var(--mobile-menu-text);outline-offset:2px}
/*# sourceMappingURL=/cdn/shop/t/3/assets/mobile-menu.css.map */