.drawer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-drawer);visibility:hidden;transition:visibility 0s linear var(--dur-slow)}.drawer[open]{visibility:visible;transition-delay:0s}.drawer__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--color-overlay);opacity:0;transition:opacity var(--dur-base) var(--ease)}.drawer[open] .drawer__overlay{opacity:1}.drawer__panel{position:absolute;inset-inline:0;bottom:0;display:flex;flex-direction:column;max-height:88svh;background-color:var(--color-surface);border-start-start-radius:calc(var(--radius) * 2);border-start-end-radius:calc(var(--radius) * 2);box-shadow:var(--shadow-lg);transform:translateY(100%);transition:transform var(--dur-slow) var(--ease-out);padding-bottom:var(--safe-bottom)}.drawer[open] .drawer__panel{transform:translateY(0)}.drawer--tall .drawer__panel{height:92svh;max-height:92svh}.drawer__handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-height:var(--tap-min);cursor:grab;touch-action:none}.drawer__handle:before{content:"";width:40px;height:4px;border-radius:var(--radius-pill);background-color:var(--color-border)}.drawer__header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding-inline:var(--gutter);padding-block-end:var(--space-xs);border-bottom:1px solid var(--color-border)}.drawer__title{font-size:var(--text-lg);margin:0}.drawer__close{flex-shrink:0;color:var(--color-text)}.drawer__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--space-sm) var(--gutter)}.drawer__footer{flex-shrink:0;padding:var(--space-sm) var(--gutter);border-top:1px solid var(--color-border);background-color:var(--color-surface)}@media(min-width:768px){.drawer--side .drawer__panel{inset-block:0;inset-inline-start:auto;inset-inline-end:0;width:min(420px,100%);max-height:none;height:100dvh;border-radius:0;transform:translate(100%);padding-bottom:0;padding-top:var(--safe-top)}.drawer--side[open] .drawer__panel{transform:translate(0)}.drawer--side .drawer__handle{display:none}.drawer--side .drawer__header{padding-top:var(--space-sm)}}@media(min-width:1024px){.drawer--menu{display:none}}.reduce-motion .drawer,.reduce-motion .drawer__panel,.reduce-motion .drawer__overlay{transition:none}.reduce-motion .drawer__panel{transform:none}.reduce-motion .drawer:not([open]) .drawer__panel{display:none}
/*# sourceMappingURL=/cdn/shop/t/3/assets/component-drawer.css.map */
