:root { --color-bg: #f4f4f5; --color-surface: #ffffff; --color-border: #e4e4e7; --color-text: #18181b; --color-muted: #71717a; --color-faint: #a1a1aa; --color-accent: #6366f1; --color-accent-dark: #4f46e5; --color-accent-subtle: #eef2ff; --color-sale: #ef4444; --color-placeholder: #e4e4e7; --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', ui-monospace, monospace; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-8); --transition-base: var(--transition); --color-muted-bg: #f4f4f5; --color-surface-hover: #f4f4f5; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); --shadow-hover: 0 4px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06); --transition: 0.15s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } /* ─── Layout shell ─── */ .page { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); } /* ─── Header ─── */ .header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-8); background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 0 var(--color-border); } .logo { height: 36px; width: auto; } .header-brand { font-size: 1.125rem; font-weight: 800; color: var(--color-text); white-space: nowrap; flex-shrink: 0; } .header-right { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; } /* * The drawer breakpoint at 899px restyles the nav but never touched the header * itself, so a 375px viewport still paid 2rem of side padding and a 1.5rem * icon gap. That is what made the row overflow, and the icons were what gave. */ @media (max-width: 640px) { .header { gap: var(--space-3); padding: var(--space-3) var(--space-4); } .header-right { gap: var(--space-2); } } /* ─── Navigation ─── */ .nav { display: flex; align-items: center; gap: var(--space-2); } .nav-link { font-size: 0.875rem; font-weight: 500; color: var(--color-muted); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); } .nav-link:hover { color: var(--color-text); background: var(--color-bg); } .nav-link--active { color: var(--color-accent); background: var(--color-accent-subtle); } .nav-cart { font-size: 0.875rem; font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); } .nav-cart:hover { color: var(--color-accent); background: var(--color-accent-subtle); } /* * One box for all four header action icons (#238). Search and account are *

brand 2

White Lotus