/** * [sl_ai_concierge] — same white/black/grey design tokens as * listing-wizard.css and auth.css (soft shadows, black accent), styled * as a chat/conversation rather than a form: bubbles, a typing/thinking * indicator, and a card grid for results. */ .sl-concierge { --sl-conc-bg: #fafafa; --sl-conc-card: #ffffff; --sl-conc-border: #e6e6e6; --sl-conc-text: #1a1a1a; --sl-conc-text-dim: #767676; --sl-conc-black: #111111; --sl-conc-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --sl-conc-shadow-hover: 0 4px 16px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); position: relative; max-width: 960px; margin: 0 auto; font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--sl-conc-text); background: var(--sl-conc-bg); border-radius: 28px; overflow: hidden; display: flex; min-height: 560px; } .sl-concierge *, .sl-concierge *::before, .sl-concierge *::after { box-sizing: border-box; } .sl-concierge__main { flex: 1; min-width: 0; padding: 40px 28px; } /* Sidebar toggle (hamburger) — visible top-left on mobile/tablet, where the sidebar is a closed-by-default overlay. On desktop (900px+) the sidebar is pinned open by default (see ai-concierge.js), so this button is hidden there rather than floating oddly over the now-pushed- over main content at its old top-left position — the header's own close button is how it gets dismissed at that width instead. */ .sl-concierge__mobile-topbar { position: absolute; top: 16px; left: 16px; z-index: 20; display: flex; align-items: center; gap: 10px; } .sl-concierge__sidebar-toggle { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--sl-conc-card); border: 1.5px solid var(--sl-conc-border); color: var(--sl-conc-text); cursor: pointer; box-shadow: var(--sl-conc-shadow); } .sl-concierge__sidebar-toggle:hover { box-shadow: var(--sl-conc-shadow-hover); } .sl-concierge__mobile-logo { object-fit: contain; } @media (min-width: 900px) { /* Unconditionally hidden on desktop, per explicit request — the sidebar already has its own toggle-independent presence there (pinned open by default, with its own logo above "Recent Searches"), so this mobile-style hamburger+logo bar reads as pure clutter duplicating what's already visible in the sidebar itself. Known tradeoff: this removes the only way to REOPEN the sidebar on desktop after manually closing it via its own X button (there is deliberately no other affordance for that here) — acceptable for now since it wasn't raised as a concern; a small edge-tab or similar would be the fix if it comes up later. */ .sl-concierge__mobile-topbar { display: none; } } .sl-concierge__sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 29; } .sl-concierge__sidebar-backdrop[hidden] { display: none; } .sl-concierge__sidebar { /* Redeclared here because the sidebar is moved to be a direct child of (see ensureSidebarMoved in ai-concierge.js), so it's no longer a descendant of .sl-concierge and can't inherit that element's custom properties — without this, every var() below would silently fall back to unstyled/transparent. */ --sl-conc-bg: #fafafa; --sl-conc-card: #ffffff; --sl-conc-border: #e6e6e6; --sl-conc-text: #1a1a1a; --sl-conc-text-dim: #767676; --sl-conc-black: #111111; --sl-conc-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: min(300px, 84vw); background: var(--sl-conc-bg); border-right: 1.5px solid var(--sl-conc-border); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .25s ease; padding: 16px; } .sl-concierge__sidebar[hidden] { display: flex; visibility: hidden; } /* keep laid out for the slide transition instead of display:none, which would skip the animation entirely */ .sl-concierge__sidebar.is-open { transform: translateX(0); visibility: visible; } .sl-concierge__sidebar-logo { padding: 4px 0 14px; } .sl-concierge__sidebar-logo img { object-fit: contain; } .sl-concierge__sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .sl-concierge__sidebar-title { font-size: 13px; font-weight: 700; color: var(--sl-conc-text); } .sl-concierge__sidebar-close { width: 30px; height: 30px; border-radius: 10px; border: none; background: transparent; color: var(--sl-conc-text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; } .sl-concierge__sidebar-close:hover { background: var(--sl-conc-border); } .sl-concierge__sidebar-new { width: 100%; padding: 11px; margin-bottom: 14px; border-radius: 12px; background: var(--sl-conc-black); color: #fff; border: none; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; } .sl-concierge__sidebar-new:hover { opacity: 0.9; } .sl-concierge__sidebar-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .sl-concierge__sidebar-empty { font-size: 12px; color: var(--sl-conc-text-dim); text-align: center; padding: 20px 0; margin: 0; } .sl-concierge__sidebar-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--sl-conc-card); border: 1.5px solid var(--sl-conc-border); cursor: pointer; font-family: inherit; } .sl-concierge__sidebar-item:hover { border-color: var(--sl-conc-black); } .sl-concierge__sidebar-item-category { font-size: 12.5px; font-weight: 700; color: var(--sl-conc-text); } .sl-concierge__sidebar-item-place { font-size: 11px; color: var(--sl-conc-text-dim); } /* Sidebar footer — "Add Your Business" CTA + account row, pinned to the bottom of the sidebar (sidebar-list above has flex:1, so it naturally pushes this down) the same way Claude.ai keeps its own account row fixed under the nav list rather than scrolling with it. */ .sl-concierge__sidebar-footer { flex-shrink: 0; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--sl-conc-border); display: flex; flex-direction: column; gap: 4px; } .sl-concierge__sidebar-cta { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 8px; border-radius: 10px; border: none; background: transparent; color: inherit; text-decoration: none; cursor: pointer; font-family: inherit; } .sl-concierge__sidebar-cta:hover { background: var(--sl-conc-border); } .sl-concierge__sidebar-cta-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--sl-conc-black); color: #fff; } .sl-concierge__sidebar-cta-text { display: flex; flex-direction: column; min-width: 0; } .sl-concierge__sidebar-cta-text strong { font-size: 12.5px; font-weight: 700; color: var(--sl-conc-text); } .sl-concierge__sidebar-cta-text small { font-size: 10.5px; color: var(--sl-conc-text-dim); margin-top: 1px; } .sl-concierge__sidebar-account { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px; border-radius: 10px; border: none; background: transparent; cursor: default; font-family: inherit; } .sl-concierge__sidebar-account--signin { cursor: pointer; } .sl-concierge__sidebar-account--signin:hover { background: var(--sl-conc-border); } .sl-concierge__sidebar-avatar { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sl-conc-black); color: #fff; font-size: 11.5px; font-weight: 700; } .sl-concierge__sidebar-avatar--guest { background: var(--sl-conc-border); color: var(--sl-conc-text-dim); } .sl-concierge__sidebar-account-name { font-size: 12.5px; font-weight: 600; color: var(--sl-conc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Account dropdown (Claude.ai-style profile menu) ------------------------ */ .sl-concierge__account-menu { position: relative; } .sl-concierge__account-dropdown { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--sl-conc-card); border: 1px solid var(--sl-conc-border); border-radius: 14px; box-shadow: var(--sl-conc-shadow-hover); padding: 6px; z-index: 5; } .sl-concierge__account-dropdown[hidden] { display: none; } .sl-concierge__account-dropdown-email { font-size: 11px; color: var(--sl-conc-text-dim); padding: 8px 10px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-concierge__account-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 9px; border: none; background: transparent; color: var(--sl-conc-text); text-decoration: none; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; } .sl-concierge__account-dropdown-item svg { flex-shrink: 0; color: var(--sl-conc-text-dim); } .sl-concierge__account-dropdown-item:not(.sl-concierge__account-dropdown-item--static):hover { background: var(--sl-conc-border); } .sl-concierge__account-dropdown-item--static { cursor: default; color: var(--sl-conc-text-dim); } .sl-concierge__account-dropdown-badge { margin-left: auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px; background: var(--sl-conc-border); color: var(--sl-conc-text-dim); } .sl-concierge__account-dropdown-chevron { margin-left: auto; color: var(--sl-conc-text-dim); } .sl-concierge__account-dropdown-divider { height: 1px; background: var(--sl-conc-border); margin: 6px 4px; } /* Settings / Get Help / Upgrade Plan popup -------------------------------- */ .sl-concierge__util-modal { padding: 28px 24px; } .sl-concierge__util-pane[hidden] { display: none; } .sl-concierge__util-pane h3 { font-size: 17px; font-weight: 800; margin: 0 0 12px; color: var(--sl-conc-black); } .sl-concierge__util-pane p { font-size: 13px; line-height: 1.6; color: var(--sl-conc-text-dim); margin: 0 0 16px; } .sl-concierge__util-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sl-conc-text-dim) !important; margin: 0 0 8px !important; } .sl-concierge__util-lang-options { display: flex; flex-direction: column; gap: 8px; } .sl-concierge__util-lang-btn { width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--sl-conc-border); background: var(--sl-conc-card); color: var(--sl-conc-text); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .sl-concierge__util-lang-btn:hover { border-color: var(--sl-conc-black); } .sl-concierge__util-lang-btn.is-active { background: var(--sl-conc-black); border-color: var(--sl-conc-black); color: #fff; } .sl-concierge__util-pane .sl-btn { display: inline-block; padding: 11px 20px; border-radius: 999px; background: var(--sl-conc-black); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; } /* "Sign In" popup — reuses [sl_auth_form]'s own auth.css styling for the tabs/inputs inside; this wrapper only supplies the modal chrome, same pattern as the business detail modal above. */ .sl-concierge__signin-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 59; } .sl-concierge__signin-backdrop[hidden] { display: none; } .sl-concierge__signin-modal { position: fixed; z-index: 60; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, 92vw); max-height: 90vh; overflow-y: auto; background: var(--sl-conc-bg, #fafafa); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); padding: 44px 24px 24px; } .sl-concierge__signin-modal[hidden] { display: none; } @media (min-width: 900px) { /* On wide desktop viewports the sidebar is pinned open by default (see the matchMedia check in ai-concierge.js), pushing the page's own content over via the "sl-concierge-sidebar-pinned" body class instead of overlaying it, closer to how Claude.ai behaves on desktop — still closeable via the header button, just open by default rather than needing a click first. */ .sl-concierge__sidebar { box-shadow: var(--sl-conc-shadow); } /* pointer-events:none rather than the old position/background trick: with the sidebar pinned open by default, a click anywhere else on the page must NOT reach this backdrop and close it — it's no longer a dismissible overlay at this width, just a full-height visual dimmer that happens to render fully transparent. */ .sl-concierge__sidebar-backdrop { background: transparent; pointer-events: none; } body.sl-concierge-sidebar-pinned { padding-left: 300px; transition: padding-left .25s ease; } } /* Hero ---------------------------------------------------------------- */ .sl-concierge__hero { text-align: center; margin-bottom: 32px; transition: opacity .3s ease, max-height .3s ease, margin .3s ease; overflow: hidden; max-height: 300px; } .sl-concierge__hero.is-collapsed { opacity: 0; max-height: 0; margin: 0; pointer-events: none; } .sl-concierge__headline { font-size: 26px; font-weight: 800; line-height: 1.3; margin: 0 0 16px; letter-spacing: -0.01em; } .sl-concierge__brand { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--sl-conc-black); border-radius: 999px; padding: 6px 16px; margin-bottom: 10px; } .sl-concierge__subhead { font-size: 14.5px; color: var(--sl-conc-text-dim); margin: 0; max-width: 480px; margin-left: auto; margin-right: auto; } /* Language select ------------------------------------------------------- */ .sl-concierge__lang-select { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .sl-concierge__lang-select[hidden] { display: none; } .sl-concierge__ai-badges { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 0 0 24px; flex-wrap: wrap; } .sl-concierge__ai-badge { height: 70px; width: auto; max-width: 150px; } .sl-concierge__lang-btn { padding: 14px 28px; border-radius: 999px; border: 1.5px solid var(--sl-conc-border); background: var(--sl-conc-card); color: var(--sl-conc-text); font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: var(--sl-conc-shadow); transition: box-shadow .15s ease, transform .1s ease, background .15s ease, color .15s ease; } .sl-concierge__lang-btn:hover { box-shadow: var(--sl-conc-shadow-hover); transform: translateY(-1px); background: var(--sl-conc-black); color: #fff; } /* Chat ------------------------------------------------------------------ */ .sl-concierge__chat { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; padding: 4px 2px; } .sl-concierge__chat[hidden] { display: none; } .sl-concierge__bubble { align-self: flex-start; max-width: 85%; background: var(--sl-conc-card); border: 1.5px solid var(--sl-conc-border); border-radius: 16px 16px 16px 4px; padding: 12px 16px; font-size: 14.5px; font-weight: 600; color: var(--sl-conc-text); box-shadow: var(--sl-conc-shadow); animation: sl-concierge-pop .25s ease; } @keyframes sl-concierge-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .sl-concierge__bubble--thinking { display: flex; align-items: center; gap: 5px; padding: 14px 18px; } .sl-concierge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sl-conc-text-dim); animation: sl-concierge-bounce 1.1s infinite ease-in-out; } .sl-concierge__dot:nth-child(2) { animation-delay: .15s; } .sl-concierge__dot:nth-child(3) { animation-delay: .3s; } @keyframes sl-concierge-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } .sl-concierge__options { display: flex; flex-wrap: wrap; gap: 8px; } .sl-concierge__section-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sl-conc-text-dim); margin: 14px 2px 6px; } .sl-concierge__options--trending { padding: 12px; border-radius: 16px; background: linear-gradient(135deg, #fafafa, #f0f0f0); border: 1.5px dashed var(--sl-conc-black); } .sl-concierge__options--trending .sl-concierge__option { background: var(--sl-conc-black); color: #fff; border-color: var(--sl-conc-black); } .sl-concierge__options--trending .sl-concierge__option:hover:not(:disabled) { opacity: 0.85; } .sl-concierge__option { padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--sl-conc-border); background: var(--sl-conc-card); color: var(--sl-conc-text); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: var(--sl-conc-shadow); transition: box-shadow .15s ease, background .15s ease, color .15s ease, opacity .15s ease; } .sl-concierge__option:hover:not(:disabled) { box-shadow: var(--sl-conc-shadow-hover); background: var(--sl-conc-black); color: #fff; } .sl-concierge__option:disabled { opacity: .45; cursor: default; } /* The one option actually picked at each step — collapses in from the full disabled-but-visible grid lockOptions() used to leave behind. Full opacity (overriding the plain :disabled fade above) plus a checkmark reads as "this is your answer", not "this button is off". */ .sl-concierge__option.is-selected { opacity: 1; background: var(--sl-conc-black); color: #fff; border-color: var(--sl-conc-black); display: inline-flex; align-items: center; gap: 6px; } .sl-concierge__option.is-selected::before { content: '\2713'; font-weight: 700; } .sl-concierge__start-over { align-self: center; margin-top: 8px; padding: 10px 22px; border-radius: 999px; border: 1.5px solid var(--sl-conc-border); background: var(--sl-conc-card); color: var(--sl-conc-text-dim); font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; } .sl-concierge__start-over:hover { border-color: var(--sl-conc-text-dim); color: var(--sl-conc-text); } .sl-concierge__start-over--secondary { background: var(--sl-conc-black); color: #fff; border-color: var(--sl-conc-black); } .sl-concierge__start-over--secondary:hover { opacity: 0.9; } .sl-concierge__see-more { align-self: flex-start; margin: 4px 0 8px; padding: 8px 18px; border-radius: 999px; border: 1.5px dashed var(--sl-conc-border); background: transparent; color: var(--sl-conc-text-dim); font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; } .sl-concierge__see-more:hover { border-color: var(--sl-conc-text-dim); color: var(--sl-conc-text); } /* Recent searches list — ChatGPT-sidebar-style history, adapted to this single-column chat layout as a stacked list rather than a sidebar. */ .sl-concierge__recent-heading { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sl-conc-text-dim); margin: 18px 4px 8px; } .sl-concierge__recent-list { display: flex; flex-direction: column; gap: 6px; } .sl-concierge__recent-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 11px 14px; border-radius: 14px; background: var(--sl-conc-card); border: 1.5px solid var(--sl-conc-border); box-shadow: var(--sl-conc-shadow); cursor: pointer; font-family: inherit; transition: box-shadow .15s ease, border-color .15s ease; } .sl-concierge__recent-item:hover:not(:disabled) { box-shadow: var(--sl-conc-shadow-hover); border-color: var(--sl-conc-black); } .sl-concierge__recent-item:disabled { opacity: .5; cursor: default; } .sl-concierge__recent-item-category { font-size: 13px; font-weight: 700; color: var(--sl-conc-black); } .sl-concierge__recent-item-place { font-size: 11.5px; color: var(--sl-conc-text-dim); flex-shrink: 0; } /* Search shortcut --------------------------------------------------------- */ .sl-concierge__search-bar { display: flex; gap: 8px; margin-top: 20px; } .sl-concierge__search-bar[hidden] { display: none; } .sl-concierge__search-input { flex: 1; padding: 13px 16px; border-radius: 999px; border: 1.5px solid var(--sl-conc-border); background: var(--sl-conc-card); color: var(--sl-conc-text); font-size: 14px; font-family: inherit; box-shadow: var(--sl-conc-shadow); } .sl-concierge__search-input:focus { outline: none; border-color: var(--sl-conc-black); } .sl-concierge__search-btn { padding: 13px 24px; border-radius: 999px; border: none; background: var(--sl-conc-black); color: #fff; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: var(--sl-conc-shadow); } .sl-concierge__search-btn:hover { box-shadow: var(--sl-conc-shadow-hover); } /* Results grid ------------------------------------------------------------ */ .sl-concierge__results { margin-top: 24px; transition: opacity .15s ease; } /* AI-visibility promo strip — shown under the results once the cascade is active, same "Add Your Business" CTA as the sidebar footer but as a bigger, centered banner since this is the main content area's own pitch rather than a persistent nav item. */ .sl-concierge__ai-promo { margin-top: 36px; padding: 28px 24px; border-radius: 20px; text-align: center; background: var(--sl-conc-card); border: 1.5px solid var(--sl-conc-border); } .sl-concierge__ai-promo[hidden] { display: none; } .sl-concierge__ai-promo-headline { font-size: 14.5px; line-height: 1.5; color: var(--sl-conc-black); max-width: 620px; margin: 0 auto 8px; font-weight: 800; } .sl-concierge__ai-promo-subtext { font-size: 11.5px; line-height: 1.55; color: var(--sl-conc-text-dim); max-width: 580px; margin: 0 auto 16px; font-weight: 500; } /* Shrunk from the original 14.5px — the new headline above now carries that size/weight, so this reads as supporting detail rather than competing with it for attention. */ .sl-concierge__ai-promo-text { font-size: 12.5px; line-height: 1.6; color: var(--sl-conc-text); max-width: 620px; margin: 0 auto 20px; font-weight: 500; } .sl-concierge__ai-promo-cta { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 32px; border-radius: 999px; background: var(--sl-conc-black); color: #fff; text-decoration: none; box-shadow: var(--sl-conc-shadow); transition: transform .1s ease, box-shadow .15s ease; max-width: 100%; box-sizing: border-box; } .sl-concierge__ai-promo-cta:hover { box-shadow: var(--sl-conc-shadow-hover); transform: translateY(-1px); } .sl-concierge__ai-promo-cta span { font-size: 14.5px; font-weight: 800; white-space: nowrap; } .sl-concierge__ai-promo-cta small { font-size: 11px; font-weight: 500; opacity: 0.8; white-space: nowrap; } @media (max-width: 600px) { .sl-concierge__ai-promo { padding: 22px 16px; } .sl-concierge__ai-promo-headline { font-size: 13px; } .sl-concierge__ai-promo-subtext { font-size: 10.5px; } .sl-concierge__ai-promo-text { font-size: 11.5px; } /* The pill button was wide enough on mobile to force its two lines of text (title + subtitle) to wrap awkwardly inside the rounded shape. Letting it grow to the full available width and softening the corners to a regular rounded-rect (instead of a true pill) fixes that without needing to shrink the text further. */ .sl-concierge__ai-promo-cta { display: flex; width: 100%; border-radius: 16px; padding: 13px 16px; } .sl-concierge__ai-promo-cta span { font-size: 13.5px; white-space: normal; } .sl-concierge__ai-promo-cta small { white-space: normal; } } .sl-concierge__results[hidden] { display: none; } .sl-concierge__results.is-loading { opacity: 0.55; } .sl-concierge__results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } /* Placed AFTER the base rule above (not inside the earlier 900px block near the top of this file) deliberately — with equal specificity, CSS gives the win to whichever rule comes LAST in source order, so a 4-column override written earlier in the file was silently being beaten by this base 2-column rule even on wide desktop viewports. 2 columns reads as a cramped, half-empty page on a 960px-wide desktop container; 4 columns actually uses the space. Mobile/tablet stay at 2 (and 1 under 380px, further below) where a card needs the extra width to stay legible. */ @media (min-width: 900px) { .sl-concierge__results-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } } .sl-concierge__live-count { font-size: 11.5px; font-weight: 700; color: var(--sl-conc-text-dim); margin: 0 2px 10px; text-transform: uppercase; letter-spacing: 0.04em; } .sl-concierge__live-empty { font-size: 12.5px; color: var(--sl-conc-text-dim); text-align: center; padding: 16px 0; margin: 0; } .sl-concierge__card { display: block; width: 100%; text-align: left; text-decoration: none; color: inherit; background: var(--sl-conc-card); border: 1.5px solid var(--sl-conc-border); border-radius: 18px; overflow: hidden; box-shadow: var(--sl-conc-shadow); transition: box-shadow .15s ease, transform .1s ease; /* This card is a role="button"
(it opens the detail modal on click, and also contains its own WhatsApp/Call action links — a real