:root{
      --bs-font-sans-serif: "Montserrat", system-ui, -apple-system, "Segoe UI",
                        Roboto, "Helvetica Neue", Arial, "Noto Sans",
                        "Liberation Sans", sans-serif, "Apple Color Emoji",
                        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --bs-body-font-family: var(--bs-font-sans-serif);
      --gold:#c9a227;
      --ink:#1f2937;
      --muted:#6c757d;
      --card-radius:16px;
      --sticky-h:56px;   /* JS will update this dynamically */
      --shadow:0 10px 30px rgba(0,0,0,.08);
      --shadow-soft:0 6px 18px rgba(0,0,0,.06);
      --shadow-hover:0 12px 28px rgba(0,0,0,.1);
      --overlay-top: 56px;
      --overlay-gap: 10px;    /* small extra spacer when needed */
    }

    html, body{
      font-family: var(--bs-font-sans-serif);
      font-weight: 300;
      letter-spacing: 0;
    }

    /* Global */
    * { box-sizing: border-box; }
    body{ background:#f7f7f8; color:#1b1b1d; }
    a { text-decoration: none; }
    .caps { text-transform: capitalize; }
    .text-ink { color: var(--ink) }
    .text-muted-2 { color:#6b7280 }
    .btn-gold{ background:var(--gold); color:#fff; border:0; }
    .btn-gold:hover{ filter:brightness(.95); color:#fff; }
    .rounded-xl { border-radius: 18px; }
    .rounded-2xl { border-radius: 22px; }

    /* Progress bar (scroll) */
    .scroll-progress {
      position: fixed; top: 0; left: 0; height: 3px; width: 0%;
      background: linear-gradient(90deg, #f5e6a2, var(--gold));
      z-index: 2000; transition: width .1s linear;
      box-shadow: 0 0 6px rgba(201,162,39,.6);
    }

    /* Sticky action bar */
    .action-bar{
      position: sticky; top: 0; z-index: 1050; background:#fff; border-bottom:1px solid #eee;
      box-shadow:0 4px 12px rgba(0,0,0,.04);
    }

    /* Top brand row */
    .brand-mark {
      display:flex; align-items:center; gap:.6rem;
      font-weight:800; letter-spacing:.2px; color:var(--ink);
    }
    .brand-logo {
      width:32px; height:32px; border-radius:8px; background:var(--gold);
      display:inline-flex; align-items:center; justify-content:center; color:#111; font-weight:900;
      box-shadow:0 6px 18px rgba(201,162,39,.22);
    }

    /* Ghost toggles (Filters / Stone Match) */
    .ghost-toggle{
      --bg:#f3f4f6;
      --bg-hover:#eceff3;
      --border:#e5e7eb;
      --text:#111827;
      display:flex; align-items:center; justify-content:center; gap:.5rem;
      width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border);
      border-radius:12px; padding:.5rem .9rem; font-weight:600; line-height:1;
      transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .ghost-toggle:hover{ background:var(--bg-hover); }
    .ghost-toggle:focus{ outline:none; box-shadow:0 0 0 .2rem rgba(17,24,39,.08); }
    .ghost-toggle .chev{ font-size:.95rem; color:#6b7280; transition:transform .2s ease; }
    .ghost-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
    .ghost-toggle .badge{
      background:#111827; color:#fff; border-radius:999px;
      padding:.2rem .45rem; font-size:.72rem; font-weight:700;
    }
    .ghost-toggle .thumb{ width:18px; height:18px; border-radius:4px; object-fit:cover; display:none; }
    .ghost-toggle.has-thumb .thumb{ display:inline-block; }

    /* Search pill */
    .search-wrap{
      position:relative; width:100%; max-width:560px;
    }
    .search-wrap .icon{
      position:absolute; left:12px; top:50%; transform:translateY(-50%);
      color:#9aa1ac; font-size:1rem; pointer-events:none;
    }
    .search-wrap .clear{
      position:absolute; right:8px; top:50%; transform:translateY(-50%);
      border:0; background:transparent; color:#9aa1ac; padding:.25rem;
      display:none; line-height:1; border-radius:6px;
    }
    .search-wrap .clear:hover{ color:#6b7280; background:#eef0f3; }
    #q{
      border-radius:999px; padding:.6rem 2.4rem .6rem 2.2rem;
      border:1px solid #e5e7eb; background:#f6f7f9;
      outline:none; box-shadow:none; transition:border-color .15s, box-shadow .15s, background .15s;
    }
    /* --- SEARCH INPUT FIX --- */
    .search-wrap input.form-control{
      /* keep room for the left icon + right clear button */
      padding-left: 2.4rem !important;
      padding-right: 2.4rem !important;

      /* gold border */
      border: 1px solid var(--gold) !important;
      background: #fff;
    }
    .search-wrap input.form-control:focus{
      border-color: var(--gold) !important;
      box-shadow: 0 0 0 .2rem rgba(201,162,39,.15) !important;
    }
    .search-wrap .icon{ left: 14px; } /* nudge icon so it never overlaps */

    #q:focus{ background:#fff; border-color:#d1d5db; box-shadow:0 0 0 .18rem rgba(17,24,39,.06); }
    #q::placeholder{ color:#9aa1ac; }
    .search-wrap.loading .icon{ color:#6b7280; }
    .search-wrap.loading .icon::after{
      content:""; margin-left:.45rem; display:inline-block; width:.9rem; height:.9rem;
      border:2px solid #cbd5e1; border-top-color:#6b7280; border-radius:50%;
      animation:spin .9s linear infinite; vertical-align:-2px;
    }
    /* Hide the native clear X so only our custom clear shows */
    .search-wrap input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
    .search-wrap input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
    .search-wrap input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; }

    @keyframes spin{ to{ transform:translateY(-50%) rotate(360deg); } }

    /* Info bar tools */
    .toolbar .btn, .toolbar .form-select { height: 38px; }
    .btn-ghost {
      background:#fff; border:1px solid #e7e7e9; color:#1f2937;
    }
    .btn-ghost:hover { background:#fafafa; }

    /* Cards */
    .card{ border:0; border-radius:var(--card-radius);
      box-shadow:var(--shadow-soft); transition:transform .18s ease, box-shadow .18s ease;
      background:#fff;
    }
    .card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
    .card-img-top{
      height:240px; object-fit:cover; border-top-left-radius:var(--card-radius); border-top-right-radius:var(--card-radius);
      transition: transform .25s ease;
    }
    .card:hover .card-img-top { transform: scale(1.02); }
    .badge-soft {
      background:#fff7db; color:#8a6a00; border:1px solid #f0e1a5; font-weight:600;
    }
    .overlay-tools{
      position:absolute; top:10px; right:10px; display:flex; gap:.4rem; z-index:2;
    }
    .tool-btn {
      width:34px; height:34px; border-radius:999px; border:1px solid #e7e7e9; background:#fff;
      display:inline-flex; align-items:center; justify-content:center; color:#111827;
      box-shadow:0 4px 10px rgba(0,0,0,.08);
    }
    .tool-btn.active { border-color: var(--gold); background:#fffaf0; color:#7a5c00; }

    /* Skeletons */
    .skeleton{
      border-radius:12px;
      background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
      background-size:400% 100%; animation:skeleton 1.2s ease-in-out infinite;
    }
    @keyframes skeleton{0%{background-position:100% 50%}100%{background-position:0 50%}}

    .hidden{ display:none !important; }

    /* Grid helper (3 per row on lg+) */
    @media (min-width:992px){ .col-lg-4-3 { flex:0 0 auto; width:33.333333%; } }

    /* Chips */
    .chip{ 
      background:#fff; 
      border:1px solid #e7e7e9; 
      padding: .375rem .5rem; 
      border-radius:999px; 
      font-size: .875rem; 
      display: inline-flex; 
      align-items: center;
      gap: .25rem;
    }
    .chip .x{ 
      font-size: 1.25rem;
      cursor:pointer;
      line-height: 1;
      display: inline-block;
      margin-left:.25rem;
     }
    .chip-clear {
      background: #fff;
      border: 1px dashed var(--muted, #6b7280);
    }
    .chip-clear i { margin-right: .25rem; }

    /* Gold CTA chip used for mobile "Show results" */
    .chip-cta{
      background: var(--gold);
      color: #fff;
      border: 1px solid var(--gold);
      font-weight: 700;
      padding: .45rem .7rem;
    }
    .chip-cta:hover{ filter: brightness(.95); color:#fff; }

    /* (you already enlarged the x, but keep this to make it obvious) */
    .chip .x{ font-size: 1.25rem; }

    /* Filters area */
    .fly-card{ border:0; border-radius:14px; box-shadow:var(--shadow); }
    .facet-grid { display:grid; gap:.25rem .75rem; }
    @media (min-width: 576px) { .facet-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (min-width: 992px) { .facet-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
    .filter-tile{ background:#fff; border:1px solid #eee; border-radius:12px; padding:1rem; }
    .filter-tile .tile-title{
      font-weight:700; font-size:.95rem; color:#111827; display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem;
    }

    .filters-applybar{
      position: sticky;
      bottom: 0;
      padding-top: 12px;
      margin-top: 8px;
      background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%);
      z-index: 3;
      /* account for iOS home bar */
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* Sticky top bar inside Filters (mobile) */
    .filter-topbar.sticky-top{
      top: calc(var(--overlay-top, 0px) + var(--overlay-gap, 0px));
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,.08);
      padding: .5rem .25rem;
      z-index: 1060; /* above card content */
    }


    /* Dimensions inputs */
    .input-with-unit { display:flex; align-items:center; gap:.5rem; }
    .input-with-unit .unit { color:#6b7280; font-size:.85rem; white-space:nowrap; }

    /* Drag/drop */
    .dropzone{
      border:2px dashed #e4e4ea; border-radius:12px; background:#fff;
      padding:18px; text-align:center; transition: background .2s, border-color .2s;
    }
    .dropzone.drag{ border-color:var(--gold); background:#fffaf0; }

    /* Matching panel */
    .matching-panel{
      border:1px dashed #e5e7eb; border-radius:12px; background:#fffdf5; padding:1rem;
      display:flex; align-items:center; gap:.75rem; justify-content:center; margin-bottom:.5rem;
    }
    .matching-panel .spinner{
      width:20px; height:20px; border-radius:50%;
      border:3px solid #e5e7eb; border-top-color:#111827; animation:matchSpin .9s linear infinite;
    }
    @keyframes matchSpin { to { transform: rotate(360deg); } }
    .matching-panel .title{ font-weight:700; }
    .matching-panel .sub{ color:#6b7280; font-size:.9rem; }

    /* Pills (category/type for match) */
    .pill {
      appearance: none; border:1px solid #e5e7eb; background:#fff; color:#111827;
      padding:.35rem .6rem; border-radius:999px; font-size:.85rem; cursor:pointer;
      transition: background .15s, border-color .15s, color .15s;
    }
    .pill.active { background:#111827; color:#fff; border-color:#111827; }
    .pill:focus { outline:none; box-shadow:0 0 0 .2rem rgba(17,24,39,.12); }

    /* View modes */
    .list-mode .card { display:flex; flex-direction:row; }
    .list-mode .card-img-top { width:280px; height:100%; max-height:180px; border-radius:12px 0 0 12px; }
    .list-mode .card-body { display:flex; flex-direction:column; justify-content:center; }
    .compact .card .card-img-top { height:200px; }
    .compact.list-mode .card-img-top { width:220px; max-height:160px; }

    /* Quick View modal image */
    .qv-img { width:100%; max-height:420px; object-fit:cover; border-radius:14px; }

    /* Quick View overlays + lots */
    .qv-media{ position:relative; }
    .qv-overlay{ position:absolute; inset:0; pointer-events:none; }
    .qv-grid{
      position:absolute; inset:0;
      background-image:
        linear-gradient(to right, rgba(17,24,39,.25) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(17,24,39,.25) 1px, transparent 1px);
      background-size: var(--grid-gap, 40px) var(--grid-gap, 40px);
      display:none;
    }
    .qv-grid.show{ display:block; }

    .qv-lots-rail{ display:flex; gap:.5rem; overflow:auto; padding-top:.5rem; }
    .qv-lot{ min-width:120px; border:1px solid #eee; border-radius:8px; padding:.35rem; background:#fff; cursor:pointer; }
    .qv-lot.active{ outline:2px solid var(--gold); }
    .qv-lot img{ width:100%; height:70px; object-fit:cover; border-radius:6px; }
    .qv-lot .name{ font-weight:600; font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .qv-lot .meta{ font-size:.75rem; color:#6b7280; }

    .qv-ruler line{ stroke:#111827; stroke-width:1; }
    .qv-ruler text{ font-size:11px; fill:#111827; paint-order:stroke; stroke:#fff; stroke-width:3px; }

    /* Compare drawer */
    .compare-drawer {
      position: fixed; right: 16px; bottom: 16px; z-index: 1045;
      width: min(420px, 92vw); background:#fff; border:1px solid #eee; border-radius:16px;
      box-shadow: 0 16px 40px rgba(0,0,0,.18); overflow:hidden; display:none;
    }
    .compare-drawer.show { display:block; }
    .compare-list { max-height: 300px; overflow:auto; }
    .compare-item { display:flex; gap:.6rem; padding:.6rem .8rem; border-bottom:1px dashed #eee; align-items:center; }
    .compare-thumb { width:56px; height:44px; object-fit:cover; border-radius:8px; background:#f4f5f7; }

    /* FABs */
    .fab {
      position: fixed; bottom: 20px; right: 20px; z-index: 1030;
      width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
      background:#fff; border:1px solid #e7e7e9; color:#111; box-shadow:0 6px 18px rgba(0,0,0,.12);
    }
    .fab:hover { background:#fafafa; }
    .back-to-top { right: 80px; }

    /* Toasts container */
    #toastWrap { position: fixed; bottom: 20px; left: 20px; z-index: 3000; }

    @media (prefers-reduced-motion: reduce){
      .card, .card:hover, .card .card-img-top { transition:none !important; transform:none !important; }
      .collapse, .collapsing { transition: none !important; }
    }

    /* Comfortable (default) – keep your current look */

    /* Compact – shrink image, paddings, spacing, font sizes, gutters */
    body.compact .row.g-3 { --bs-gutter-x: .5rem; --bs-gutter-y: .75rem; }
    body.compact .card { box-shadow: var(--shadow-soft); }
    body.compact .card-body { padding: .55rem .7rem; }
    body.compact .card-footer { padding: .55rem .7rem; }
    body.compact .card-title { font-size: .92rem; margin-bottom: .15rem !important; }
    body.compact .small, body.compact .card .small { font-size: .74rem; }
    body.compact .badge { transform: scale(.9); transform-origin: left; }

    body.compact .card .card-img-top { height: 160px; }
    body.compact.list-mode .card-img-top { width: 180px; max-height: 140px; }

    /* Optional: tighten chips, tool buttons, etc. */
    body.compact .chip { padding: .15rem .4rem; font-size: .76rem; }
    body.compact .tool-btn { width: 30px; height: 30px; }


    /* --- Recently Viewed: sleek glass/gradient look --- */
    .rv-toggle{
      --ring: rgba(17,24,39,.06);
      position: relative;
      display:flex; align-items:center; justify-content:space-between;
      min-height: 46px; padding:.55rem .9rem;
      border-radius:14px;
      border:1.5px solid transparent;
      background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(90deg, rgba(201,162,39,.25), rgba(201,162,39,.05)) border-box;
      box-shadow: 0 6px 20px rgba(0,0,0,.06);
      backdrop-filter: saturate(1.1) blur(4px);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    }
    .rv-toggle:hover{
      transform: translateY(-1px);
      box-shadow: 0 10px 28px rgba(0,0,0,.10);
    }
    .rv-toggle-left{
      display:flex; align-items:center; gap:.55rem; min-width:0;
      color: var(--ink);
    }
    .rv-toggle i.bi-clock-history{ color:#8b8f97; }
    .rv-toggle-kicker{
      font-weight:700; font-size:.9rem; letter-spacing:.15px; color:#111827;
    }
    .rv-toggle-title{
      font-weight:800; letter-spacing:.2px;
    }
    .rv-count{
      margin-left:.25rem;
      font-size:.85rem; color:#6b7280;
    }
    .rv-arrow{
      font-size:1.05rem; color:#6b7280; transition: transform .18s ease, opacity .18s ease;
    }

    /* Open panel – refined card with subtle accent */
    .rv-panel{
      position:relative; background:#fff; border-radius:16px;
      box-shadow: var(--shadow);
      border:1px solid #eceef2;
      padding: .9rem .9rem 3rem .9rem; /* extra bottom space for the bottom button */
    }
    .rv-header h6{ font-weight:800; letter-spacing:.2px; }
    .rv-header .badge{ font-weight:600; }

    /* Bottom-floating "collapse" button */
    .rv-bottom-toggle{
      position:absolute; left:50%; transform: translateX(-50%);
      bottom:.6rem; width:42px; height:42px; border-radius:999px;
      border:1px solid #eceef2; background:#fff; color:#111;
      box-shadow: 0 6px 18px rgba(0,0,0,.10);
      display:flex; align-items:center; justify-content:center;
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .rv-bottom-toggle:hover{ transform:translateX(-50%) translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.12); }

    /* Make the horizontal cards breathe nicely on phones */
    #recentRail.h-scroll{ gap:14px; padding-bottom:8px; }
    .rv-card{ border:1px solid #eceef2; }

    /* Optional: rotate the top arrow if you ever keep the bar visible while open */
    .rv-toggle[aria-expanded="true"] .rv-arrow{ transform: rotate(180deg); opacity:.6; }

    /* --- Perf & accessibility polish --- */

    /* Paint only when needed; reserve space to avoid layout shift */
    .card { content-visibility: auto; contain-intrinsic-size: 300px 420px; }
    .list-mode .card { contain-intrinsic-size: 220px 220px; }

    /* Clear keyboard focus on small round action buttons */
    .tool-btn:focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    }


    /* Tighten on xs screens */
    @media (max-width: 576px){
      .rv-toggle-title{ display:inline; }
      .rv-panel{ padding-left:.65rem; padding-right:.65rem; }
    }

    .h-scroll{
      display:flex; gap:12px; overflow:auto; padding-bottom:6px;
      scroll-snap-type: x mandatory;
    }
    .rv-card{
      min-width:220px; scroll-snap-align:start; border:1px solid #eee;
      border-radius:12px; background:#fff; box-shadow:var(--shadow-soft);
      transition:transform .15s ease, box-shadow .15s ease;
    }
    .rv-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
    .rv-img{ width:100%; height:120px; object-fit:cover; border-radius:12px 12px 0 0; }
    .rv-body{ padding:.5rem .6rem; }
    .rv-title{ font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    /* Replace square "C" with actual logo image */
    .brand-logo-img{
      width:36px; height:36px; object-fit:contain; border-radius:8px;
      box-shadow: 0 6px 18px rgba(201,162,39,.22);
    }


    /* Compare modal ~80% viewport width */
    #compareModal .modal-dialog {
      width: 80vw;
      max-width: 80vw;
    }

    /* Overlay collapses: float under the sticky action bar, over the grid */
  .collapse-overlay{
    position: fixed !important;           /* key: fixed to viewport */
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--overlay-top) + var(--overlay-gap)) !important;     /* you already compute --sticky-h in JS */
    max-height: calc(100vh - var(--overlay-top) - var(--overlay-gap)) !important;
    overflow: auto !important;                 /* panel scrolls, page does not move */
    z-index: 1045 !important;    
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    border-bottom-left-radius: .75rem;
    border-bottom-right-radius: .75rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  /* Optional: nicer inner spacing if the collapse holds a .container */
  .collapse-overlay > .container,
  .collapse-overlay > .container-fluid{
    padding-top: .5rem;
    padding-bottom: .75rem;
  }
  .collapse-overlay .fly-card{
      max-height: calc(100vh - var(--overlay-top) - var(--overlay-gap));
      overflow: auto;
  }


  /* OPTIONAL: lock body scroll while overlay open (add/remove .no-scroll on <body>) */
  body.no-scroll{
    overflow: hidden;
    padding-right: var(--scrollbar-comp, 0px); /* prevent layout shift if you want to compensate */
  }

  /* Fixed overlays sit under the sticky bar, over the grid */
  #filtersCollapse.collapse-overlay,
  #matchCollapse.collapse-overlay{
    top: calc(var(--overlay-top) + var(--overlay-gap)) !important;
    max-height: calc(100vh - var(--overlay-top) - var(--overlay-gap)) !important;
  }

  /* Scrim */
  #filterScrim.filter-scrim{
    position: fixed !important;
    inset: 0 !important;
    top: calc(var(--overlay-top) + var(--overlay-gap)) !important;
    background: rgba(0,0,0,.2);
    z-index: 1040 !important; 
    display: none;
  }
  #filterScrim.filter-scrim.show{ display: block; }



    @media (max-width: 768px){
      #compareModal .modal-dialog {
        width: 96vw;
        max-width: 96vw;
      }
    }

      /* --- LIST VIEW MOBILE LAYOUT --- */
    @media (max-width: 576px){
      .list-mode .card{ flex-direction: column; }
      .list-mode .card-img-top{
        width:100%; height:180px; max-height:none;
        border-radius:12px 12px 0 0; /* top-rounded when stacked */
      }
      .list-mode .card-body{ padding-top:.75rem; }
      /* stack the inner info row so text gets full width */
      .list-mode .card .d-flex.align-items-start{
        flex-direction: column; align-items: stretch; gap:.5rem;
      }
    }
    .lg-grid { display: none; }
    /* Grid helper for desktop filters */
    @media (min-width: 992px){
      .lg-grid {
          display: grid !important;
          grid-template-columns: repeat(3, minmax(0,1fr));
          gap: 1rem;
      }
    }

    /* Print only the Compare modal contents */
    @media print {
      body * { visibility: hidden !important; }
      #compareModal, #compareModal * { visibility: visible !important; }
      #compareModal { position: absolute; left: 0; top: 0; width: 100% !important; }
      .modal-backdrop { display: none !important; }
      #cmpTableWrap { overflow: visible !important; }
      #compareModal .modal-dialog { max-width: none !important; width: auto !important; }
    }

    /* Make Bootstrap's toggler icon visible on white bg */
    .navbar-toggler { border: none; }
    .navbar-toggler:focus { box-shadow: none; }

    /* Desktop dropdowns: slightly nicer spacing */
    .navbar .dropdown-menu { border-radius: 12px; padding: .5rem; }
    .navbar .dropdown-item {
      font-family: "Montserrat";
      font-weight: 300;
      font-size: 14px;
    }
    .navbar .dropdown-item:hover { background: #f2f2f2; }

    /* --- Mobile offcanvas menu --- */
    .offcanvas.text-bg-dark { background-color: #232323 !important; }
    .offcanvas .offcanvas-title { color: #fff; }
    /* Keep “Menu” title hidden (if any) */
    .offcanvas .offcanvas-title { display: none; }
    .mobile-menu { margin: 0; padding: 0; }
    .mobile-menu > li { border-bottom: 1px solid rgba(255,255,255,.08); }
    /* Colors per spec */
    .offcanvas.text-bg-dark { background-color: #232323 !important; }
    .mobile-menu .mm-link,
    .mobile-menu .mm-submenu a { color: #aaaaaa; }
    .mobile-menu .mm-link:hover,
    .mobile-menu .mm-submenu a:hover {
      color: #ffffff;
      background: rgba(255,255,255,.06);
    }
    .mm-link {
      width: 100%; text-align: left;
      display: flex; justify-content: space-between; align-items: center;
      gap: .5rem; padding: 1rem 1.25rem;
      color: #e9ecef; background: transparent; border: 0;
      text-decoration: none;
    }
    .mm-link:hover { background: rgba(255,255,255,.05); color: #fff; }

    .mm-toggle i { transition: transform .2s ease; }
    .mm-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

    .mm-submenu { display: none; list-style: none; margin: 0; padding: 0 .75rem 1rem 1.75rem; }
    .mm-submenu.show { display: block; }
    .mm-submenu a {
      display: block; padding: .5rem 0; color: #cfd3da; text-decoration: none;
    }
    .mm-submenu a:hover { color: #fff; }

    /* Tight, consistent header height */
    .site-header .navbar{
      min-height: 74px;
      padding-top: 0 !important;
      padding-bottom: 0 !important; position: relative;
      position:relative;
      z-index: 1080;            /* > 1020 */
    }

    /* Bootstrap dropdown menus from the header sit even higher */
    .site-header .dropdown-menu{
      z-index: 1085;            /* ensures menus never tuck behind the action bar */
    }


    /* Desktop menu look */
    .site-header .navbar .nav-link,
    .navbar .dropdown-item{
      font-weight: 600;     /* bold-ish */
      font-size: 14px;      /* smaller */
      color: #8d8d8d;       /* darkish gray */
    }
    .site-header .navbar .nav-link:hover,
    .site-header .navbar .nav-link:focus,
    .site-header .navbar .nav-link.show{
      color: #646464;       /* hover color */
    }
    /* Make the brand text bold too */
    .site-header .navbar-brand span {
      font-weight: 800;
    }

    .navbar-brand{ padding: .25rem 0; }


    /* Bigger logo */
    .site-logo{
      height: 54px;            /* desktop logo size */
      width: auto;
      display: block;          /* kills baseline gap */
    }    
    .site-logo.small { width: 40px; height: 40px; }

    /* Footer */
    .site-footer { font-size: .95rem; }

  
    /* Hide mobile offcanvas & burger on desktop no matter what */
    @media (min-width: 992px) {
      #mainNav.offcanvas {
        display: none !important;
        visibility: hidden !important;
        transform: none !important;
      }
      .navbar .navbar-toggler {
        display: none !important;
      }
      .site-header .navbar {
        padding-top: 1rem;
        padding-bottom: 1rem;
      }
    }

      /* Safety: don’t render the offcanvas on desktop */
      @media (min-width: 992px){
        #mainNav.offcanvas { display: none !important; visibility: hidden !important; transform: none !important; }
        .navbar .navbar-toggler { display: none !important; }
      
      }

    /* ===== Mobile offcanvas (drops from top in your JS) ===== */
    .mobile-offcanvas.offcanvas-top{
      top: var(--header-h, 76px);                    /* sits below header */
      height: calc(100vh - var(--header-h, 76px));
      max-height: calc(100vh - var(--header-h, 76px));
    }

    /* Mobile offcanvas comes down from the top and sits below the header */
    @media (max-width: 991.98px){
       .site-logo{ height: 44px; }
      .mobile-offcanvas.offcanvas-top {
        top: var(--header-h, 72px);                      /* set via JS below */
        height: calc(100vh - var(--header-h, 72px));
        max-height: calc(100vh - var(--header-h, 72px));
        border-top: 1px solid rgba(255,255,255,.08);
      }
    }

    /* Make offcanvas sit above everything (action bar, overlays, etc.) */
    .offcanvas{ z-index: 1100 !important; }
    .offcanvas-backdrop{ z-index: 1090 !important; }

    /* Have the mobile menu drop from the very top and cover the header */
    .mobile-offcanvas.offcanvas-top{
      top: 0 !important;
      height: 100vh !important;
      max-height: 100vh !important;
      border-top: 0 !important;
    }

    /* Mobile Filters: reserve space at bottom so content isn't hidden by the bar */
    @media (max-width: 991.98px) {
      #filtersCollapse .fly-card.card-body {
        padding-bottom: 72px; /* height of bottom bar + breathing room */
      }
      /* Bottom action bar pinned to viewport bottom */
      .filter-bottombar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 -6px 12px rgba(0,0,0,.08);
        padding: .5rem .75rem;
        z-index: 1065; /* above overlay card content */
      }
    }

    /* (Optional) if you kept any .filter-topbar styles, neutralize them */
    .filter-topbar { display: none; }