/* Shared responsive navbar fixes for the floating pill topbar. Linked statically in every customer page so it always applies. */ /* Brand should never wrap to multiple lines at any width. */ .topbar .brand { white-space: nowrap; } @media (max-width: 760px) { .topbar { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 14px !important; } .topbar .nav-l { display: none !important; } .topbar .brand { font-size: 16px !important; flex-shrink: 0; gap: 8px !important; line-height: 1 !important; } .topbar .brand img { width: 30px !important; height: 30px !important; flex-shrink: 0; } .topbar .nav-r { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 6px !important; min-width: 0; } .topbar .pill { padding: 8px 11px !important; font-size: 11px !important; gap: 5px !important; white-space: nowrap; line-height: 1; } } /* Phones: drop the brand wordmark to just the logo so the pills fit on one row. */ @media (max-width: 480px) { .topbar { padding: 9px 10px 9px 12px !important; } .topbar .brand { font-size: 0 !important; gap: 0 !important; } .topbar .brand img { width: 32px !important; height: 32px !important; } .topbar .pill { padding: 8px 10px !important; font-size: 10.5px !important; } /* Wishlist collapses to a heart-only chip. */ .topbar .nav-r a.pill[href="/wishlist"] { font-size: 0 !important; padding: 9px 11px !important; } .topbar .nav-r a.pill[href="/wishlist"]::after { content: "\2661"; font-size: 14px; } .topbar .nav-r a.pill[href="/wishlist"] .dot { display: none !important; } }