/* ─── Drawer / off-canvas ────────────────────────────────────────────── Edge-anchored side panel (filters, mini-cart, secondary nav). Shares the modal's overlay MECHANICS — focus trap, the shared background inert + scroll lock, Esc / backdrop / close-button dismiss, focus return (drawer.js, built on hzo.trapFocus in main.js) — but NOT its layout: it stays a side panel at EVERY width. Phones cap the width but keep the side anchor; it never becomes a bottom sheet (that's the modal). Default slides from the right; --left slides from the left. Portaled to on init. */ .hzo-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; justify-content: flex-end; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity var(--transition-base) ease, visibility var(--transition-base); } .hzo-drawer--left { justify-content: flex-start; } .hzo-drawer.is-open { opacity: 1; visibility: visible; } .hzo-drawer__panel { position: relative; display: flex; flex-direction: column; width: min(85vw, 360px); max-width: 100%; height: 100%; background: var(--surface, #fff); box-shadow: var(--shadow-lg); overflow-y: auto; transform: translateX(100%); transition: transform var(--transition-base) ease; } .hzo-drawer--left .hzo-drawer__panel { transform: translateX(-100%); } .hzo-drawer.is-open .hzo-drawer__panel { transform: none; } .hzo-drawer__panel--wide { width: min(92vw, 480px); } .hzo-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg); border-bottom: var(--border-1) solid var(--border); flex-shrink: 0; } .hzo-drawer__title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-400); line-height: 1.3; color: var(--text-heading); } .hzo-drawer__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0; border: 0; background: transparent; color: var(--text-muted); border-radius: var(--radius-control); cursor: pointer; transition: background var(--transition-base) ease, color var(--transition-base) ease; } .hzo-drawer__close:hover { background: var(--bg-alt); color: var(--text-heading); } .hzo-drawer__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .hzo-drawer__body { flex: 1 1 auto; min-height: 0; /* G7: let the body shrink so IT is the sole scroller — */ overflow-y: auto; /* the footer (mini-cart Checkout) is never pushed off-screen */ overscroll-behavior: contain; padding: var(--space-lg); color: var(--text-body); } .hzo-drawer__body > :first-child { margin-top: 0; } .hzo-drawer__body > :last-child { margin-bottom: 0; } .hzo-drawer__footer { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-lg); border-top: var(--border-1) solid var(--border); } @media (prefers-reduced-motion: reduce) { .hzo-drawer, .hzo-drawer__panel, .hzo-drawer__close { transition: none; } }