/* ==========================================================================
   Athance Market — Design System
   Real Athance (Kiventra's flagship product) brand tokens, pulled directly
   from src/constants/colors.ts / athance-color-theme-prompt.md — dark navy,
   teal accent, green→teal→blue CTA gradient, Space Grotesk. This used to
   run its own invented gold/Poppins palette, which is why it read as a
   separate, unrelated site — everything below now matches the real app and
   shooting.athance.com exactly, not an approximation of it.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --navy: #0A0E14;
  --navy-soft: #131A26;
  --teal: #2DD4BF;
  --teal-soft: #7FE7D9;
  --green: #7ED957;
  --blue: #2E9BF0;
  --gradient: linear-gradient(90deg, var(--green) 0%, var(--teal) 55%, var(--blue) 100%);

  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --border: #E4E7EC;
  --text: #14181F;
  --text-muted: #5B6472;
  --text-faint: #8A93A3;

  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(10,14,20,0.06);
  --shadow-md: 0 4px 16px rgba(10,14,20,0.08);
  --shadow-lg: 0 12px 32px rgba(10,14,20,0.14);

  --container: 1440px;
  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Removed 2026-09-30: real [perf] timing from production (two samples,
   150ms and 280ms total from nav-start to header fully painted, header
   render itself taking ~1ms) proved the actual content was never the
   slow part — the header/footer blocking-await bugs this was originally
   layered on top of are now fixed for real. With render that fast, the
   transition itself became the more likely suspect for the still-visible
   flash Vivek kept reporting: Chrome's cross-document crossfade captures
   its "new page" snapshot as soon as the document is paintable, which is
   BEFORE the header/footer JS has run — so the crossfade was revealing a
   page still missing its header/footer, then those popped in a beat
   later with no animation of their own, reading as a blank-then-snap
   rather than a smooth transition. Removing this is a plain, no-downside
   experiment: it's pure progressive-enhancement CSS, so dropping it only
   returns the site to an ordinary full-document navigation, which the
   fast render numbers above suggest should now look clean on its own. */

/* #app-header/#app-footer are empty on first paint — UI.renderHeader()/
   renderFooter() fill them in asynchronously (they wait on BrowseCountry's
   geo-IP detection, watchlist priming, etc). Without a reserved height,
   that's a second, separate jump on every single page load — the header
   pops in a beat after the rest of the page has already rendered, shoving
   everything below it down. Reserving the header's typical rendered
   height (and matching its background) means the page looks stable from
   the very first frame instead of correct only after JS catches up. */
#app-header { min-height: 108px; background: var(--navy); }
@media (max-width: 720px) { #app-header { min-height: 64px; } } /* nav-row hides below this width, see .nav-row's own media query */
#app-footer { min-height: 280px; background: var(--navy); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The language switcher (ui.js Lang) drives Google's Website Translate
   widget programmatically — its own UI (top banner iframe, inline
   dropdown, highlighted-word underlines) is never wanted, only the
   translation itself. Hiding all of it here, globally, once. */
.goog-te-banner-frame, .goog-te-gadget-icon { display: none !important; }
body { top: 0 !important; } /* the banner iframe otherwise pushes body down by its own height even while hidden */
.goog-text-highlight { background: none !important; box-shadow: none !important; }
#google_translate_element { display: none !important; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
h1,h2,h3,h4 { margin: 0 0 8px; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 12px; color: var(--text-muted); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 32px 0; }
.grid { display: grid; gap: 16px; }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); font-size: 13px; }
.mt-0{margin-top:0} .mt-8{margin-top:8px} .mt-16{margin-top:16px} .mt-24{margin-top:24px} .mt-32{margin-top:32px}
.mb-0{margin-bottom:0} .mb-8{margin-bottom:8px} .mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px}

/* ---------------- Header / Nav ---------------- */
.site-header { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-md); }
.site-header .top-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 12px 0; }
.brand-block { display: flex; flex-direction: column; gap: 2px; }
.brand { font-weight: 700; font-size: 20px; color: #fff; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand .logo-img { height: 28px; width: auto; display: block; }
.header-tagline { color: var(--teal-soft); font-weight: 600; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 640px) { .header-tagline { display: none; } }
.brand-sub { font-size: 12.5px; font-weight: 600; color: var(--teal-soft); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.brand-sub:hover { background: rgba(255,255,255,0.16); }
@media (max-width: 860px) { .brand-sub { display: none; } }
.header-search { flex: 1; min-width: 240px; display: flex; position: relative; }
.header-search input { flex: 1; padding: 10px 14px; border-radius: 8px 0 0 8px; border: none; outline: none; font-size: 14px; }
.header-search button { padding: 10px 14px; border-radius: 0 8px 8px 0; border: none; background: var(--teal); color: var(--navy); font-weight: 600; font-size: 17px; display: flex; align-items: center; }

.search-suggestions { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 200; max-height: 340px; overflow-y: auto; }
.search-suggestions.open { display: block; }
.search-suggestion-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 13.5px; }
.search-suggestion-item .mdi { color: var(--text-faint); font-size: 16px; flex-shrink: 0; }
.search-suggestion-item .sugg-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion-item .sugg-meta { color: var(--text-faint); font-size: 12px; flex-shrink: 0; }
.search-suggestion-item:hover, .search-suggestion-item.active { background: var(--bg); }
.search-suggestion-item + .search-suggestion-item { border-top: 1px solid var(--border); }
.header-actions { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.btn-sell { background: var(--gradient); color: var(--navy); padding: 9px 16px; border-radius: 8px; font-weight: 600; border: none; }
.header-link { color: #cfd6e4; font-size: 14px; }
.header-link:hover { color: #fff; }
button.header-link { background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
button.header-link .caret { color: var(--text-faint); font-size: 10px; }
.location-picker, .notif-picker, .account-picker, .lang-picker { position: relative; }
.lang-picker .header-icon-btn { display: inline-flex; align-items: center; gap: 3px; font-size: 17px; }
.lang-code { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.lang-picker .dropdown-panel { width: 180px; }
.lang-picker .location-list { max-height: 320px; overflow-y: auto; }
.account-picker .dropdown-panel { width: 200px; }
.dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; padding: 8px 6px; font-size: 13.5px; border-radius: 6px; color: var(--text); }
.dropdown-item:hover { background: var(--bg); }
.location-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; padding: 9px 12px; border-radius: 8px; font-size: 13px; white-space: nowrap; }
.location-btn .caret { color: var(--text-faint); font-size: 10px; }
.header-icon-btn { position: relative; color: #cfd6e4; font-size: 18px; background: none; border: none; padding: 4px; line-height: 1; }
.header-icon-btn:hover { color: #fff; }
.icon-badge { position: absolute; top: -6px; right: -8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

.dropdown-panel { display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 100; width: 300px; }
.dropdown-panel.dropdown-panel-right { left: auto; right: 0; }
.dropdown-panel.open { display: block; }
.dropdown-inner { background: #fff; color: var(--text); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--border); padding: 12px; max-height: 380px; overflow-y: auto; }
.dropdown-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); margin: 10px 0 6px; }
.location-current-btn, .location-clear-btn { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 6px; font-size: 13.5px; font-weight: 600; color: var(--teal); border-radius: 6px; }
.location-current-btn:hover, .location-clear-btn:hover { background: var(--bg); }
.location-clear-btn { color: var(--text-muted); font-weight: 500; }
.location-list { display: flex; flex-direction: column; }
.location-list-item { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: none; border: none; padding: 8px 6px; font-size: 13.5px; border-radius: 6px; }
.location-list-item:hover { background: var(--bg); }
.location-list-item.active { color: var(--teal); font-weight: 600; }
.dropdown-divider { height: 1px; background: var(--border); margin: 12px 0; }
.location-typeahead-wrap { display: flex; flex-direction: column; gap: 6px; }
.location-typeahead-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: #fff; }
.location-typeahead-results { display: flex; flex-direction: column; max-height: 200px; overflow-y: auto; }
.location-typeahead-results .location-list-item strong { color: var(--teal); font-weight: 700; }

.notif-list { display: flex; flex-direction: column; gap: 2px; }
.notif-item { display: flex; gap: 10px; padding: 9px 6px; border-radius: 8px; font-size: 12.5px; }
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: #EAF3FF; }
.notif-item .notif-icon { font-size: 16px; }
.notif-item strong { font-size: 13px; }

.back-bar { background: var(--surface); border-bottom: 1px solid var(--border); }
.back-bar .container { padding: 10px 20px; }
.back-link { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.back-link:hover { color: var(--text); }
.back-link-dest { padding-left: 16px; border-left: 1px solid var(--border); color: var(--teal); }
.back-link-dest:hover { color: var(--navy); }

.nav-row { border-top: 1px solid rgba(255,255,255,0.08); }
.nav-links { display: flex; gap: 22px; padding: 10px 0; overflow-x: auto; }
.nav-links a { font-size: 13.5px; color: #b9c1d1; white-space: nowrap; }
.nav-links a.active, .nav-links a:hover { color: var(--teal-soft); }

.mobile-tabbar { display: none; }
@media (max-width: 720px) {
  .header-search, .nav-row { display: none; }
  .site-header .top-row { flex-wrap: wrap; gap: 10px 14px; }
  .location-btn { padding: 7px 10px; font-size: 12px; }
  .mobile-tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy); border-top: 1px solid rgba(255,255,255,0.1); z-index: 60; }
  .mobile-tabbar a { flex: 1; text-align: center; padding: 8px 0 6px; color: #b9c1d1; font-size: 11px; }
  .mobile-tabbar a.active { color: var(--teal-soft); }
  body { padding-bottom: 54px; }
  .dropdown-panel { width: 90vw; max-width: 320px; }
}

/* ---------------- Buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 14px; color: var(--text); }
.btn:hover { border-color: var(--text-faint); }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: #1a2130; }
.btn-gold { background: var(--gradient); color: var(--navy); border-color: transparent; }
.btn-outline-primary { background: var(--surface); color: var(--navy); border-color: var(--navy); font-weight: 700; }
.btn-outline-primary:hover { background: #F5F6F8; }
.btn-teal { background: var(--teal); color: var(--navy); border-color: var(--teal); }
.btn-danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Same auth provider a returning Athance app user already signed up with
   (Google/Apple) — kept close to each brand's usual button convention
   (white+border for Google, solid black for Apple) so it reads as the
   familiar "Continue with X" pattern, not a generic themed button. */
.btn-provider { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; }
.btn-google { background: #fff; color: #1F1F1F; border-color: #dadce0; }
.btn-google:hover { background: #F8F9FA; }
.btn-apple { background: #000; color: #fff; border-color: #000; }
.btn-apple:hover { background: #1a1a1a; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-muted); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Login/Register only — plain flat --bg read as unfinished behind a
   centered card. A soft teal wash (the brand accent, barely-there) plus a
   tiled target-rings motif (on-brand for a shooting-sports marketplace,
   not a generic dot grid) gives the page some depth without competing
   with the form itself. */
.auth-page {
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cg%20fill='none'%20stroke='%232DD4BF'%20stroke-width='1'%20opacity='0.16'%3E%3Ccircle%20cx='60'%20cy='60'%20r='4'/%3E%3Ccircle%20cx='60'%20cy='60'%20r='11'/%3E%3Ccircle%20cx='60'%20cy='60'%20r='18'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 1100px 650px at 50% -8%, #E4F9F5 0%, var(--bg) 65%);
  background-repeat: repeat, no-repeat;
  background-size: 120px 120px, 100% 100%;
}

/* ---------------- Cards / Surfaces ---------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-sm); }
.panel-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; display:flex; align-items:center; justify-content:space-between; }
.overview-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.overview-item { display: flex; align-items: center; gap: 10px; }
.overview-item .mdi { font-size: 24px; color: var(--text-faint); }
.overview-item .faint { font-size: 12px; margin-bottom: 2px; }
.overview-item strong { font-size: 14px; }

/* ---------------- Product Card ---------------- */
.product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column; cursor: pointer; }
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card .photo-wrap { position: relative; aspect-ratio: 4/3; background: #eee; overflow: hidden; }
.product-card .photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.product-card.is-unavailable .photo-wrap img { filter: grayscale(65%) blur(0.5px) brightness(0.92); opacity: 0.6; }
.product-card.is-unavailable .price, .product-card.is-unavailable .title { color: var(--text-faint); }
.stamp-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-weight: 800; font-size: 9px; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; box-shadow: 0 3px 10px rgba(0,0,0,0.35); pointer-events: none; }
.stamp-sold { background: var(--danger); }
.stamp-paused { background: var(--text-muted); }
.notify-btn { margin-top: 8px; background: #FFF6E5; color: #92610C; border-color: #F3D98A; }
.notify-btn:hover { background: var(--warning); color: #fff; border-color: var(--warning); }

.photo-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-bottom: 10px; }
.photo-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--border); cursor: pointer; transition: all .15s ease; }
.photo-dot:hover { background: var(--text-faint); }
.photo-dot.active { width: 20px; border-radius: 4px; background: var(--navy); }
.thumb-photo { border-radius: 6px; cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%; border: 2px solid transparent; opacity: 0.75; transition: all .15s ease; }
.thumb-photo:hover { opacity: 1; }
.thumb-photo.active { border-color: var(--teal); opacity: 1; }
.product-card .save-btn { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,0.9); border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 15px; }
.product-card .save-btn.saved { color: var(--danger); }
.product-card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-card .price { font-weight: 700; font-size: 16px; }
.product-card .title { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card .meta { font-size: 12px; color: var(--text-faint); display: flex; justify-content: space-between; }

/* ---------------- Badges ---------------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.badge-condition-new, .badge-condition-like_new { background: #E6F7EF; color: var(--success); }
.badge-condition-excellent { background: #EAF3FF; color: #2563EB; }
.badge-condition-good { background: #FFF6E5; color: var(--warning); }
.badge-condition-fair, .badge-condition-needs_repair { background: #FDEAEA; color: var(--danger); }
.badge-verified { background: #E7FBF8; color: #0F9E8E; }
.badge-tradeable { background: #EFF8EE; color: #2C8C3C; }
.badge-outline { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.price-was { font-size: 13px; font-weight: 500; color: var(--text-faint); text-decoration: line-through; }
.badge-sale { background: var(--danger); color: #fff; }
.tag-badge { background: var(--gradient); color: var(--navy); font-weight: 700; }

/* ---------------- Category tiles ---------------- */
.cat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 12px; text-align: center; font-size: 13px; font-weight: 600; }
.cat-tile .emoji { font-size: 26px; display: block; margin-bottom: 8px; }
.cat-tile:hover { border-color: var(--teal); color: var(--teal); }

/* ---------------- Forms ---------------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field .hint { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.field input[type=text], .field input[type=number], .field input[type=tel], .field input[type=email], .field input[type=password], .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; outline: none; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.form-card { max-width: 480px; margin: 40px auto; }

/* ---------------- Layout helpers ---------------- */
.two-col { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* Listing detail page only — .two-col's default 260px:1fr is right for
   categories.html's narrow-filters/wide-results split, but backwards here
   (photos+specs+description is the MAIN content, the price/buy panel is
   the compact sidebar) and, uncentered, left a large empty gap on the
   right at the wider container width. Capped + centered so a single item
   page doesn't stretch edge-to-edge the way a results grid should, and the
   buy panel is genuinely narrower now instead of stretching to fill
   whatever's left over. */
.listing-layout { grid-template-columns: 1fr 400px; max-width: 1180px; margin: 0 auto; }
@media (max-width: 860px) { .listing-layout { grid-template-columns: 1fr; } }
/* Sticky so the buy/chat panel stays reachable while scrolling the taller
   photo+specs+description column instead of ending blank partway down —
   same pattern most real listing pages use for their buy box. Only above
   the 860px breakpoint, where the two columns actually sit side by side. */
@media (min-width: 861px) { .listing-buybox { position: sticky; top: 96px; } }
.sidebar { position: sticky; top: 90px; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.table th { color: var(--text-faint); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab { padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; }
.tab.active { color: var(--navy); border-color: var(--teal); }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; display: block; }
.stat-card .num { font-size: 26px; font-weight: 700; }
.stat-card .label { font-size: 12.5px; color: var(--text-faint); }
.stat-card-link { cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s; }
.stat-card-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--teal); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-faint); }

.sell-promo-banner { display: flex; align-items: center; gap: 14px; background: #EAF3FF; border: 1px solid #D6E7FB; border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 20px; flex-wrap: wrap; }
.sell-promo-icon { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: var(--gradient); }
.sell-promo-banner strong { flex: 1; font-size: 15px; }

/* ---------------- Chat ---------------- */
.chat-layout { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 140px); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
@media (max-width: 760px) { .chat-layout { grid-template-columns: 1fr; height: auto; } }
.chat-list { border-right: 1px solid var(--border); overflow-y: auto; }
.chat-list-item { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; }
.chat-list-item.active, .chat-list-item:hover { background: #F5F8FA; }
.chat-thread { display: flex; flex-direction: column; height: 100%; }
.chat-thread-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 70%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; }
.msg.mine { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 3px; }
.msg.theirs { align-self: flex-start; background: #EEF1F5; border-bottom-left-radius: 3px; }
.msg.offer { align-self: center; background: #E7FBF7; border: 1px dashed var(--teal); }
.chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chat-input-row input { flex: 1; }

.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gradient); color: var(--navy); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }

/* ---------------- Modal / Toast ---------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(10,14,20,0.5); display: none; align-items: center; justify-content: center; z-index: 200; }
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: var(--radius-lg); padding: 22px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13.5px; z-index: 300; opacity: 0; transition: opacity .2s; }
.toast.show { opacity: 1; }

/* ---------------- Stepper ---------------- */
.stepper { display: flex; gap: 6px; margin-bottom: 28px; }
.stepper .step { flex: 1; height: 4px; border-radius: 4px; background: var(--border); }
.stepper .step.done { background: var(--teal); }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--navy-soft); color: #9aa4b6; margin-top: 60px; padding: 40px 0 90px; font-size: 13px; }
.site-footer a { color: #cfd6e4; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-inner { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; margin-bottom: 28px; }
.footer-brand .brand { color: #fff; margin-bottom: 12px; }
.footer-brand p { max-width: 260px; line-height: 1.5; margin: 0; }
.footer-tagline { color: var(--teal-soft); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 12px; }
.footer-col h4 { color: #fff; font-size: 13px; margin-bottom: 10px; }
.footer-col div { margin-bottom: 8px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); }

.footer-social { display: flex; align-items: center; gap: 12px; }
.footer-social-label { color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.footer-social-icons { display: flex; align-items: center; gap: 8px; }
.footer-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; transition: transform 0.15s, opacity 0.15s; }
.footer-social-icon:hover { transform: translateY(-2px); opacity: 0.9; }
.footer-social-icon svg { width: 15px; height: 15px; }
.footer-social-icon-facebook { background: #1877F2; }
.footer-social-icon-instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.footer-social-icon-linkedin { background: #0A66C2; }

.footer-store-badges { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.store-badge { display: flex; align-items: center; gap: 8px; background: #000; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 7px 14px; text-decoration: none; transition: border-color 0.2s; }
.store-badge:hover { border-color: rgba(255,255,255,0.35); }
.store-badge svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }
.store-badge-text { line-height: 1.25; }
.store-badge-sub { font-size: 9px; color: #fff; letter-spacing: 0.3px; }
.store-badge-main { font-size: 14px; font-weight: 600; color: #fff; font-family: var(--font); }

@media (max-width: 860px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } }
@media (max-width: 720px) { .site-footer { padding-bottom: 90px; } }

/* ---------------- Help widget ---------------- */
.help-launcher { position: fixed; bottom: 22px; right: 22px; display: flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--teal); color: var(--navy); border: none; font-size: 15px; font-weight: 700; box-shadow: var(--shadow-lg); z-index: 150; }
.help-launcher:hover { background: var(--teal-soft); }
.help-panel { display: none; flex-direction: column; position: fixed; bottom: 86px; right: 22px; width: 320px; height: 440px; max-height: 70vh; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; z-index: 150; }
.help-panel.open { display: flex; }
.help-header { background: var(--navy); color: #fff; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; }
.help-close { background: none; border: none; color: #cfd6e4; font-size: 14px; }
.help-close:hover { color: #fff; }
.help-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.help-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; white-space: pre-line; }
.help-msg.theirs { align-self: flex-start; background: #EEF1F5; border-bottom-left-radius: 3px; }
.help-msg.mine { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 3px; }
.help-quick-replies { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.help-quick-replies button { text-align: left; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; color: var(--teal); font-weight: 600; }
.help-quick-replies button:hover { border-color: var(--teal); background: #F0FDFB; }
.help-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.help-input-row input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; }
.help-input-row input:focus { border-color: var(--teal); }
@media (max-width: 720px) {
  .help-launcher { bottom: 66px; }
  .help-panel { bottom: 128px; right: 12px; left: 12px; width: auto; }
}

/* Persistent, dismissible floating "Sell" nudge — reinforces the hero
   headline (see browse-nav.js) the same research-backed way every real
   two-sided marketplace does: a standing, always-visible Sell affordance,
   not a gate. Translucent + closeable per explicit request; positioned
   mid-right (not bottom-right) so it never collides with the Chat
   launcher, which already owns that corner. */
.sell-nudge { position: fixed; top: 50%; right: 22px; transform: translateY(-50%); z-index: 149; display: flex; align-items: center; gap: 6px; }
/* Same gradient + rounded-rectangle shape as the header's own .btn-sell
   (var(--gradient), 8px radius) — matched on request, translucency now
   applied as opacity on the gradient itself rather than a flat rgba fill. */
.sell-nudge-btn { display: flex; align-items: center; gap: 6px; padding: 13px 20px; border-radius: 8px; background: var(--gradient); opacity: 0.88; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--navy); font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.35); transition: opacity .15s; }
.sell-nudge-btn:hover { opacity: 1; }
.sell-nudge-close { width: 22px; height: 22px; border-radius: 50%; background: rgba(15, 23, 42, 0.55); color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; padding: 0; }
.sell-nudge-close:hover { background: rgba(15, 23, 42, 0.85); }
@media (max-width: 720px) {
  .sell-nudge { right: 12px; }
  .sell-nudge-btn { padding: 11px 16px; font-size: 14px; }
}

.hero { background: linear-gradient(135deg, var(--navy) 0%, #1c2536 100%); color: #fff; padding: 46px 0; }
.hero h1 { font-size: 28px; margin-bottom: 6px; }
.hero .search-hero { display: flex; max-width: 640px; margin-top: 18px; position: relative; }
.hero .search-hero input { flex: 1; padding: 14px 16px; border-radius: 10px 0 0 10px; border: none; font-size: 15px; }
.hero .search-hero button { padding: 14px 22px; border-radius: 0 10px 10px 0; border: none; background: var(--gradient); color: var(--navy); font-weight: 700; }

/* ---------------- Sport selector (Athance Market landing) ---------------- */
.sport-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); max-width: 760px; margin: 24px auto 0; }
.sport-tile { padding: 28px 16px; text-align: center; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.sport-tile:not(.sport-tile-soon):hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--teal); }
.sport-tile .sport-emoji { font-size: 34px; margin-bottom: 10px; }
.sport-tile-soon { opacity: 0.55; cursor: default; }