.tabbar{--tabbar-icon-size:1.375rem;align-items:center;background-color:var(--color-white);bottom:0;justify-content:space-between;left:0;max-width:100vw;min-height:calc(3.5rem + env(safe-area-inset-bottom));padding:var(--spacer-4xs);padding-bottom:calc(var(--spacer-4xs) + env(safe-area-inset-bottom));position:fixed;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:var(--z-fixed)}.tabbar,.tabbar__link{display:flex;width:100%}.tabbar__link{color:inherit;flex-wrap:wrap;justify-content:center;padding:0 var(--spacer-4xs);position:relative;text-decoration:none}.tabbar__link.active>.tabbar__label,.tabbar__link:active>.tabbar__label{color:var(--color-red-400)}.tabbar__link.active>[class*=i-]:before,.tabbar__link:active>[class*=i-]:before{transform:translate(0)}.tabbar__link.active>.tabbar__icon.i-cart--fill:before,.tabbar__link.active>.tabbar__icon.i-catalog:before,.tabbar__link:active>.tabbar__icon.i-cart--fill:before,.tabbar__link:active>.tabbar__icon.i-catalog:before{background-color:var(--primary)}.tabbar__label{color:var(--color-neutral-600);font-size:.75rem;font-weight:400;line-height:1rem;margin-top:var(--spacer-4xs);text-align:center;width:100%}.tabbar__icon{height:var(--tabbar-icon-size);margin-top:var(--spacer-4xs);position:relative}.tabbar__icon[class*=i-]:before{height:var(--tabbar-icon-size);width:var(--tabbar-icon-size)}.tabbar__icon.i-cart--fill:before,.tabbar__icon.i-catalog:before{background-color:var(--color-neutral-450)}.tabbar__icon>.badge{left:17px;position:absolute;right:auto;top:0;width:auto}@media(min-width:1024px){.tabbar{display:none}}body[\:not-has\(\.o-bottom-bar--buttons-only\)] .tabbar{border-left:1px solid var(--color-neutral-300);border-right:1px solid var(--color-neutral-300);border-top:1px solid var(--color-neutral-300)}body:not(:has(.o-bottom-bar--buttons-only)) .tabbar{border-left:1px solid var(--color-neutral-300);border-right:1px solid var(--color-neutral-300);border-top:1px solid var(--color-neutral-300)}body[\:not-has\(\.o-bottom-bar\:not\(\.o-bottom-bar--btn\)\:not\(\.o-bottom-bar--navigating\)\)] .tabbar{border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg)}body:not(:has(.o-bottom-bar:not(.o-bottom-bar--btn):not(.o-bottom-bar--navigating))) .tabbar{border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg)}@media(max-width:1023px){.page-tabbar{padding-bottom:calc(3.5rem + env(safe-area-inset-bottom))}}