/* ===========================================================
   MOBILE FILTERS POPUP (phones only, max-width: 600px) — home page.
   The services callout, country/university filters, category chips and
   "recently viewed" row are tucked away so the product grid sits right
   under the hero buttons. A floating pill (left side, styled like the
   Grid | Scroll switch) opens them in a popup.
   Desktop / tablet are untouched.
   =========================================================== */
.cm-mf-fab, .cm-mf-backdrop, .cm-mf-sheet{ display: none; }

@media (max-width: 600px){
  /* hide in the page (scoped to the original parents, so they show again inside the popup) */
  main.container > .services-callout,
  main.container > .filter-docket,
  .glass-panel > #categoryChips,
  .glass-panel > #recentlyViewedSection{ display: none !important; }
  .glass-panel > .section-head{ margin-top: 4px }

  /* ----- pill: hard-wired to the left of the Grid | Scroll switch (same row, same pinning) ----- */
  .cm-mf-fab{
    display: inline-flex; position: relative; flex: none; align-self: center;
    margin: 0 -6px 0 auto;               /* pushes the pair to the right; 6px gap to the switch */
    box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .cm-mf-fab::after{ display: none; animation: none; box-shadow: none; }   /* no glowing ring */
  .cm-mf-fab .cmsv-tbtn span{ display: inline; }
  /* while the switch is pinned (scrolling), the pill is pinned on the left edge at the same height */
  .cm-mf-fab.cm-mf-pinned{ position: fixed; left: 6px; margin: 0; z-index: 900; }
  html.cmsv-open .cm-mf-fab, html.cm-mf-open .cm-mf-fab{ display: none; }

  /* ----- popup ----- */
  .cm-mf-backdrop{
    display: block; position: fixed; inset: 0; z-index: 1700;
    background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .cm-mf-sheet{
    display: flex; flex-direction: column;
    position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 1710;
    max-height: calc(100% - 80px);
    border-radius: 20px;
    background: var(--surface, #17171b);
    color: var(--text, #f5f5f2);
    border: 1px solid var(--border, #2b2b31);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    transform: translateY(24px); opacity: 0; pointer-events: none;
    transition: transform .22s ease, opacity .2s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html.cm-mf-open .cm-mf-backdrop{ opacity: 1; pointer-events: auto; }
  html.cm-mf-open .cm-mf-sheet{ transform: none; opacity: 1; pointer-events: auto; }
  html.cm-mf-open, html.cm-mf-open body{ overflow: hidden; }

  .cm-mf-head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px;
  }
  .cm-mf-head h3{ margin: 0; font-size: 16px; font-weight: 700; }
  .cm-mf-close{
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border, #2b2b31);
    background: var(--surface-2, #212126); color: inherit; cursor: pointer; font-size: 14px;
  }
  .cm-mf-body{ overflow-y: auto; padding: 0 14px 14px; overscroll-behavior: contain; }
  .cm-mf-body > *{ margin-top: 12px !important; }
  .cm-mf-body > :first-child{ margin-top: 0 !important; }
  .cm-mf-body .chip-row{ flex-wrap: wrap; overflow: visible; padding: 0; }
  .cm-mf-body .filter-bar{ margin: 0; }
  .cm-mf-done{ margin: 4px 14px 14px; width: calc(100% - 28px); box-sizing: border-box; }
}