.mf-body { padding-top: 120px; }

    /* ── SEARCH BAR ── */
    .search-wrap {
      position: relative;
    }
    .search-input {
      width: 100%;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 16px 52px 16px 52px;
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 15px;
      outline: none;
      transition: all 0.25s;
    }
    .search-input:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(78,222,163,0.08); }
    .search-input::placeholder { color: var(--text-faint); }
    .search-icon {
      position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
      color: var(--text-faint); font-size: 20px; pointer-events: none;
    }
    .search-clear {
      position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: var(--text-faint); cursor: pointer;
      font-size: 18px; display: none; padding: 2px;
      transition: color 0.2s;
    }
    .search-clear:hover { color: var(--text-primary); }

    /* ── FILTER CHIPS ── */
    .filter-scroll {
      display: flex; gap: 8px; overflow-x: auto;
      scrollbar-width: none; padding-bottom: 2px;
    }
    .filter-scroll::-webkit-scrollbar { display: none; }
    .filter-chip {
      flex-shrink: 0;
      padding: 8px 18px;
      border-radius: 99px;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text-muted);
      font-size: 12px; font-weight: 600;
      font-family: var(--font-body);
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .filter-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
    .filter-chip.active {
      background: var(--emerald);
      border-color: var(--emerald);
      color: var(--btn-text);
    }
    .subcat-chip {
      flex-shrink: 0;
      padding: 6px 14px;
      border-radius: 99px;
      border: 1px dashed var(--border);
      background: transparent;
      color: var(--text-faint);
      font-size: 11px; font-weight: 600;
      font-family: var(--font-body);
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .subcat-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
    .subcat-chip.active {
      background: rgba(78,222,163,0.12);
      border: 1px solid var(--emerald);
      color: var(--emerald);
    }
    .amc-select { min-width: 100%; }

    /* ── SORT ROW ── */
    .sort-select {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 32px 8px 12px;
      color: var(--text-muted);
      font-size: 12px; font-weight: 600;
      font-family: var(--font-body);
      cursor: pointer; outline: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234f6270' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      transition: all 0.2s;
    }
    .sort-select:focus { border-color: var(--emerald); color: var(--text-primary); }

    /* ── CATEGORY CHIPS (with icon) ── */
    .filter-chip { display: inline-flex; align-items: center; gap: 6px; }
    .filter-chip .chip-icon { font-size: 16px; }

    /* ── BREADCRUMB TRAIL (category > subcategory) ── */
    .filter-breadcrumb {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      font-size: 12px; color: var(--text-faint); font-weight: 600;
    }
    .filter-breadcrumb .crumb-active { color: var(--emerald); }
    .filter-breadcrumb .material-symbols-outlined { font-size: 14px; }

    /* ── AMC CARD ── */
    .amc-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 22px;
      cursor: pointer;
      transition: all 0.25s;
      position: relative;
      overflow: hidden;
      display: flex; align-items: center; gap: 16px;
      height: 100%;
    }
    .amc-card::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--emerald), transparent);
      opacity: 0; transition: opacity 0.35s;
    }
    .amc-card:hover { border-color: var(--border-hover); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.35); }
    .amc-card:hover::after { opacity: 1; }
    .amc-card:hover .amc-arrow { transform: translateX(3px); color: var(--emerald); }
    .amc-card.is-empty { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.6); }
    .amc-card.is-empty:hover { transform: none; box-shadow: none; border-color: var(--border); }
    .amc-card.is-empty:hover::after { opacity: 0; }

    .amc-house-logo {
      width: 44px; height: 44px; border-radius: 10px;
      background: var(--bg-card-high);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 14px; font-weight: 800;
      color: var(--emerald);
      flex-shrink: 0;
    }
    .amc-name {
      font-size: 13.5px; font-weight: 700;
      color: var(--text-primary);
      line-height: 1.35;
    }
    .amc-count {
      font-size: 11px; color: var(--text-faint); margin-top: 4px;
      display: flex; align-items: center; gap: 5px;
    }
    .amc-count .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--emerald); flex-shrink: 0; }
    .amc-count.zero .dot { background: var(--text-faint); }
    .amc-arrow {
      margin-left: auto; flex-shrink: 0; color: var(--text-faint);
      transition: all 0.25s; font-size: 20px;
    }

    /* ── SKELETON LOADER ── */
    .skeleton {
      background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-high) 50%, var(--bg-card) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      border-radius: 6px;
    }
    @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
    .skel-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 22px;
      display: flex; align-items: center; gap: 16px;
    }

    /* ── EMPTY / ERROR STATE ── */
    .state-box {
      text-align: center; padding: 80px 24px;
      color: var(--text-faint);
    }
    .state-box .material-symbols-outlined { font-size: 48px; margin-bottom: 16px; display: block; }
    .state-box h4 { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 8px; }
    .state-box p { font-size: 0.875rem; }

    /* ── LOAD MORE ── */
    .load-more-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%;
      padding: 14px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      color: var(--text-muted);
      font-family: var(--font-body);
      font-size: 13px; font-weight: 600;
      cursor: pointer; transition: all 0.2s;
    }
    .load-more-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }

    /* ── SPINNER ── */
    .pg-spinner {
      width: 32px; height: 32px; margin: 0 auto;
      border: 2.5px solid rgba(78,222,163,0.15);
      border-top-color: var(--emerald);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── PAGINATION STATUS ── */
    #resultCount { font-size: 12px; color: var(--text-faint); }