/* ── Mobile-only: collapse tabs into a toggle ── */
@media (max-width: 768px) {

  /* Hide the standard tab list by default; JS adds .is-open to reveal it */
  nav.tabs ul.tabs.primary {
    display: none;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 6px 0 4px;
  }

  nav.tabs ul.tabs.primary.is-open {
    display: flex;
  }

  nav.tabs ul.tabs.primary li {
    margin: 0;
    width: 100%;
  }

  /* Individual filter items */
  nav.tabs ul.tabs.primary li a {
    display: block;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    background: #fde8ef;
    color: #2c2c2c;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
  }

  /* Hover: light pink bg, dark text — clear contrast */
  nav.tabs ul.tabs.primary li a:hover {
    background: #f5d0e0;
    color: #2c2c2c;
  }

  /* Active: deep pink bg, white text */
  nav.tabs ul.tabs.primary li a.is-active {
    background: linear-gradient(135deg, #c14a7b, #b03a6d);
    color: #fff !important;
  }

  /* ── The toggle button ── */
  .filter-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #e07a9f, #d15f8a);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    gap: 8px;
    box-shadow: 0 3px 10px rgba(224, 122, 159, 0.25);
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

  .filter-collapse-toggle:hover {
    background: linear-gradient(135deg, #f8e1eb, #f5d0e0);
    color: #2c2c2c;
    box-shadow: 0 4px 14px rgba(209, 95, 138, 0.3);
  }

  .filter-collapse-arrow {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .filter-collapse-toggle[aria-expanded="true"] .filter-collapse-arrow {
    transform: rotate(180deg);
  }
}

/* ── Desktop: hide the toggle button, show tabs normally ── */
@media (min-width: 769px) {
  .filter-collapse-toggle {
    display: none;
  }
}